HTML5Experts.jp

Angular2実践入門〜ng-japan 2016 セッションレポート〜

この記事は、「ng-japan 2016」のセッションレポート(速報)です。講演内容を忠実に再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。

Angular2実践入門 / 白石俊平氏

当メディアの編集長であり、TechFeedの開発者でもある白石俊平氏によるセッション。スライド40枚以上の大作でライブコーディングもあります。

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

今日のライブコーディングを追体験できるスターターキットを作った。是非活用してほしい。 https://github.com/shumpei/angular2-webpack-starter-minimum
– Angular2をwebpackを利用してミニマムスタートできるプロジェクト
– 教育用途、もしくは開発環境を自作したい人向け

Angular2の特徴(かなり主観)

特徴その1:TypeScriptを推奨

TypeScriptを一言で言えば、ES.next全部+型である。また、実験的なサポート扱いである「デコレーター」は、Angular2を使う上では必須となる。

特徴その2:コンポーネント指向

実際のコードは以下のとおり。JavaScriptとは大分変わった見た目になるのが第一印象。

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コンポーネントをライブコーディングする。

import {Component} from 'angular2/core';

@Component({ selector: 'my-alert-button', templateUrl: '/src/components/alert-button.component.html', }) export class AlertButtonComponent { }

<button>Click me!</button> 

作成したコンポーネントdirectivesに指定し、実際に利用する。

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 { }

<h1>My first Angular2 app!</h1>
<my-alert-button></my-alert-button>

これは、ボタンを押すとアラートを発生させる処理をコンポーネントとして実装した例である。

特徴その3:ちょっとキモい

テンプレートのシンタックスがキモい。例えば、クリックイベントを補足する処理は、以下のように、(click)="onClick()"と記載し、対応するイベントハンドラはonClick()としてコンポーネント内に記述する。

<button (click)="onClick()">Click me!</button>

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!'); } }

特徴その4:Angularっぽさ

Angular2とAngular1はかなり違うが、似通っているところもある。例えば、サービス/DI/ディレクティブなど用語や概念を引き継いでいる。例として、loadData()というstring型の配列を返すサービスを作る。

import {Injectable} from 'angular2/core';

@Injectable() export class MyService { loadData(): string[] { return ['a', 'b', 'c']; } }

サービスをDIする場合は、事前準備としてprovidersでサービスを指定する。実際にDIするためには、AppComponentクラスのコンストラクタに指定する必要がある。

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(); } }

特徴その5:やっぱりキモい

テンプレートでは、以下の様な記法を要素内に記述していく。

(),[],[()],#,*

全力を出すとこんな感じだ。だいぶキモい。

<input *ngif="alive" [(ngMode)]="name" #name>

例として、テンプレート内でループ処理を実装してみる。

<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を始めたらあなたが出会うであろう11のこと

TechFeedのモバイルアプリ版を現在開発していて、その開発でAngular2を使っている。その開発経験を基に感じたことを時系列で取り上げる。

TechFeed -テクノロジー情報に特化した情報キュレーションサービス-

その1:ハードル高くない?

使うにあたっての前提技術が多い(TypeScriptやモジュールバンドラー、RxJS)ので、当初ハードルが高そうだと感じた。前提技術が多すぎるように感じるからだ。

でも、意外とそうでもなかった。なぜか?

その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ファイルを埋めこむこともできる。3つの方法を比較するとWebpack利用が一番柔軟性があるが、個人的には、コンポーネントとテンプレートファイルがひとまとまりになるので、埋め込み方式もわかりやすいと思う。

その6:テンプレートがキモい

これは慣れるしかない。ただ、慣れるには順序がある。以下のように、Angular2が指定する新しいメンタルモデルを理解すれば、少しは楽になる。

その7:Sassを使いたい

モジュールバンドラーの機能を駆使すれば、Sass/Less等もコンポーネントで利用することができる。Webpack側でSassのコンパイル設定を行っておけば、scssファイルをコンポーネントでrequireするだけで利用可能。

その8:RxJSとのつきあい方

RxJSはリアクティブプログラミング用ライブラリである。Angular2はHTTPやEventEmitterなどの頻出APIがRxJS前提(Observable利用前提)である。ObservableはES7にも提案されているため、この機会に勉強するのは良いかもしれない。なお、Angular2はRxJS5(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で公開されているので、ぜひご覧ください!

※白石俊平氏の講演開始時間から再生されます