はじめに
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に示します。
@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>タグが記述された場所に描画されます。
