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

仲裕介

5年前

この記事は、「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とは大分変わった見た目になるのが第一印象。

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>

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

特徴その３：ちょっとキモい

テンプレートのシンタックスがキモい。例えば、クリックイベントを補足する処理は、以下のように、(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!');
  }
}

特徴その４：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();
  }
}

特徴その５：やっぱりキモい

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

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

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

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

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という議論の土台があるが、これがあるからといって全て解決するわけではないので、やはり悩ましい。（全て外部に移譲するのか？面倒くさくない？…等）個人的に唯一の正解は、「必要になるまで分割するな」だと考えている。

セッションをもっと詳しく知りたい方は？

以上で、セッションの書き起こしは終了です。
白石俊平氏のセッション資料はこちらで公開されています。

Angular2実践入門 from Shumpei Shiraishi

セッション動画もYoutubeで公開されているので、ぜひご覧ください！

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