最新トレンドを取り込んで進化する次世代AngularJS「Angular 2」最初の一歩

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

サンプルコードを書き換えてデータバインディングを試す

　データバインディングは変数の値と画面表示を結びつけるAngularJSの特徴的な機能です。Angular 2でデータバインディングを試すため、サンプルコードを少し書き換えてみます。app.component.tsをリスト7のように変更します。

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

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

@Component({
  selector: 'my-app',
  template: '<h1>{{helloMessage}}</h1>' // バインド記述 ...（1）
})
export class AppComponent {
  // バインドされる変数 ...（2）
  helloMessage = 'Message from AppComponent';
}

　バインドされる変数helloMessageを（2）のように記述して、テンプレートでは（1）のように「{{ }}」で変数名を囲んで参照します。この記法はAngularJS 1と同じなので、経験者にはなじみやすいでしょう。

　リスト7を実行すると図7のように表示され、データバインディングが行われていることがわかります。

図7　データバインディングの実行結果（angular2-001-binding）

Angular 2のモジュール機能を先取りで体験

　ここまでは1個のコンポーネントを扱ってきましたが、Angular 2では1ページに複数のコンポーネントを含めることができます。リスト8のように2個目のコンポーネントapp.component2.tsを作ってみます。

リスト8　2個目のコンポーネント（angular2-002-component/app/app.component2.ts）

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

@Component({
  selector: 'my-app-2', // タグ定義 ...（1）
  styles: ['.header {color:blue;}'], // スタイル定義 ...（2）
  template: '<h1 class="header">{{helloMessage}}</h1>'
})
export class AppComponent2 {
  helloMessage = 'Message from AppComponent 2';
}

　（1）で2個目のコンポーネントを埋め込むタグ（<my-app-2>タグ）を指定します。また（2）のstylesに、コンポーネント内で利用するスタイル定義（CSS）を記述します。ここではtemplate内のh1タグに指定するheaderクラスで、青のテキスト色を指定しています。

　1個目のコンポーネントもリスト9のように修正します。

リスト9　1個目のコンポーネントを修正（angular2-002-component/app/app.component.ts）

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

@Component({
  selector: 'my-app',
  styles: ['.header {color:red;font-style:italic}'], // スタイル定義 ...（1）
  template: '<h1 class="header">{{helloMessage}}</h1>'
})
export class AppComponent {
  helloMessage = 'Message from AppComponent';
}

　（1）のスタイル定義で、headerクラスに赤のテキスト色とイタリックの表示を指定しています。リスト8とリスト9で同じheaderクラスに異なる指定をしていることに注目してください。

　コンポーネントが2個になったので、main.tsの起動処理はリスト10のように、それぞれのコンポーネントを参照して起動するように修正します。

リスト10　2個のコンポーネントの起動処理（angular2-002-component/main.ts）

import { bootstrap }    from '@angular/platform-browser-dynamic';

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

bootstrap(AppComponent);
bootstrap(AppComponent2);

　またindex.htmlには2個目のコンポーネントが設定される<my-app-2>タグを追記します。

リスト11　2個のコンポーネントを表示するHTML（angular2-002-component/index.html）

<body>
  <my-app>Loading...</my-app>
  <my-app-2>Loading...</my-app-2>
</body>

　リスト8～リスト11を実行すると図8のように、それぞれのコンポーネントが指定されたスタイルで表示されます。1個目のコンポーネントに指定された斜体表示が2個目のコンポーネントに反映されていないことから、単なるスタイルの上書きではなく、別個のスタイルが適用されていることがわかります。

図8　2個のコンポーネントの実行結果（angular2-002-component）

　一般にCSSのスタイル指定はWebページ全体で共有されるため、ページの一部をモジュールとして入れ替える場合はスタイルの競合へ配慮が必要です。しかしAngular 2ではコンポーネント間の独立性が保たれており、スタイル指定が競合する心配がありません。このようにWebページのモジュール化が可能な点は、Angular 2の大きな特徴と言えます。

まとめ

　本記事では、AngularJSの次期バージョン「Angular 2」について、主な特徴を紹介するとともに、Angular 2のコードを書き始めるためのサンプルプロジェクトを作成し、データバインディングやモジュール化の機能を動作確認しました。

　Angular 2はJavaScript最新仕様への追従やモジュール化の考え方など、より先進的な機能を取り入れた進化を果たしている一方で、AngularJS 1からの変更点も多く、経験者であっても学ぶべきことは少なくありません。本連載ではAngular 2の機能を順次紹介していきます。次回はAngular 2のディレクティブ（独自タグ）と、今回紹介したデータバインディングの詳細について解説します。

参考資料

• Angular 2
• AngularJS