Angular2実践入門

1. Angular2実践入門株式会社オープンウェブ・テクノロジー白石俊平

2. 自己紹介 • html5jファウンダー • HTML5 Experts.jp編集長 • 株式会社オープンウェブ・テクノロジー代表取締役 • TechFeedというサービスをはじめました

3. 本日の流れ • ライブコーディングで学ぶAngular2 • Angular2を始めたらあなたが出会うであろう11のこと

4. ライブコーディングで学ぶ Angular2

5. スターターキット作りました • https://goo.gl/WiM2zn – 短縮前: https://github.com/shumpei/angular2-webpack-starter-minimum • Angular2をWebpackで始めるための最小構成。 – 教育用途、もしくは開発環境を自作したい人向け • Out-of-boxを求めるなら以下がおすすめ – angular-seed・・・公式のスターターキット。全部入り。 – angular-webpack-starter・・・それなりにコンパクトで割と全部入り

6. 動かしてみる $ git clone https://github.com/shumpei/angular2- webpack-starter-minimum $ cd angular2-webpack-starter-minimum $ npm install $ npm start http://localhost:8080/webpack-dev-server/

7. Angular2の特徴 • TypeScriptを推奨 • コンポーネント指向 • ちょっとキモい • Angularっぽさ • やっぱりキモい

8. 特徴その1: TypeScript • ES.next全部 + 型 • 実験的なサポート扱いの「デコレーター」は必須

9. コードを眺めてみる

10. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } app.component.ts

11. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } コンポーネント定義（デコレーター） app.component.ts

12. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } <my-app>で埋め込めるように app.component.ts

13. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } テンプレートファイルのURL app.component.ts

14. 特徴その2: コンポーネント指向 • UIコンポーネントをツリー上に構成してアプリケーションを作る

15. コンポーネントを書いてみる

16. import {Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert- button.component.html' }) export class AlertButtonComponent { } alert-button.component.ts <button>Click me!</button> alert-button.component.html <my-alert-button>で埋め込めるように

17. import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent] }) export class AppComponent { } 使用するディレクティブを宣言 app.component.ts <h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> alert-button.component.html ディレクティブを利用

18. 特徴その3: ちょっとキモい • テンプレートのシンタックスがキモい

19. クリックイベントを捕捉してみる

20. <button (click)="onClick()">Click me!</button> キモい alert-button.component.ts export class AlertButtonComponent { onClick(): void { window.alert('Hello!'); } } alert-button.component.ts 対応するイベントハンドラ

21. 特徴その4: Angularっぽさ • サービス／DI／ディレクティブなど、 Angular1で使われてた用語／概念を引き継いでいる – やり方は大きく変わったけど

22. サービスを書いてDIしてみる

23. import {Injectable} from 'angular2/core'; @Injectable() export class MyService { loadData(): string[] { return ['a', 'b', 'c']; } } DI可能なサービスの定義 my.service.ts

24. ... import {MyService} from '../services/my.service'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent], providers: [MyService] }) export class AppComponent { private data: string[]; constructor(private myService: MyService) { this.data = myService.loadData(); } } プロバイダの指定 my.service.ts Inject!

25. 特徴その5: やっぱりキモい • テンプレート中では、以下の様な記法を要素内に記述していくことになる。 – ( ), [ ], [( )], #, * – 全力出すとこんな感じ: • HTML/CSSをデコレーターで指定できる <input *ngIf="alive" [(ngModel)]="name" #name>

26. ループを書いてみる（ngFor)

27. ... <ul> <li *ngFor="#item of data">{{item}}</li> </ul> DI可能なサービスの定義 app.component.html

28. テンプレートをデコレーターに埋め込んでみる。ついでにCSSも。

29. @Component({ selector: 'my-app', template: ` <h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> <ul> <li *ngFor="#item of data">{{item}}</li> </ul> `, styles: [` h1 { color: red; } `], directives: [AlertButtonComponent], providers: [MyService] }) export class AppComponent {...} alert-button.component.ts app.component.ts HTMLもCSSもデコレータに埋め込める

