ng-japan – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Angular2を書くためのAngularJSの書き方 /teyosh/18806/ Fri, 27 May 2016 06:00:05 +0000 /?p=18806 Angular2のリリースが刻一刻と近づいてきました。しかし世の中のプロダクトは、まだまだ大半がAngular1.xで開発されています。Angular2はコンポーネント指向が徹底されていたり、TypeScriptが推奨の開発言語であるなど、Angular1から大きく変わっており、一見すると移行は容易ではありません。

しかしAngular1.xの最新バージョンである1.5では、Angular1から2への移行をスムーズに行うために、Angular2を見据えたコーディングが行えるようになっています。この記事ではAngular2への移行をスムーズにするための、Angular1の書き方を紹介していきます。

【編集部注】
※この記事は、2016年3月21日に開催された「ng-japan 2016」のセッション「Angular2を書くためのAngularJSの書き方」についての、講演者自身によるレポートです。講演内容に加えて、講演者自身による解説や追記によって、よりわかりやすく詳細な記事に仕上げていただきました。
※本記事では、AngularJSをAngular1、 AngularJSの2系をAngularと表記しています。

セッションの講演資料と動画はこちらになります。

講演資料

講演動画（2:03:46付近から始まります）

Angular1の歴史と背景

Angular1は、今から4年前の2012年6月に、バージョン1.0.0がリリースされました。この4年間に、Windowsなら8->10、Macで10.8->10.11、Androidで4->6、iOSで6->9という変化がありました。バージョンアップが比較的遅いとされるOSでも、4年の間にこれほど大きなバージョンアップが行われているのです。

現在のIT業界では、4年とはこれほど長い期間です。また4年前のWebを振り返ってみますと、当時はBackbone.jsなどのMVCフレームワークが全盛期でした。Angularはリリースされてから大きな人気を博し、世界中の数多くのプロジェクトで採用されました。

しかし月日は流れ、2014年にReactが発表されてからは、Angular1の人気にも陰りが訪れます。コンポーネント指向を採用したReactの優れた設計が広く支持されたこと、Angular1はパフォーマンスがあまりよくないということもあり、Reactを採用するプロジェクトも増えてきました。

そこでパフォーマンスを大きく改善し、アーキテクチャが刷新されたAngular2が今年中にリリースが予定されています。しかしAngular2は変更点が多く、普及には時間がかかることが予想されます。そのため、Angular1.xは当分サポートされることが決定しています。

Angular1とAngular2の違い

Angular1とAngular2の違いは多岐にわたります。その中でも代表的な違いを以下に挙げます。

  • 主な開発言語がJavaScriptからTypeScriptへ
  • Two-wayデータバインディングを廃し、One-wayデータバインディングへ
  • 従来のスコープに代わり、コンポーネントがUIの状態を保持する（コンポーネント指向）
  • テンプレートの文法が変更
  • 従来のng-routerからコンポーネントルーターに
  • 従来の文字列ベースのDI (Dependency Injection)から、型によるDIに

対象ブラウザに関して

Angular1.5は、残念ながらIE8以前では動作しません。IE8以前を対象とする場合は、Angular1.2を利用する必要があります。もしIE8を対象にしなくてよいのであれば、Angular1.5へのアップデートが強く推奨されます。

JavaScriptからTypeScriptへ

Angular2では、メインの開発言語がTypeScriptに変更されました。

簡単に経緯を説明しますと、もともとAngular2を開発する際、JavaScriptのスーパーセットであるAtScriptという言語を同時に開発していました。

AtScriptの実体は、アノテーション付きのTypeScriptと言ってよいものでしたが、開発は難航。2015年3月にTypeScriptが（アノテーションに近い機能である）デコレーターの実装を表明すると、Angular2はTypeScriptへと移行したという流れがあります。

実際には、Angular2にとってTypeScriptは必須ではなく、JavaScriptやDartでも開発は可能です。しかしTypeScriptを利用すると多くのメリットがあるので、TypeScriptの使用が推奨されています。

ちなみに、TypeScriptというのは以下のような特徴を持った言語です。

