.NET開発者のためのJavaScriptライブラリカタログ（MVCフレームワーク編）：特集：今から始めるJavaScriptアプリ開発（2/3 ページ）

» 2015年11月13日 05時00分公開

Angular 2

　Angular 2は上で見たAngularJSの次バージョンだ。2015年11月現在は「開発者プレビュー」の段階となっており、プロダクトで利用するのであれば、AngularJSを使うことが推奨されている。

　Angular 2は当初、グーグルが開発していた「AtScript」というJavaScriptベースのプログラミング言語で開発が行われていたが、後にマイクロソフトのTypeScriptで開発が進められることが発表された（AtScriptとTypeScriptは一本化される）。MVCフレームワークの開発で天敵同士が協力するということで大きく報道されたことを覚えている方もいらっしゃるだろう。

　Angular 2ではTypeScriptが持つさまざまな機能が活用されている。例えば、クラスにメタデータを付加するためのデコレーターや、あるモジュールから特定のシンボルを導入するimport文などがそうだ。以下に例を示す。

import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';
@Component({
selector: 'my-app',
template:`
<div>
    <div><input [(ng-model)]="test"></div>
    {{test}}
</div>
`,
// 「templateUrl: './doublebind.html',」としてHTMLテンプレートを外出しもできる
directives: [FORM_DIRECTIVES]
})
class AppComponent {
public test = "foobar";
}

bootstrap(AppComponent);

Angular 2で書いたアプリのコード（TypeScript）

　ここでは「@Component」デコレーターにより、AppComponentクラスが「コンポーネント」であるというメタデータを付加している。コンポーネントはAngular 2で導入されたもので、アプリのビューを構築したり、関連するビジネスロジックを記述したりするために使われる。AngularJSでは、（AngularJSのディレクティブを含んだ）テンプレート／コントローラー／コントローラーのスコープにより、Webアプリを構成する特定の要素が実現されていたが、Angular 2では「コンポーネント」を使用して、これらを実現する。

　なお、上記のようにテンプレートが長くなるとコードが見づらくなるので、直書きをするのではなく、別ファイルにHTMLコードを記述して、これを「templateUrl」フィールドで参照することも可能だ（コメント参照）。また、コンポーネントの定義自体を別ファイルとしてimport文でこれを取り込むようにするのも、コンポーネント化によるコードの可読性と再利用性を高める上では重要になるだろう。TypeScriptやECMAScript 2015ではJavaScriptにモジュールの概念が取り入れられているのも、Angular 2でこうした構造化が可能になった理由の一つだと思われる。

　そのため、コンポーネントには「selector」フィールドや「template」フィールドがある。前者はCSSセレクターを指定するもので、この場合は対応するHTMLファイルに<my-app>タグがあれば、そこにこのコンポーネント（AppComponentクラス）のインスタンスを表示する。

　「template」フィールドは、その表示に使用されるテンプレートである（ここではバッククオートを使って複数行の文字列をテンプレートとしている）。「[(ng-model)]」はそのつづりからも分かるように、これが双方向データバインディングを行うためのものでAngular 2ディレクティブであり、「{{test}}」は単方向データバインディングを行う。

　というわけで、上記のAngular 2コードは先ほど見たAngularJSコードとほぼ同様なことを行うものだ。これをホストするHTMLファイルは次のようになる（抜粋）。

<!DOCTYPE html>
<html>
<head>
…… Angular 2に必要なJavaScriptファイルの読み込み ……
<script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: { emitDecoratorMetadata: true }
    });
    System.import('./app.ts');
</script>
</head>
<body>
<h1>Angular 2 Sample</h1>
<my-app />
</body>
</html>