「第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

• 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)

Angular2 migration from Satoshi Inaba

現在携わっている某受託案件の場合

• 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が正式にリリースされて勉強を始めた時に見返したいと思います。

関係者の皆様、ありがとーございました。