TypeScriptの特徴

  • 型がある
  • インターフェースがある
  • モジュールインポートがある
  • 仕様がしっかりしている
  • JavaScriptのスーパーセットである
  • TypeScriptはそのままではブラウザでは利用できないのでコンパイル（JavaScriptへの変換）が必要

BrowserifyやWebpackを使おう

皆さん、GruntやGulpと言ったタスクランナーを既に使われている方は多いと思います。Angular1.5 / 2の開発では、TypeScriptのimport文を使用してモジュール間の依存性を記述していくため、こうした依存関係を解決して実行可能なプログラムを生成できるツールが必要です。

そうしたツールにはBrowserifyやWebpack、System.jsなどがあり、import文やCommonJSのrequire()関数などを解釈し、依存関係を解決した上で、ファイルを一つにまとめる機能を持ちます。

TypeScriptからのコンパイルなどもプラグインとして提供されており、今後のAngular開発には必須のツールとなっています。

Angular1.5のコードを眺める

Angular2とAngular1の違いや開発に必要な情報が一通り揃ったところで、実際にAngular1.5のコードを眺めてみましょう。 以下は、画面に「Hello」と表示するだけのプログラムです。

import * as angular from 'angular';

angular.module('app')
.component('app', {
  template: `<div>Hello {{ $ctrl.text }}</div>`,
  controller: class App {
    public text: string;
    constructor() {}
  },
  bindings: {
    text: '@'
  }
});

<!doctype html>
<html>
<body>
  <app text="ng-japan">
    Loading...
  </app>
  <script src="./bundle.js"></script>
  <script>
    angular.bootstrap(document, ['app']);
  </script>
<body>
</html>

Angular1のコードには違いないように見えますが、これまでとは何かが違いますね。

実際上のコードはTypeScriptで書かれており、importやclass、publicなどのアクセス指定子など、素のJavaScriptでは使えない文法が多く使われています。

DirectiveからComponentへ

Angular2から、コンポーネントという概念が登場します。それに合わせて、Angular1.5でもコンポーネントが利用できるようになりました。Angular1のディレクティブに比べて、簡単に作ることができます。

DirectiveとComponentでの設定値の違い

Directiveには先述したComponentと呼ばれるDOMの生成と他にAttributeに設定する処理ng-repeatやng-showなども同じ方法で作成しています。

そのため、Componentを作るには設定が過多気味であり、Angular2へ移行する場合に必要なものと不必要なものをより分けた作成メソッドを新たに追加されました。

以下の表が元々のDirectiveメソッドと追加されたComponentメソッドとの設定の違いとなります。

Directive Component
bindings No Yes (binds to controller)
bindToController Yes (default: false) No (use bindings instead)
compile function Yes No
controller Yes Yes (default function() {})
controllerAs Yes (default: false) Yes (default: $ctrl)
link functions Yes No
multiElement Yes No
priority Yes No
require Yes Yes
restrict Yes No (restricted to elements only)
scope Yes (default: false) No (scope is always isolate)
template Yes Yes, injectable
templateNamespace Yes No
templateUrl Yes Yes, injectable
terminal Yes No
transclude Yes (default: false) Yes (default: false)

引用：https://docs.angularjs.org/guide/component

Angular1のパフォーマンス問題

Angular1のパフォーマンスが良くない理由ですが、その原因を挙げてみましょう。

  • Two-wayデータバインディングが重い
  • 状態の監視に伴うオーバーヘッド
  • dirty check
  • $digest loop

では、どうしたらよいのでしょうか？以下の様なアーキテクチャが推奨されていますが、Fluxアーキテクチャによく似ています。

one-way

では、このアーキテクチャに従ったコードのサンプルを紹介します。

まずはアプリケーションのエントリーポイントとなるHTML（index.html）です。これは、angular.bootstrap()を呼び出しているだけで、特に変わったことはしていません。ただし、list-cmpというタグを使用していることは覚えておいてください。

<!doctype html>
<html>
<body>
  <list-cmp>
    Loading...
  </list-cmp>
  <script src="./bundle.js"></script>
  <script>
    angular.bootstrap(document, ['app']);
  </script>
