connpass
http://lig.connpass.com/event/26115/
場所は上野のコワーキングスペース「いいオフィス」さんです。
参加者は60人くらいかな。
Struts1ベースだった自社の開発フレームワークがAngularJS+Springベースに刷新中で、個人的にもAngularJSを勉強している最中なのです。
部内でもAngularJSの社内勉強会を毎週やってます。
Angular1しか触ってませんがAngular2にも興味はあったので、ちょうど良い機会、ということで参加しました。
以下、自分用の復習メモ。
はじめてのAngular2
金井 健一 氏 (AngularJS Japan User Group 管理人)
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
- https://angular.io/docs/js/latest/quickstart.html
- app/main.js ・・・ モジュールをロードする。
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 氏 (株式会社トップゲート)
AngularJS Library
- モジュールシステムがあるのが特徴。
- 文字列ベースのDIでライブラリの機能を使う。
- 標準機能とライブラリ機能の使い方に差がないのがよい。
- 公式ライブラリがいくつもある。
- 公式で提供されてオープンソースなので、お手本になる。
- npm以外でも全部で１万を超えるんじゃないか。
Angular 2 Library
- 独自のモジュールシステムが無くなって、ES6のモジュールを使う。
- Type-based DI ： 引数の名前が間違ってDIができない、ということが無くなる。
- サードパーティ製のライブラリ作るお手本となる。
Angular 2のライブラリの使い方
- importで読み込む
- 読み込んだクラスをDIでコンポーネントから取得して使う。
- ２段構成から外れないことが混乱しない方法。
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をベースにしてる。
- ４つの登場人物がいる。RouteConfig、RouterOutlet、RouterLink、Router。
Setup
- ２つimportする。後者はbaseタグ。
- 嫌な人はHashを使える。
Route Definition
- どこからどこへ、を定義する。
- コンポーネントに対して設定する。
- /fooにFooComponentを出すように書く。
- 設定できるプロパティは５つ。
Manual Navigation
- router.navigateはPromiseを返す。
testing package
- 依存が無くて個別に利用可能。
- angular2/tesging は単体テストで使える。いろんな単位でテストできる。Jasmineに依存している。
angular2/http/testing
- httpリクエストをモックする。
- Jasmine非依存でシンプルに使える
angular2/router/testing
- ドキュメントが0。
- ソースコードが２つしか無いのに使い方がわからない・・・
Summary
- httpはObservableと共にある。
- RouterはPromiseと共にある。
- Angular 2はβなので、今後変わる可能性がある。
- APIを追うのではなく、APIの思想を理解しておきましょう。
- angular2とbootstrapは衝突しない。
- angular2materialが開発中で、マテリアルデザインできる。
Angular2へのマイグレーション
稲葉 聡 氏 (株式会社LIG)
現在携わっている某受託案件の場合
- 3つのアプリ App1、App2、App3のうち、App2でマイグレをやってみようかなと考えた。
- でも、Directiveが55個もある。
マイグレーションの２つの選択肢
- １．Angular 2で一から書き直す
- ２．少しづつマイグレーションする。
- モジュール単位で１こずつAngular2に置き換える。
少しづつマイグレーション
- Angular 2にはマイグレーションの補助ツール ngUpgrade がある。
マイグレーションは簡単ですか？
- 会場で挙手した人は１人～２人。
- 答えは、「プロジェクトによる。」
マイグレーションしやすくする為の準備
- Angular Style Guideに従う。
- トランスパイラの導入
- モジュールローダの導入
Angular1.5のComponetは必須か？
- Directiveでも定義を気を付ければ済む話でもある。
TypeScriptの導入
- TSは始めると意外に平気。素晴らしい。
- けど数があるので、TSへの書き変えが大変で、挫折した・・・
感想
Angular1しか触ったこと無いので、内容が難しくて付いていけない部分も多々ありましたが、勉強になりました。
いざ、Angular2が正式にリリースされて勉強を始めた時に見返したいと思います。
関係者の皆様、ありがとーございました。