30. CSSもカプセル化される • @ComponentデコレーターのstylesというプロパティにCSSを指定できる。 • そのCSSはコンポーネント内のみ有効 import {Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert- button.component.html', styles: [`* {color: blue;}`] }) export class AlertButtonComponent { } コンポーネント外には影響しない

31. Angular2を始めたらあなたが出会うであろう11のこと

32. techfeed.io 最先端が、ここにある。世界中からエンジニア向け情報を収集するサービス Angular2を仕事で使ってみた

33. その1: ハードル高くない？ • 前提技術大杉。 – TypeScript (ES.next全部+型) – モジュールバンドラー – RxJS – そしてもちろんAngular2 • 意外とそうでもなかった（個人的には） – Angularの文脈を引き継いでいる – TypeScriptはJavaっぽい（白石は元Java屋） – RxJSは最初から詳しく知っている必要なし – Webpackの調整が一番時間かかった。。 • でもこれは誰か一人がやればいいこと

34. その2: 言語はどれを選ぶ？ • TypeScript一択、だと思う – ドキュメント完備 – 型があるのは嬉しい（コンパイル／コード補完） – デコレーターが嬉しい • その他の選択肢について – JavaScript/Babel…止めはしない。 (が、きっとTSのほうが楽) – Dart…ごめんなさい

35. その3: バンドラーを何にする？ • TypeScriptを選んだのなら、モジュールバンドラー必須 import {Component} from 'angular2/core' ↓ (TypeScriptコンパイラ) var Component = require('angular2/core').Component; ↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変換) var component_1 = __webpack_require__(1);

36. その3: バンドラーを何にする？ • TechFeedではWebpackを選択 – 実績豊富 – なんでもできそう – 既に下調べが済んでいた • その他の選択肢について – Browserify…未調査 – System.js • 現在のところAngular2公式？ • 後発なため情報が少なめ • JSPMも組み合わせる必要あり？ • 参考文献 – http://webpack.github.io/docs/comparison.html – http://ilikekillnerds.com/2015/07/jspm-vs-webpack/

37. その4: エディタは何にする？ • TypeScript対応のものを（できればtslint も） – Atom+Plugins – Sublime Text+Plugins – Visual Studio Code – WebStorm • 元Java屋さんとしては、「IDE」にも心惹かれる今日このごろ

38. その5: テンプレートをどこに書く？ Webpackを使えばこんなことも！ @Component({template: `code`}) // (1) @Component({templateUrl:'url'}) // (2) VS @Component({template:require('a.html')}) // (3) リクエスト数ファイル数 HTML分離エディタサポート前処理 (1)埋め込み少少 × × × (2)URL 多多 ○ ○ × (3)Webpack 少少 ○ ○ ○

39. その6: テンプレートがキモい • 慣れろ • 新しいメンタルモデルを理解すれば、少しは楽になる。 – こいつはHTMLじゃない。HTML Plusだ。 – タグの属性と(DOMの)プロパティはそもそも似て非なるものだ。 – [ ]はプロパティを指している – 属性ってやつは、プロパティの初期化に過ぎない。  <div style="font-size: 16px"></div>  <div [style.fontSize]="16px"></div>

40. その7: Sassを使いたい • モジュールバンドラーの機能を駆使すれば、 Sass/Less/Stylus/PostCSSなども利用可能 @Component({styles:[require('comp.scss')]}) loaders: [ {test: /.scss$/, loaders: ['raw', 'sass?sourceMap', 'postcss'], exclude: /node_modules/} ... ] • Webpackでの設定例

41. その8: RxJSとのつきあい方 • RxJS（リアクティブプログラミング用ライブラリ）は、理解が必須ではないものの、限りなく必須に近い – HTTP, EventEmitterなどの頻出APIがRxJS前提なため • ObservableはES7にも提案されているので、この機会に勉強しておくのは吉 – でも、奥深すぎ。。 • Angular2はRxJS5 (Beta)を使っているので要注意！ – ググッて先頭に出てくるのは4系 – 「ReactiveX」ってやつが5系です – 5系は、ドキュメントとかもまだまだ・・・

42. その9: ページネーションしたい • よくあるユースケースだけど、世界中が現在実装方法を模索中 • ぼくらはObservableの簡単なラッパーを作りました – 以下はイメージを伝えるための擬似コード interface PagedObservable<T> extends Observable<T> { nextPage(): void; } class EntryService { getTimeline(): PagedObservable<Entry[]> } class TimelineComponent { timeline: PagedObservable<Entry[]>; more() { this.timeline.nextPage(); } }

43. その10: UIフレームワーク使いたい！ • TechFeedではIonic2を採用 – Angular2で完全にリライトされている – Angular2開発の参考にもなる • その他（調査中） – Onsen UI 2.0 – angular-material2 – ng2-bootstrap

44. その11: コンポーネント設計 • コンポーネントの粒度や、振る舞いや状態をどこに配置するかは、現在熱い話題 • 「Presentational and Container Components」が議論の土台 – だが、やはり悩ましい – 「全部外側に移譲する」ってこと？めんどくさすぎない？ – Google MapsやYoutubeの埋め込みプレーヤー、「いいね！」ボタンなどは良いコンポーネントの例に思える。スマートだけど再利用性高い。 • 「必要になるまで分割するな」 – 個人的に、唯一の正解と思えていること

45. おまけ

46. Angularの最新情報はこちらでどうぞ！ https://techfeed.io/channels/AngularJS

47. ご清聴ありがとうございました。

Angular2実践入門

Shumpei Shiraishi

Angular2実践入門