</body>

以下がサービスのコードです。このサービスは、アプリケーションのデータを保持しており、データの操作を行うことが可能です。

import * as angular from 'angular';

angular.module('app')
.service('StoreService', class Store{
  private datas: Array<string> = [];
  constructor(){
    this.datas = ['angular', 'javascript', 'typescript', 'angular2'];
  }
  getList() {
    return this.datas;
  }
  addData(data:string) {
    this.datas.push(data);
  }
  changeData(index:number, data:string){
    this.datas[index] = data;
  }
  deleteData(index:number){
    this.datas.splice(index, 1);
  }
})

以下は、index.htmlで使用されていたlist-cmpタグ（コンポーネント）の実装です。内部で、さらにlang-cmpというタグ（コンポーネント）を使用しています。

また、Angular1で多用されていた$scopeはもう使われておらず、代わりにコンポーネントのコントローラーの参照である$ctrlが使用されています。基本的には、$scopeはもう使用してはならないものとして考えましょう。

import * as angular from 'angular';

angular.module('app')
.component('listCmp', {
  template: `<ul><li ng-repeat="data in $ctrl.datas">
    <lang-cmp index="$index" lang-data="data"
     lang-change="$ctrl.change(index, data)"
     lang-delete="$ctrl.delete($index)"></lang-cmp>
  </li></ul>`,
  controller: class List {
    private store;
    private datas: Array<string> = [];
    constructor(StoreService) {
      this.store = StoreService;
      this.datas = StoreService.getList();
    }
    change(index: number, data: string) {
      this.store.changeData(index, data);
    }
    delete(index: number){
      this.store.deleteData(index);
    }
  }
});

最後に、lang-cmpタグの実装です。上のコードで指定されていたlang-changeやlang-deleteと言った属性が、langChangeやlangDeleteといったプロパティに対応しています。

import * as angular from 'angular';

angular.module('app')
.component('langCmp', {
  template: `<input ng-model='$ctrl.langData'>
  <button ng-click="$ctrl.change()">変更</button>
  <button ng-click="$ctrl.delete()">削除</button>`,
  controller: class Data {
    private langData:string;
    private index:number;
    private langChange;
    private langDelete;
    constructor() {}
    change() {
      console.log(this.index, this.langData);
      console.log(this.langChange);
      this.langChange({index: this.index, data: this.langData});
    }
    delete() {
      this.langDelete({index: this.index});
    }
  },
  bindings: {
    'langData': '<',
    'index': '<',
    'langChange': '&',
    'langDelete': '&'
  }
})

コンポーネント指向のディレクトリ構造

コンポーネント指向になったことから、コンポーネント単位にまとめると見通しがよくなります。

├─about
│  └─components
│          about.component.e2e.ts
│          about.component.html
│          about.component.scss
│          about.component.spec.ts
│          about.component.ts
│
├─app
│  └─components
│          app.component.e2e.ts
│          app.component.html
│          app.component.spec.ts
│          app.component.ts
│          navbar.component.html
│          navbar.component.scss
│          navbar.component.ts
│          toolbar.component.html
│          toolbar.component.scss
│          toolbar.component.ts
│
├─assets
│  │  main.scss
│  │  _colors.scss
│  │  _variables.scss
│  │
│  └─svg
│          more.svg
│
├─home
│  └─components
│          home.component.e2e.ts
│          home.component.html
│          home.component.scss
│          home.component.spec.ts
│          home.component.ts
│
└─shared
    └─services
            name-list.service.spec.ts
            name-list.service.ts

テストについて

Angular2ではテストの基本セットがJasmineとなっていますので、Jasmineだと学習コストは少なくなります。

ルーティング

Angular1ではngRouteよりもui-routerがよく使われていると思いますが、Angular2では性能と管理が簡単なComponentRouterが登場します。 Angular1.5用のComponent Routerが用意されています。

まとめ

