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

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

ディレクティブは記述ルールに着目

　AngularJSでは、ディレクティブと呼ばれる独自のHTML記述が利用できます。Angular 2で利用できる全てのディレクティブは、公式WebページのAPIリファレンスで検索できます。

図3　Angular 2のディレクティブをAPIリファレンスで検索

　ここでは繰り返し（NgFor）と条件分岐（NgIf）を例に、Angular 2のディレクティブ利用例を説明します。まずAppComponentコンポーネントにリスト8のような変数phonesを定義します。phonesはスマートフォンの情報を格納しており、name（名前）、vendor（メーカー）、locale（国と地域）の値を保持するJavaScriptオブジェクトの配列になります。

リスト8　表示するデータ（angular2-003-directive/app/app.component.ts）

phones = [
  {"name":"Xperia Z5", "vendor":"ソニー", "locale": "JP"},
  {"name":"Galaxy S7 edge", "vendor":"サムスン", "locale": "KR"},
  {"name":"Zenfone 3", "vendor":"エイスース", "locale": "TW"},
  {"name":"HUAWEI P9", "vendor":"ファーウェイ", "locale": "CN"},
  {"name":"arrows M03", "vendor":"富士通", "locale": "JP"},
];

　phones配列の各要素を順番に表示するように、ディレクティブをリスト9のように記述します。

リスト9　NgForとNgIfディレクティブの利用例（angular2-003-directive/app/app.component.ts）

<ul>
  <!-- *ngFor属性で繰り返し ...（1）-->
  <li *ngFor="let phone of phones">
    <!-- phoneオブジェクトの値を参照 ...（2）-->
    {{phone.name}}は{{phone.vendor}}の製品です。
    <!-- *ngIf属性で条件分岐 ...（3）-->
    <span *ngIf="phone.locale=='JP'" [ngStyle]="{'color':'red'}">
      ※国産です
    </span>
  </li>
</ul>

　（1）のliタグに付与された*ngFor属性で繰り返しを指定します。「let phone of phones」は、ループ内でphones配列の各要素をphoneオブジェクトとして参照する意味で、（2）でphoneオブジェクトのname、vendorプロパティをデータバインディングで表示しています。

　（3）は条件分岐です。spanタグに付与された*ngIf属性内の「phone.locale=='JP'」で、localeプロパティがJPである場合のみspanタグの内容を表示するよう指定します。[ngStyle]はCSSを設定するAngular 2のディレクティブで、ここでは赤文字になるよう設定しています。

　リスト8、9を実行すると図4のようにオブジェクトの各要素がリスト表示され、localeがJPの要素のみ赤文字で「※国産です」が表示されます。

図4　繰り返しと条件分岐のディレクティブを利用した表示（angular2-003-directive）

　AngularJS 1でリスト9と同じ表示を行う記述はリスト10のようになります。*ngForの代わりにng-repeat属性、*ngIfの代わりにng-if属性、[ngStyle]の代わりにng-style属性を利用します。

リスト10　リスト9と等価のAngularJS 1記述（angularjs1-samples/003-directive.html）

<ul>
  <!-- ng-repeatで繰り返し -->
  <li ng-repeat="phone in phones">
    <!-- phoneオブジェクトの値を参照 -->
    {{phone.name}}は{{phone.vendor}}の製品です。
    <!-- ng-ifで条件分岐 -->
    <span ng-if="phone.locale=='JP'" ng-style="{'color':'red'}">
      ※国産です
    </span>
  </li>
</ul>