makopi23のブログ

makopi23が日々の生活で感じたことを気ままに綴るブログです。

「第1回Angular2勉強会 #ng2Curry」に参加しました

2016/2/24(水) 「第1回Angular2勉強会 #ng2Curry」に参加してきました。

connpass
http://lig.connpass.com/event/26115/

場所は上野のコワーキングスペース「いいオフィス」さんです。
参加者は60人くらいかな。

Struts1ベースだった自社の開発フレームワークがAngularJS+Springベースに刷新中で、個人的にもAngularJSを勉強している最中なのです。
部内でもAngularJSの社内勉強会を毎週やってます。
Angular1しか触ってませんがAngular2にも興味はあったので、ちょうど良い機会、ということで参加しました。

以下、自分用の復習メモ。


はじめてのAngular2


金井 健一 氏 (AngularJS Japan User Group 管理人)

はじめてのAngular2 from Kenichi Kanai


Concept
  • Angular2はSPAに必要な要素をすべてカバーしている。
  • Data Binding、Template Engine、Routing、Ajax Support、Test、Security、DI

Concept - from Angular2
  • Angular2からComponet-BaseとUniversal JavaScriptというコンセプトが追加になった。
  • Componet-Base ・・・ Angular2ではタグを書いて、すぐコンポーネントを宣言しないといけない。
  • Universal JavaScript ・・・ JavaScriptが動作する環境なら、どこでも動けばいいじゃん。

Dependencies
  • Angular2をやるにあたって、知っておかないと苦労すること
  • ES2015
  • RxJS ・・・ 非同期通期で、Stremでデータを管理するライブラリ。RxJSを知らないと辛い。
  • TypeScript
  • SysteJS ・・・ モジュールをカバーしてくれる?

Hello Angular2
package.json
  • 6、7行目のlite-serverが動かなかったので、消した
  • npmをインストールするといい。

app.component.js

  • 以前よりコード量ちょっと増えた

main.js
  • componentをロードする

Directive
  • Angular1のDirectiveは70くらいあった。
  • Angular2でDirectiveの数は実質減った。ng-showとかng-hideは無い。代わりにNgClassでやることになる。

Angular v 1.xとの違い
  • Angular1のServiceは、Angular2だとClassになる。
  • Angular2はES5でも書けるが、オフィシャルはTypeScriptのサンプルしかない。昔はES6のサンプルとかもあった
  • TypeScriptは決して必須ではない。無理して使わないでもよい。

オフィシャルがTypeScriptになぜなったかの経緯
  • コミュニティのユーザに、どのトランスパイラを使うかアンケートをしたら、以下の結果だった。
  • TypeScript 45%
  • BABEL 33.2%
  • ES5 9%


Angular2 With Libraries


laco 氏 (株式会社トップゲート)

20160224_ngcurry1.jpg

AngularJS Library
  • モジュールシステムがあるのが特徴。
  • 文字列ベースのDIでライブラリの機能を使う。
  • 標準機能とライブラリ機能の使い方に差がないのがよい。
  • 公式ライブラリがいくつもある。
  • 公式で提供されてオープンソースなので、お手本になる。
  • npm以外でも全部で1万を超えるんじゃないか。

Angular 2 Library
  • 独自のモジュールシステムが無くなって、ES6のモジュールを使う。
  • Type-based DI : 引数の名前が間違ってDIができない、ということが無くなる。
  • サードパーティ製のライブラリ作るお手本となる。

Angular 2のライブラリの使い方
  • importで読み込む
  • 読み込んだクラスをDIでコンポーネントから取得して使う。
  • 2段構成から外れないことが混乱しない方法。

DI:Provider/Injector
  • DI ProviderとInjectorがセットになって動く。
  • SampleServicはhttpをDIする。

Official Libraries
  • 基本的なところから外部化されている。
  • コアな機能にはAjaxの機能がない。

http
  • httpパッケージ使うにはHTTP_PROVIDERSをimportする。
  • bootstrapで定型的に書く。

Http classの使い方
  • httpをインポートする
  • SampleServiceにInjectする。
  • httpを使う機能を書く。

Observableとは?
  • ReactiveX/RxJSが提供しているクラス。
  • Angualr 2はRxJSに依存している。
  • Angular2をちゃんとのやろうとおもうとRxJSを勉強しないとダメ。

Component Router
  • URLのパスとコンポーネントを紐づける機能。
  • ui-routerをベースにしてる。
  • 4つの登場人物がいる。RouteConfig、RouterOutlet、RouterLink、Router。

Setup
  • 2つimportする。後者はbaseタグ。
  • 嫌な人はHashを使える。

Route Definition
  • どこからどこへ、を定義する。
  • コンポーネントに対して設定する。
  • /fooにFooComponentを出すように書く。
  • 設定できるプロパティは5つ。

Manual Navigation
  • router.navigateはPromiseを返す。

testing package
  • 依存が無くて個別に利用可能。
  • angular2/tesging は単体テストで使える。いろんな単位でテストできる。Jasmineに依存している。

angular2/http/testing
  • httpリクエストをモックする。
  • Jasmine非依存でシンプルに使える

angular2/router/testing
  • ドキュメントが0。
  • ソースコードが2つしか無いのに使い方がわからない・・・

Summary
  • httpはObservableと共にある。
  • RouterはPromiseと共にある。
  • Angular 2はβなので、今後変わる可能性がある。
  • APIを追うのではなく、APIの思想を理解しておきましょう。
  • angular2とbootstrapは衝突しない。
  • angular2materialが開発中で、マテリアルデザインできる。


Angular2へのマイグレーション


稲葉 聡 氏 (株式会社LIG)

Angular2 migration from Satoshi Inaba


現在携わっている某受託案件の場合
  • 3つのアプリ App1、App2、App3のうち、App2でマイグレをやってみようかなと考えた。
  • でも、Directiveが55個もある。

マイグレーションの2つの選択肢
  • 1.Angular 2で一から書き直す
  • 2.少しづつマイグレーションする。
    • モジュール単位で1こずつAngular2に置き換える。

少しづつマイグレーション
  • Angular 2にはマイグレーションの補助ツール ngUpgrade がある。

マイグレーションは簡単ですか?
  • 会場で挙手した人は1人~2人。
  • 答えは、「プロジェクトによる。」

マイグレーションしやすくする為の準備
  • Angular Style Guideに従う。
  • トランスパイラの導入
  • モジュールローダの導入

Angular1.5のComponetは必須か?
  • Directiveでも定義を気を付ければ済む話でもある。

TypeScriptの導入
  • TSは始めると意外に平気。素晴らしい。
  • けど数があるので、TSへの書き変えが大変で、挫折した・・・


感想


Angular1しか触ったこと無いので、内容が難しくて付いていけない部分も多々ありましたが、勉強になりました。
いざ、Angular2が正式にリリースされて勉強を始めた時に見返したいと思います。

関係者の皆様、ありがとーございました。
関連記事
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://makopi23.blog.fc2.com/tb.php/208-8af2e512
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad