「Angular 2」のデータバインディングとディレクティブ記述法

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

　本連載では、Webアプリケーションフレームワーク「Angular 2」の活用方法をサンプルとともに紹介しています。今回はAngularJSの特徴的な機能であるデータバインディングとディレクティブの記述法を、現行バージョン（AngularJS 1）と比較しながら説明します。

はじめに

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

　AngularJS 1ではビューとデータモデルを関連付けるデータバインディングや、ディレクティブと呼ばれる独自のHTML記述が利用できました。これらはAngularJSの特徴として真っ先に言及される機能で、Angular 2でももちろん利用できます。しかし記述方法が微妙に異なっており、最初は違和感を感じるかもしれません。

　そこで本記事では、Angular 2でデータバインディングやディレクティブを利用する方法を、AngularJS 1と比較しながら説明していきます。

対象読者

• AngularJS 1は経験があるが、Angular 2は分からない方
• Angular 2正式版リリースを待ち望んでいる方
• 最新フレームワークに触れておきたい方

必要な環境

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

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

• Windows 10 64bit版
  • Node.js v6.4.0 64bit版
  • Microsoft Edge 38.14393.0.0

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

参考　2.0.0-rc.5でのクイックスタートの変更点

　2.0.0-rc.5のリリースとともに、クイックスタートの内容も変更されています。参照するモジュールのバージョンが変更されたほか、Webアプリのモジュールを定義するapp/app.module.tsファイルが追加され、そのモジュールをapp/main.tsのアプリ起動処理が参照するようになっています。クイックスタートプロジェクトのapp.module.tsはリスト1のようになっており、Webブラウザーでアプリを実行するためのBrowserModuleモジュールと、app.component.tsに実装されたコンポーネントAppComponentを参照して、WebアプリのモジュールAppModuleを定義しています。

リスト1　モジュール定義ファイル（angular2-quickstart/app/app.module.ts）

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.module.tsのモジュール記述については次回の連載で詳しく説明します。なお本記事のサンプルコードではリスト1をもとに、フォームを利用するサンプルではフォームのモジュール（FormsModule）を追加しています。

記述法がちょっと違うデータバインディング

　データバインディングは、コンポーネントが公開している変数やメソッドをWebコンテンツ（HTML）から参照・更新する仕組みです。Angular 2でデータバインディングを利用するシンプルな例をリスト2に示します。Angular 2のコンポーネント定義については前回記事の説明も参考にしてください。

リスト2　Angular 2のデータバインディング（angular2-001-databinding/app/app.component.ts）

import { Component } from "@angular/core";

// コンポーネントのメタデータを設定（Decorator） ...（1）
@Component({
  selector: "my-app",
  template: `
    <h1>Angular 2 サンプル1</h1>

    <h3>片方向データバインディング</h3>
    <!-- {{ }}記述で片方向データバインディング ...（2）-->
    <p>{{message}}</p>

    <h3>双方向データバインディング</h3>
    <!-- [(ngModel)]属性で双方向データバインディング ...（3）-->
    <input type="text" [(ngModel)]="message">
  `
})
export class AppComponent {
  // バインディング変数 ...（4）
  message:string = "こんにちは！";
}

　（1）内のtemplateパラメータが、コンポーネントの表示を定義するHTMLです。バッククォート（`）で囲むと複数行を記述できます。コンポーネントが公開している変数の内容を参照するだけ（片方向データバインディング）の場合は、（2）のように「{{ }}」で変数名を囲んで記述します。一方、HTMLで変数の参照と変更を両方行う（双方向データバインディング）場合は、（3）のようにタグの「[(ngModel)]」属性に変数名を記述します。データバインディングの対象となる変数messageは（4）で定義されています。

　リスト2を実行すると、変数messageの内容がラベル（pタグ要素）とテキストボックスに表示されます。テキストボックスの内容を書き換えると、ラベルの表示も連動して変更されます。

図1　Angular 2のデータバインディング（angular2-001-databinding）

　AngularJS 1では、片方向データバインディングは同一の記述ですが、双方向データバインディングはリスト3のように、[(ngModel)]の代わりにng-model属性を利用します。リスト3を含むコード全体はダウンロードできるサンプルコードに含まれています。

リスト3　AngularJS 1のデータバインディング（angularjs1-samples/001-binding.html）

<!-- ng-model属性で双方向データバインディング -->
<input type="text" ng-model="message">

参考　テンプレートのHTMLを外出しする

　リスト2ではコンポーネントファイル内のtemplate属性に直接テンプレートのHTMLを指定しましたが、HTMLを別ファイルに外出しして、templateUrl属性にHTMLファイルのパスを指定することもできます。特にコードが大規模になった場合に、表示とロジックを分離して整理できます。

リスト4　templateUrl属性でHTMLを外出し（angular2-001a-templateUrl/app/app.component.ts）

@Component({
  selector: "my-app",
  templateUrl:"app/template.html"  // app/template.htmlにHTMLが記述されている
})

　リスト4を含むコード全体（angular2-001a-templateUrl）はダウンロードできるサンプルコードに含まれています。本記事ではサンプルコードの処理全体を見通せるようにするため、リスト2のようにtemplate属性にHTML記述を直接指定しています。