ng-japan 2016で発表したスライドです。

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. ご清聴ありがとうございました。