このセッションで学んだことを最後にまとめます。

  • Angular1のプロジェクトでもTypeScriptを使おう
  • タスクランナーを利用しましょう
  • Webpackやbrowserifyを利用しましょう
  • DirectiveからComponentに変更しよう
  • controllerの廃止
  • Scopeは原則利用しないように
  • Two-way data-bindingよりOne-way data-binding
  • コンポーネント単位でファイルを整理しよう
]]> Angular2の失敗しない始め方〜「ng-japan 2016」セッションレポート〜 /yusuke-naka/18590/ Fri, 01 Apr 2016 00:52:57 +0000 /?p=18590 この記事は、「ng-japan 2016」のセッションレポートです。講演内容を再現していますが、ニュアンス等伝えきれない場合があるので、気になるところは、記事末尾に掲載の講演資料やYoutube動画でご確認ください。

Angular2の失敗しない始め方 / 稲富駿氏

株式会社トップゲートの稲富 駿氏によるセッションです。セッション資料や配信動画は記事末尾でご確認ください。このセッションでは、大きく3つの点について触れられました。それぞれのポイントを書き起こします。

  1. Angular2に関するよくある質問や誤解について
  2. Angular2を構成する基礎技術について
  3. Angular2を学ぶために必要なこと

1. Angular2に関するよくある質問や誤解について

Angular2について正しい知識を知ってもらうために、よくある質問とその回答について幾つか取り上げる。

Q1. AngularJS2なのか？Angular2なのか？

Angular2が正しい名称。ここが大事。Angularはただ単にJSフレームワークライブラリではない。JSフレームワークであると同時に、 ElectronやNativeアプリで動くライブラリでもあり、Serverサイドで動くためのライブラリでもある。つまり、Angularはアプリケーション開発のためのプラットフォームと認識するのが正しい。

Q2. Angular2を学ぶためにTypeScriptを勉強する必要があるのか？

必ず必要というわけではないが、勉強すべきである。Angular2はコードベースがTypeScriptベースになっている。勉強すべき理由はそれだけではなく、TypeScriptを利用することで、次の大きく3つのメリットを享受でき、安全で開発自体の生産性向上を図ることが可能になる。特にTypeScriptを採用できない理由がない場合は、TypeScriptで書くべきである。

メリット１：静的型チェックが利用可能

TSの一番大きな特徴である静的型チェック。静的型付けされたコードは常に正しいAPIドキュメントだと言える。型が付いている限り、常に正しいコードが書けるし、コンパイラでエラーを事前にチェックできる等のメリットがある。また、型があることで、エディタやIDEで入力補完の恩恵をうけることができる。

メリット２：Decoratorsが利用可能

デコレーター（＠Decorators）は次世代のWeb標準（ESnext）として提案されている機能。TypeScriptでもオプションを付けることで利用可能。Angular2ではこれを推奨している。デコレーターを利用することで、コンポーネント作成にあたっての属性設定はデコレーターで、コンポーネントの実装はclassでというふうに分けて書くことができる。それによってコードの視認性も向上する。

@Component({
    selector: "app-profile",
    template: "<p>Name: {{ name }}</p>"
})
class ProfileComponent {
    name: string;
    constructor() {
        this.name = "laco";
    }
}

メリット３：Type-Base DIが利用可能

Type-Base DI（Type-Safe DI）を利用すると、DIを型ベースで行うことが可能。例えば、コンストラクタに渡す変数名が間違っていたとしても、型を指定するため、エラーを未然に防ぐことが可能。誤字（typo）に強いDIができる。DIについての詳しい説明は省略する。

import {Http} from "angular2/http";

@Injectable()
class MyService {
    constructor(private anyNameForHttp: Http) {
    }
}

Q3. Angular１系はサポート終了になるのか？

Angular1系は、1.4系と1.5系が今後もサポートされ続ける。これがステーブルとなり、基本的には破壊的変更は入らない。もし、破壊的変更が入る場合は、1.6、1.7とバージョンが上がっていく予定で、遅れてバックポートしたものが1.5にもマージされることになる。

Angular1.5ではComponent Helperが追加された。これは、Angular2への移行をサポートするためのもので、将来的に移行を検討している場合は、使っておくと良い。また、Angular2のRouterについては、Angular1用のライブラリが出ており、利用することでAngular2とほぼ同じAPI、書き方で実装することができる。

