この記事は、「ng-japan 2016」のセッションレポート（速報）です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。
Angular2実践入門 / 白石俊平氏
当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。
ライブコーディングで学ぶAngular2
今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。
https://github.com/shumpei/angular2-webpack-starter-minimum
– Angular2をwebpackを利用してミニマムスタートできるプロジェクト
– 教育用途、もしくは開発環境を自作したい人向け
Angular2の特徴（かなり主観）
特徴その１：TypeScriptを推奨
TypeScriptを一言で言えば、ES.next全部＋型である。また、実験的なサポート扱いである「デコレーター」は、Angular2を使う上では必須となる。
特徴その２：コンポーネント指向
実際のコードは以下のとおり。JavaScriptとは大分変わった見た目になるのが第一印象。
|
1 2 3 4 5 6 7 8 |
import {Component} from 'angular2/core'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html' }) export class AppComponent { } |
importはモジュールをインポートする仕組み。@Componentはデコレーターであり、これを取り付けたクラスがUIコンポーネントとなる。上記サンプルはAngular2における、UIコンポーネントの例である。UIコンポーネントは簡単にいえば、自作のタグだ。上記サンプルだと、<my-app>タグをHTMLに埋め込めるようになる。また、templateUrlは実際に出力するテンプレートを指定する。
次に、my-alert-buttonコンポーネントをライブコーディングする。
|
1 2 3 4 5 6 7 8 |
import {Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert-button.component.html', }) export class AlertButtonComponent { } |
|
1 |
<button>Click me!</button> |
作成したコンポーネントdirectivesに指定し、実際に利用する。
|
1 2 3 4 5 6 7 8 9 10 |
import {Component} from 'angular2/core'; import {AlertButtonComponent} from './alert-button.component'; @Component({ selector: 'my-app', templateUrl: '/src/components/app.component.html', directives: [AlertButtonComponent], }) export class AppComponent { } |
|
1 2 |
<h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> |
これは、ボタンを押すとアラートを発生させる処理をコンポーネントとして実装した例である。
特徴その３：ちょっとキモい
テンプレートのシンタックスがキモい。例えば、クリックイベントを補足する処理は、以下のように、(click)="onClick()"と記載し、対応するイベントハンドラはonClick()としてコンポーネント内に記述する。
|
1 |
<button (click)="onClick()">Click me!</button> |
|
1 2 3 4 5 6 7 8 9 10 11 |
import {Component} from 'angular2/core'; @Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert-button.component.html' }) export class AlertButtonComponent { onClick(): void { window.alert('Hello!'); } } |
特徴その４：Angularっぽさ
Angular2とAngular1はかなり違うが、似通っているところもある。例えば、サービス/DI/ディレクティブなど用語や概念を引き継いでいる。例として、loadData()というstring型の配列を返すサービスを作る。
|
1 2 3 4 5 6 7 8 |
import {Injectable} from 'angular2/core'; @Injectable() export class MyService { loadData(): string[] { return ['a', 'b', 'c']; } } |
サービスをDIする場合は、事前準備としてprovidersでサービスを指定する。実際にDIするためには、AppComponentクラスのコンストラクタに指定する必要がある。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import {Component} from 'angular2/core'; import {AlertButtonComponent} from './alert-button.component'; 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(); } } |
特徴その５：やっぱりキモい
テンプレートでは、以下の様な記法を要素内に記述していく。
(),[],[()],#,*
全力を出すとこんな感じだ。だいぶキモい。
<input *ngif="alive" [(ngMode)]="name" #name>
例として、テンプレート内でループ処理を実装してみる。
|
1 2 3 4 5 6 |
<h1>My first Angular2 app!</h1> <my-alert-button></my-alert-button> <ul> <li *ngFor="#item of data">{{item}}</li> </ul> |
テンプレートは外部ファイル指定するのではなく、バッククォートで囲み、Component定義内に直接HTMLやCSSを記載することも可能。また、コンポーネントはCSSをカプセル化（そのコンポーネント内に閉じる）するので、コンポーネントのスタイルは外部に影響を与えない。
Angular2を始めたらあなたが出会うであろう１１のこと
TechFeedのモバイルアプリ版を現在開発していて、その開発でAngular2を使っている。その開発経験を基に感じたことを時系列で取り上げる。
TechFeed -テクノロジー情報に特化した情報キュレーションサービス-
その1:ハードル高くない？
使うにあたっての前提技術が多い（TypeScriptやモジュールバンドラー、RxJS）ので、当初ハードルが高そうだと感じた。前提技術が多すぎるように感じるからだ。
- TypeScript
- モジュールバンドラー
- RxJS
- もちろんAngular2
でも、意外とそうでもなかった。なぜか？
- Angular1の文脈を引き継いでいる（1系やったことがある人は学習コスト低め）
- TypeScriptはJavaっぽい（もともとJava屋の人は親しみやすい）
- RxJSは最初から詳しく知っている必要なし
- Webpackの調整が一番時間がかかった（でも、だれか一人がやればいいのであまり気にしない）
その2:言語はどれを選ぶ？
個人的には、TypeScript一択ではないかと考える。ドキュメントが完備されていて、型があり、デコレーターが使えるのが嬉しい。JavaScriptやBabelも止めはしないが、きっとTypeScriptで書くほうが楽だ。
その3:モジュールバンドラーは何にする？
TypeScriptを選ぶとモジュールバンドラーが必須。TechFeedでは、実績豊富等の理由からWebpackを選択した。Angular2の公式ではSystem.jsというものが使われているが、後発であり情報が少なめだったため、採用しなかった。
その4:エディタは何にする？
TypeScript対応のエディタやIDEは、AtomやSublime、WebStormなどいくつかある。白石は今のところAtomを使っている。
その5:テンプレートをどこに書く？
@Componentに直接埋め込む方法、URLで外部ファイルにする方法のほか、Webpackを使えばrequireでHTMLファイルを埋めこむこともできる。３つの方法を比較するとWebpack利用が一番柔軟性があるが、個人的には、コンポーネントとテンプレートファイルがひとまとまりになるので、埋め込み方式もわかりやすいと思う。
その6:テンプレートがキモい
これは慣れるしかない。ただ、慣れるには順序がある。以下のように、Angular2が指定する新しいメンタルモデルを理解すれば、少しは楽になる。
- こいつはHTMLじゃない。HTML Plusだ
- タグの属性とプロパティはそもそも似て非なるもの
[]は属性ではなくプロパティを指している- 属性ってやつは、プロパティの初期化にすぎない
その7:Sassを使いたい
モジュールバンドラーの機能を駆使すれば、Sass/Less等もコンポーネントで利用することができる。Webpack側でSassのコンパイル設定を行っておけば、scssファイルをコンポーネントでrequireするだけで利用可能。
その8:RxJSとのつきあい方
RxJSはリアクティブプログラミング用ライブラリである。Angular2はHTTPやEventEmitterなどの頻出APIがRxJS前提（Observable利用前提）である。ObservableはES7にも提案されているため、この機会に勉強するのは良いかもしれない。なお、Angular2はRxJS５（beta）を利用している。
その9:ページネーションしたい
よくあるユースケースだが世界中が現在実装方法を模索中。TechFeedでは、Observableの簡単なラッパーを作った。もう少し使い勝手を良くしてOSSで公開したいと考えている。
その10:UIフレームワークを使いたい
TechFeedでは、Ionic2を採用した。Ionic2はAngular2で完全にリライトされているので、Angular2開発の参考にもなる。その他にも、Angular2対応のUIフレームワークとして、Onsen UI2.0や、angular-material2、ng2-bootstrap等がある。
その11:コンポーネント設計
コンポーネントの粒度や振る舞い、状態をどこに配置するかは、現在熱い話題。Presentational and Container Componentという議論の土台があるが、これがあるからといって全て解決するわけではないので、やはり悩ましい。（全て外部に移譲するのか？面倒くさくない？…等） 個人的に唯一の正解は、「必要になるまで分割するな」だと考えている。
セッションをもっと詳しく知りたい方は？
以上で、セッションの書き起こしは終了です。
白石俊平氏のセッション資料はこちらで公開されています。
セッション動画もYoutubeで公開されているので、ぜひご覧ください！
※白石俊平氏の講演開始時間から再生されます
