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

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

　本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。今回はAngular 2を構成する単位であるコンポーネントやモジュールの利用法について、実際にサンプルコードにコンポーネントやモジュールを追加しながら説明します。

はじめに

　Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。リリース候補版の状態が長く続いていましたが、2016年9月時点に正式版（2.0.0）がリリースされました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。

　Angular 2はコンポーネントやモジュールと呼ばれる、Webサイトの実装を分割する仕組みを備えており、Angular 2自体も複数のモジュールから構成されています。これらの仕組みを活用して、実装を分割して見通しの良いソースコードを書いたり、ソフトウェア部品として別のWebサイトに移植したりできます。

　本記事では、Angular 2のコンポーネントやモジュールについて紹介します。まずコンポーネントやモジュールの概念を説明し、次に簡単なサンプルコードにコンポーネントやモジュールを追加しながら、具体的な記述方法を解説します。

対象読者

• 正式版になったので本格的にAngular 2を使い始めようと思っている方
• 最新フレームワークに触れておきたい方
• 作成したソースコードを部品化・再利用したい方

必要な環境

　Angular 2はJavaScriptのフレームワークですが、公式WebサイトのドキュメントやサンプルはTypeScriptが先行して整備される場合が多く、本連載でもTypeScriptでコードを記述していきます。また、サンプルの実行にはNode.jsが必要になります。

　今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Angular 2 2.0.0
  • Node.js v6.5.0 64bit版
  • Microsoft Edge 38.14393.0.0

　Angular 2の公式Webサイトでは基本的なAngular 2の実行環境を整える手順「5 MIN QUICKSTART」を公開しており、本記事のサンプルコードも、クイックスタートで作成したファイル一式をベースにします。2016年9月現在の手順で作成したクイックスタートプロジェクト（angular2-quickstart）を、ダウンロードできるサンプルコードに含めています。プロジェクトの実行方法については過去記事も参照してください。

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

　最初にAngular 2の「コンポーネント」と「モジュール」について説明します。

Webページの一部分を構成する「コンポーネント」

　コンポーネントは、表示されたWebページのある一部分（ビュー）の内容や動作を定義します。コンポーネントはHTMLで表示を定義する「テンプレート」、コンポーネントの属性を定義する「メタデータ」とワンセットで、Webページの一部分を構成します。

　例としてクイックスタートのコンポーネント記述をリスト1に示します。

リスト1　クイックスタートのコンポーネント（angular2-quickstart/app/app.component.ts）

@Component({ // メタデータ ...（1）
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>' // テンプレート ...（2）
})
export class AppComponent { } // コンポーネント ...（3）

　メタデータ（1）のtemplate属性にテンプレート（2）が指定され、AppComponentという名前のクラスでコンポーネント（3）が定義されています。これらの内容が（メタデータのselector属性に指定された）<my-app>タグが記述された場所に描画されます。

図1　クイックスタートの赤枠部がコンポーネントに対応（angular2-quickstart）