Q4. 双方向バインディングはなくなったのか？

存在する。しかし、Angular2は原則単方向バインディングを利用することになっている。双方向バインディングを実装したい場合は、二重カッコ[()]で記載する必要が出てくる。

<input [(ngModel)]="myName">

このように記載すると実行時に、以下のように単方向バインディング＋イベントハンドラが自動生成される。

<input [ngModel]="myName" (ngModelChange)="myNameChanged($event)">

Q5. Dirty checkはなくなったのか？

存在する。しかし、Angular1に比べて爆速で動作するようになった。理由は、Angular２は実行時に変更検知を行うためのコード生成を行う。具体的には、Angular2の各コンポーネントは、自分自身の変更検知のために、専用のChange Detectorという変更検知器を生成する。それぞれのコンポーネントに最適化された変更検知器のおかげで、Dirty checkのパフォーマンスが改善（10msで100000チェックが可能）された。watchの個数は基本的に気にしなくて良くなる。

Q6. サーバサイドレンダリングはできるようになるのか？

Angular Universalというnodejs上で実行されるAngular2が存在する。コアのコードはAngular2とまったく同じ。また、nodejsにかぎらず、今後は、Java/php/.net/python等の環境でも利用できるようになる予定。

Q7. WebComponentを利用しているのか？

利用していない。しかし、Angular2はWebComponentと併用可能である。例えば、ShadowDom。Angular２は独自の機能でShadowDomをエミュレート（CSSのスコーピング）を行うことが出来る。

@Component({
    selector: "my-component",
    encapsulation: ViewEncapsulation.Native
})
class MyComponent{}

ディフォルトはViewEncapsulation.Emulatedである。もしブラウザにShadowDomの機能がついていれば、 ViewEncapsulation.Nativeを指定することで利用可能。パフォーマンス面では、ブラウザのShardDomを使うほうが早い。現時点ではChromeでしか動作しないが、対応ブラウザがChromeの場合や、Electron上で動作させる場合は、こちらを活用してパフォーマンス向上を狙ってほしい。

2. Angular2を構成する基礎技術について

次に、Angular２を構成する基礎技術について解説する。Angular２は様々な技術を利用して作られているので、個別の技術について理解すると、より効果的にAngular2を習得することが出来る。

SystemJS

SystemJSは動的なモジュールローダー（NodeJSのrequireと同じような役割をもつ）である。SystemJSはES.nextのimport、exportに対応するのが特徴で、将来ブラウザに実装されるモジュールローダーのポリフィル的存在。これを活用すると、遅延ローディングが可能になる。必要なコンポーネントのみを都度読み込む事が可能になり、よりパフォーマンスが向上する。

しかし、利用は必須ではない。JavaScriptのライブラリを静的に読み込みたい場合（npmなどでダウンロードしてくる場合）は、今までどおりBrowserifyやWebpackなどが利用可能。動的ロードしたい場合のみ、SystemJSを使えば良い。

RxJS

Angular2を利用するにあたって必須の機能。Observableのポリフィルとして利用されている。Observableはリアクティブプログラミングに基づいた考え方であり、Promise同様に非同期処理を実現する。Angular1はPromiseで、Angular2はObservableで非同期処理がそれぞれ実装されている。両者には様々な違いがあるが、Webの非同期処理についてObservableの利点を幾つか挙げる。

onkeyup等のDOM Eventに関しては、連続して発生した場合に、Promiseではその発生順序を知るすべはないが、Observableではイベントの順序どおりに処理が可能になる。DOMのAnimationについては、Promiseでは一度始まるとそれが完了するまで値は取れないが、Observableでは途中で処理をキャンセルすることが可能。WebSocketの通信についても、ストリームとして順序どおりに扱うことが可能になり、Ajaxに関しては処理途中でキャンセルが可能になる。

このように、Webにおける非同期ではObservableの方が適しているシーンが多々ある。そのため、Angular2では非同期処理の根幹はObservableで実装されている。そのため、RxJSとObservableの修得は、Angular2を学ぶためには必須とい言える。

