CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

「コンポーネント」と「モジュール」とは(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のコンポーネントとモジュールの関係(赤い部分が必須)
図2 Angular 2のコンポーネントとモジュールの関係(赤い部分が必須)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:次世代Webアプリケーションフレームワーク「Angular」の活用

もっと読む

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5