Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、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)
図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記述を直接指定しています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5