Angular 2を利用するには？（実装編）：Angular TIPS

連載目次

　別稿「TIPS：Angular 2を利用するには？（準備編）」では、Angular 2とは、に始まり、Angular 2でアプリを開発するための基本的な設定とインストールを済ませました。本稿では、準備編で作成したアプリケーションフォルダーに対して、具体的なコードを追加していきます。作成するのは、初めてのサンプルの定番――「こんにちは、世界！」を表示するだけの、基本的なサンプルです（図1）。誤解のしようもない基本的なサンプルなので、「またか」と思わず、Angular 2アプリの基本的な構造を理解してください。

図1　決められたメッセージを表示するだけのサンプル

【1】モジュールを準備する

　モジュールとは、アプリを構成するオブジェクト（＝コンポーネント）を束ねるための仕組みです。Angular 2それ自体も複数のモジュールから構成されており、アプリの要件に応じて必要なモジュールをインポートして利用することになります。

　もちろん、モジュールはアプリ開発者が自ら定義することもできます。原則として、Angular 2アプリは、1つ以上のモジュールから構成されていなければなりません。アプリを起動する際に呼び出されるモジュールのことを「ルートモジュール」とも呼びます（いわゆる、アプリのエントリーポイントを内包するメインモジュールです）。

　以下に、その具体的なコードを示します。なお、以降のコードは特筆しない限り、アプリケーションルート配下の/appフォルダーに保存するものとします。

　まず、import命令で、Angular 2アプリを動作させるのに必要となるモジュール／コンポーネントをインポートします。

　［1］の@angular/〜はAngular 2が提供する標準モジュールです。最低限、モジュールを定義するためのNgModule、ブラウザー上でアプリを動作させるためのBrowserModuleをインポートしておきましょう*1。

　［2］のAppComponentは、アプリの本体を表すコンポーネントです。後からあらためて定義します。

　そして、［3］でAppModuleという名前のルートモジュール（＝モジュールクラス）を準備しています。他のモジュールから呼び出す際などには、ここで宣言した名前（AppModule）を利用します。

　ただし、これだけではモジュールと見なされません。@NgModuleデコレーターでモジュールとしての情報を宣言しておきましょう（［4］）。デコレーターは、モジュールやクラスなどの要素に対してメタ情報を付与するための仕組みです。Javaでいうところのアノテーションに相当する仕組み、と考えると、分かりやすいかもしれません。デコレーターには「パラメーター名: 値」のハッシュ形式で、あらかじめ決められたパラメーター情報を指定できます。

　@NgModuleデコレーターで利用できるパラメーターには、以下のようなものがあります。

　この例であれば、「BrowserModuleを参照して」「ルートコンポーネントとしてAppComponentを含んだ」AppModuleモジュールを定義する、という意味になります。

【2】コンポーネントを準備する

　手順［1］で保留にしていたルートコンポーネントを作成します。ルートコンポーネント（もしくはメインコンポーネント）とは、アプリで最初に呼び出される、いわゆるエントリーポイントです。

　まず、［1］はコンポーネントを定義するためのAngular 2標準モジュールをインポートしています。

　コンポーネントの本体は［2］です。ここでは、先ほどAppModuleモジュールで指定したAppComponentという名前でコンポーネントクラスを作成しています。モジュールから参照できるよう、exportキーワードで外部に公開していることに注意してください。なお、本来であれば、classブロックの配下にコンポーネント固有のロジックを記述しますが、まずは空のままとしておきます。

　ただし、このままではコンポーネントとして動作することはできません。モジュールのときと同じく、コンポーネントの構成情報を@Componentデコレーターで定義しておきましょう（［3］）。Componentデコレーターでは、さまざまなパラメーターを指定できますが、ここで利用しているのは、以下の2個です*2。

　この例であれば、「<my-app>要素に対して、『<p>こんにちは、Angular 2！</p>』というテンプレートを適用」するためのAppComponentコンポーネントを定義したことになります。

【3】スタートアップコードを準備する

　ルートモジュールとルートコンポーネントを準備できたところで、これらを起動するためのスタートアップコードを準備します。

　まず、アプリ起動のために必要なモジュールをインポートします（［1］）。platformBrowserDynamicはブラウザーでアプリを起動するためのAngular 2標準モジュール、AppModuleは自分で作成したルートモジュールです（ルートコンポーネントはAppModule経由でインポートされますので、ここではインポート不要です）。

　必要なモジュールをインポートできたら、あとは、platformBrowserDynamic#bootstrapModuleメソッドでモジュールを起動します（［2］）。

【4】メインページを準備する

　最後に、アプリを動作するためのメインページを用意します。メインページは、（/appフォルダーではなく）アプリケーションルート直下に配置するものとします。

　まず、Angular 2アプリを動作させるためのライブラリをインポートします（［1］）。core-jsはレガシーなブラウザーのためのポリフィル（＝足りない機能の穴埋め）、zone.js／reflect-metadataはAngular 2の動作に必要となるライブラリです。

　［2］ではSystemJSの設定情報（＝systemjs.config.js、前回の表1と表2を参照）を読み込むと共に、System.importメソッドで/appフォルダー配下のmain.ts（正しくはmain.js）を起動しています。main.jsが無条件に読み込まれるのは、設定ファイルsystemjs.config.jsで、以下のようにappモジュール配下のメインスクリプトとしてmain.jsがひも付けられているためです。

　そして、［3］がルートコンポーネントを表示するための領域です。これによって、先ほど@Componentデコレーターのセレクター指定（selectorパラメーター）に合致した要素（ここでは<my-app>要素）に対して、テンプレート（templateパラメーター）の内容が反映されます。

　<my-app>要素配下には、Angular 2が初期化される前に表示されるよう、一般的にはロード待ちのコンテンツを記載しておきます（コンポーネントが処理された後は、要素配下はテンプレートの内容で置き換えされます）。

【5】アプリを起動する

　以上でアプリを起動するための準備は完了です。コマンドプロンプトから以下のコマンドを実行してください。

　これによって、TypeScriptスクリプト（.tsファイル）がコンパイルされると共に、Angular 2標準の開発用サーバー（lite-server）が起動して、以下のようにアプリが表示されます。この状態で、ソースコード（例えばindex.html）を書き換えると自動的にこれを認識して、ページがリロードされることも確認してみましょう。

図2　Angular 2アプリを実行した結果

　以上、初めてのAngular 2アプリを実行できました。現時点でのアプリの構造を、以下にまとめておきます。

　こうして見てみると、「簡単なアプリを動かすにもAngular 2は難しい！」と思われるかもしれません。しかし、ここまでの内容は、一般的なアプリではほぼ共通です。本稿のコードをスケルトンとして、以降のコードを追加していくようにすると、開発を効率化できるでしょう。

　本連載でも、以降、本稿のコードを前提として、そこからの差分を解説していきます。

「Angular TIPS」