Zone.js

ZonesというES.nextに提案されている機能のポリフィル。これを利用すると、非同期処理のコンテキストを開発者が自由に設定可能になる。具体的には、setTimeout等あらゆる非同期処理の前後にフック可能なポイントを挟むことができる。

Webにおける非同期処理の後にはかなりの確率で何らかの変更が行われる可能性がある。例えば、Ajaxでレスポンスを受け取った後はそれを受けてModelが変更されるなど。そのため、Angular２では、Zone.jsを利用し、全ての非同期処理の後に変更検知処理を行っている。処理速度も早い。

reflect-metadata

リフレクションのためのAPIを追加するためのポリフィル。reflect-metadataの機能もES.nextに提案されている。Angular2は内部的にTypeScriptのコンパイルに利用している。インストールは必要だが、開発者は覚えなくても問題はない。

3. Angular2を学ぶうえで必要なもの

次に、Angular2を学ぶ上で理解しておくことを幾つか取り上げる。

Angular2はAngular１よりシンプルになった

Angular1はAPIが多すぎたため、Angular２ではかなりシンプルになった。データバインディングと双方向バインディングの設定方法、イベントハンドラの設定方法はかなりシンプルになった。また、APIについても基本的には’@Component’を覚えれば良い。

Angular2はパフォーマンスが改善されている

Angular1はdirty-checking、two-way bindings、$digest loopが遅いと言われてきたが、Angular2でChange Detection（変更検知）が革命的に変わり、パフォーマンスが改善された。

Change Detection

Change Detectionは、例えば、Modelのここが変更になったらViewに描画するなどの処理を行う際に必要になる。重要なのは、どこでどんな変更が起きたかを素早く検知して、それを反映すること。Angular2の変更検知メカニズムはよく考えられている。全てのコンポーネントには個別のChange Detecter（変更検知メカニズム）が存在する。そして、Angular2の全てのコンポーネントはツリー構造になっており、変更検知が必ず一方向（親から子へ）に行われるようになっている。そして、各コンポーネントでは変更検知を行うかどうかを個別に設定可能になっており、親のレベルで変更検知を停止したり、子のレベルで変更検知を停止したり、非常に柔軟で戦略的な変更検知の設定が可能になっている。

Angular2では静的解析ツールが利用可能

Angular1では静的解析ツールが利用できなかった。例えば、バインディングの記述に[]を利用するようになったため、機械的にバインディングかどうかのチェックが可能になっている。

まとめ

Angular2を学ぶためには、ES.next、Decorators、Observables、Zones等、最新のWeb標準技術について学ぶことが大前提である。Angular1の登場（2009年）から、Angular2の登場までの間に、Web標準の世界は大きく変わった。最新のAngular2がAngular1とまったく異なっているのは必然であり、この世界で生きていくには、勉強し続ける必要がある。枯れた技術にしがみついてはダメ。何もかも最新のものを使う必要はないが、最新の技術に常に目を向けて置く必要はある。

最後に、Angular2を使うのは素晴らしいことだが、まだベータ版であることを忘れてはならない。今後BREAKING CHANGES（破壊的変更）が発生する可能性が十分にある。そのために、チェンジログは必ず読むようにする。どうにもならなければコミットログも読む。そして、それ以上深く関わりたければ、issueを出したりPullRequestを送りましょう。それがハードルが高いと考える方は、カンファレンスに参加したり記事を書いたりしよう。開発者にTwitterで質問するのも効果的。

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

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

Angular2の失敗しない始め方

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

]]> Angular2実践入門〜ng-japan 2016 セッションレポート〜 /yusuke-naka/18596/ Tue, 22 Mar 2016 02:00:01 +0000 /?p=18596 この記事は、「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という議論の土台があるが、これがあるからといって全て解決するわけではないので、やはり悩ましい。（全て外部に移譲するのか？面倒くさくない？…等） 個人的に唯一の正解は、「必要になるまで分割するな」だと考えている。

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

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


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

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

]]>