「Angular 2」の構成単位「コンポーネント」「モジュール」を使いこなそう

次世代Webアプリケーションフレームワーク「Angular」の活用 第3回

「コンポーネント」と「モジュール」とは（2）

実装をグループ化する「モジュール」

　モジュールは、機能単位やコードの関連性など任意のルールで、コンポーネントなどの実装をグループ化したものです。Angular 2自身も分割された多数のモジュールで構成されており、プログラマーは必要なモジュールをインポートして使います。また、プログラマーが自分でモジュールを定義することもできます。

　Angular 2で作成するWebページは、自身のモジュールを少なくとも1個含む必要があり、これをルートモジュールと呼びます（ソースコード上ではAppModuleという名前が慣用的に使われます）。クイックスタートではapp/app.module.tsにルートモジュールが定義されています。

リスト2　ルートモジュールの定義（angular2-quickstart/app/app.module.ts）

// Angular 2のモジュール参照 ...（1）
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// AppComponentの参照 ...（2）
import { AppComponent }  from './app.component';

// モジュールのメタデータ ...（3）
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

// モジュールクラス ...（4）
export class AppModule { }

　（1）、（2）のimportは、他のコンポーネントやモジュールを参照して取り込む記述です。「import {A} from X」と記述すると、XというコンポーネントやモジュールからAという機能を参照します。（1）の「@angular/xxx」はAngular 2が提供するモジュールで、必要とする機能に応じてxxxの部分を指定します。また（2）の「./app.component」のように自作のTypeScriptファイルも指定できます（拡張子は除く）。

　（1）で参照しているNgModuleはルートモジュールを定義する処理を含むモジュール、BrowserModuleはWebページをWebブラウザーで実行するための処理を含むモジュールです。（2）では、app.component.tsからルートモジュールに含めるAppComponentコンポーネントを参照しています。これらを用いて、（3）の@NgModuleデコレーターでモジュールのメタデータを指定しています。（4）はモジュールの実体クラスで、他のモジュールから参照するときにこのクラス名（AppModule）を指定します。

　@NgModuleデコレーターの主なパラメーターとその意味を表1に示します。bootstrapに指定する「ルートコンポーネント」は、Webページの最上位に表示され、他のすべてのコンポーネントを含むコンポーネントで、ルートモジュールに対して必ず指定します。

表1　Angular 2のモジュールメタデータに指定できる主なパラメーター

パラメーター	意味
imports	モジュールが内部で利用する他のモジュールなど
exports	モジュールが外部に公開する他のコンポーネントなど
declarations	モジュールに含まれるコンポーネントクラス
bootstrap	ルートコンポーネント

　つまり、リスト2（3）は「BrowserModuleを利用して」、「AppComponentを含み」、「AppComponentを最上位に指定する」ことを表します。クイックスタートプロジェクトにはルートモジュールしかモジュールが存在しないため、exports属性は利用しません。exports属性の利用法は、次回記事で説明します。

ルートモジュールの起動

　ルートモジュールを起動する処理はapp/main.tsに記述されます。ブラウザーで起動する機能を持つplatformBrowserDynamicのbootstrapModuleメソッドに、リスト2で定義したルートモジュールAppModuleを指定して起動させます。

リスト3　ルートモジュールの起動処理（angular2-quickstart/app/main.ts）

// ブラウザーで起動する機能
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// Webページのルートモジュール
import { AppModule } from './app.module';
// ルートモジュールを起動
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

　Angular 2のページは少なくとも1つのルートモジュールを持ち、ルートモジュールは1個以上のコンポーネントを含み、そのうち1個はルートコンポーネントである必要があります。この関係を整理すると図2のようになります。

図2　Angular 2のコンポーネントとモジュールの関係（赤い部分が必須）