サンプルコードでAngular 2を初体験
それでは以下で実際にAngular 2のサンプルコードを動かしてみます。最初に環境構築を行ってサンプルコードをそのまま動作させます。次にサンプルコードを修正して動作の変化を確認していきます。
環境構築はクイックスタートから
Angular 2を利用するためには、依存するライブラリやTypeScriptコンパイラなどのセットアップが必要となります。Angular 2の公式Webサイトにはシンプルな動作環境を作る手順が「5 MIN QUICKSTART」として公開されています。この手順に従ってAngular 2開発のベースとなるファイル一式を作成できます。
Angular 2はまだ開発途中なので、その時の状況により公式Webサイトの記述内容が変更される場合があることに注意が必要です。記事執筆（2016年6月）時点の手順を以下で説明します。
まずangular2-quickstartフォルダを作成し、クイックスタートのWebページに記載されている内容で表1のファイルを作成します（配布サンプルに格納されているものをコピーしても構いません）。今回はそのまま利用しますが、今後ライブラリや型定義ファイルなどが追加で必要になる場合は、設定ファイルを調整することになります。
| ファイル名 | 役割 |
|---|---|
| package.json | プロジェクト情報やAngular 2／依存ライブラリの記述 |
| tsconfig.json | TypeScriptコンパイラの設定 |
| typings.json | このプロジェクトで利用するTypeScriptの型定義設定 |
| systemjs.config.js | モジュールをロードするライブラリSystemJSの設定 |
表1のpackage.jsonにはクイックスタートを動作させるために必要なライブラリが定義済みです。「npm install」コマンドを実行して、ライブラリ一式をダウンロードしておきます。
次にangular2-quickstartフォルダにappサブフォルダを作成して、クイックスタートのWebページに記載されている内容で表2のファイルを作成します。これらがAngular 2で作成するWebサイトのファイルになります。
| ファイル名 | 役割 |
|---|---|
| index.html | Webページファイル |
| style.css | Webページに適用するスタイルシート |
| app/app.component.ts | Angular 2のコンポーネント |
| app/main.ts | コンポーネントを参照して起動する処理 |
クイックスタートではlite-serverと呼ばれる動作確認用のWebサーバーが利用できるよう、package.jsonに設定されています。「npm start」コマンドを実行すると、TypeScriptがコンパイルされた後にlite-serverが起動して、図6のようにWebページが表示されます。この状態でソースコードを書き換えると、自動的にページがリロードされて変更が反映されます。
なお、start以外に表3のコマンドがpackage.jsonに定義されています。postinstallはnpm installの終了後、自動的に実行されるコマンドです。
| コマンド | 機能 |
|---|---|
| lite | lite-serverを起動 |
| tsc | TypeScriptコンパイラを実行 |
| tsc:w | -wオプション（変更監視機能）つきでTypeScriptコンパイラを実行 |
| typings | typings（TypeScriptの型定義ファイルを処理するツール）を実行 |
| postinstall | typingsコマンドでtypings.jsonに定義した型定義ファイルをインストール |
表3のコマンドを組み合わせて、startコマンドはリスト1のように定義されています。tscコマンドでTypeScriptコンパイラを実行後、処理の並列処理を行うconcurrentlyコマンドで、「npm run tsc:w」（＝ファイルの変更監視）と、「npm run lite」（＝Webサーバーの起動）を並列して行います。
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
クイックスタートを構成するファイル群
Angular 2のWebサイトを構成するファイル内容を説明します。まずapp.component.tsがAngular 2のコンポーネント定義で、リスト2のようになっています。
// Angular 2のコンポーネントを参照 ...（1）
import { Component } from '@angular/core';
// AppComponentコンポーネントのパラメータ指定 ...（2）
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
// AppComponentコンポーネントの実装 ...（3）
export class AppComponent { }
（1）のimport記述でAngular 2が提供するComponentメソッドを参照しています。（2）の「@Component」はDecoratorと呼ばれる記法で、参照したComponentクラスにメタデータとしてパラメータを指定します。ここではtemplateパラメータで指定したHTMLを、selectorパラメータで指定したWebページの
なおimport、exportの記述はES2015 modulesで定義され、TypeScriptで先取り実装された記述方法です。現状のブラウザではまだサポートされていませんが、TypeScriptコンパイラが現状のブラウザで実行できるよう変換してくれます。
app/main.tsはリスト3のようになっており、app.component.tsからAppComponentコンポーネントを参照して起動する処理が実装されます。
// 起動のためのbootstrapメソッドを参照 ...（1）
import { bootstrap } from '@angular/platform-browser-dynamic';
// AppComponentを参照 ...（2）
import { AppComponent } from './app.component';
// 起動処理 ...（3）
bootstrap(AppComponent);
（1）で起動処理を行うbootstrapメソッドを参照しています。platform-browser-dynamicはWebブラウザ用の起動処理を表します。（2）でAppComponentコンポーネントを参照し、（3）でbootstrapメソッドの引数に与えて起動します。
一方、Webページのindex.htmlには、コンポーネントが挿入される<my-app>タグが存在します。
<body> <!-- ここにコンポーネントが挿入される --> <my-app>Loading...</my-app> </body>
またheadタグ内には、モジュールをロードするライブラリSystemJSで起動処理が記述されています。
<script src="systemjs.config.js"></script> <!-- SystemJSの設定 ...（1）-->
<script>
// System.importでappフォルダをインポート ...（2）
System.import('app').catch(function(err){ console.error(err); });
</script>
（1）でsystemjs.config.jsを参照してSystemJSの設定を行った後、（2）のSystem.importメソッドで、appフォルダをインポートしています。このとき（1）のsystemjs.config.js内で、appフォルダに「main: main.js」とメインファイルが定義されている（リスト6参照）ため、結果としてリスト3のapp/main.tsがJavaScriptに変換されたファイルapp/main.jsが実行されます。
'app': { main: 'main.js', defaultExtension: 'js' },
Webページが表示されてapp/main.jsが実行されると、index.htmlの<my-app>タグ部分にリスト2のtemplateで指定したHTMLが挿入され、図6のように表示されます。
