Angular 2 TIPS

Angular 2 TIPS

コンポーネントの値をビューに反映させるには?({{...}})

2017年1月4日

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

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

 データバインドとは、JavaScriptのオブジェクト(モデル)をHTMLテンプレート(ビュー)に結び付けるための機能。Angularの(AngularJS 1.x時代からの)特徴的な機能の一つです。

 データバインドにはさまざまな記法がありますが、まずはInterpolationと呼ばれる記法からです。以下は、あらかじめ用意された文字列をテンプレートに埋め込むためのサンプルです。

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

@Component({
  selector: 'my-app',
  // 2準備されたテンプレート変数
  template: '<p>{{msg}}</p>'
})
export class AppComponent {
  // 1テンプレート変数を準備
  msg = 'こんにちは、世界!';
}
用意された文字列をビューに反映させるためのコード(app/app.component.ts)

 Angular 2では、テンプレートで利用する値は、コンポーネントのプロパティとして受け渡すのが基本です。この例であれば、AppComponentコンポーネント(クラス)のmsgプロパティを準備しています(1)。

 これを受け取るのが、テンプレートの{{式}}という表現です(2)。ここでは単純にコンポーネントのプロパティを参照しているだけですが、{{1 + 2}}のような式、{{getData()}}のようなメソッド呼び出しなど、任意の式を書くことが可能です。

{{...}}式の注意

 {{...}}ではかなり自由にJavaScriptの式を表すことが可能です。しかし、全てのJavaScript式を許容しているわけではない点に注意してください。

1利用できない演算子がある

 主に、副作用を伴うような演算子は、{{...}}式では禁止されています。

  • 代入演算子(=+=-=など)
  • new演算子
  • ;,
  • インクリメント/デクリメント演算子
  • ビット演算子(|&
2グローバル名前空間上のオブジェクトは参照できない

 {{...}}式のコンテキストは、コンポーネントのインスタンスです*1。つまり、{{...}}式からは、グローバル名前空間にあるwindowdocumentのようなオブジェクトにアクセスすることはできません。

  • *1 {{msg}}が、暗黙的にAppComponentコンポーネントのプロパティを参照していた点、{{AppComponent.msg}}のような表現はしない点を、いま一度確認しておきましょう。
3{{...}}式のガイドライン

 その他、{{...}}式を記述する際には、以下のようなガイドラインに沿うべきです。

  • 式が副作用を伴わないこと
  • 短時間で実行できること
  • シンプルであること
  • べきとうであること(=同じ操作を何度実行しても同じ結果を返すこと)

 Angular 2では、内部的に{{...}}式を頻繁に評価します。時間のかかる{{...}}式は、アプリそのもののパフォーマンスに直接影響する可能性があるので、注意してください。

処理対象:テンプレート構文(Template Syntax) カテゴリ:基本
API:Interpolation(補間)|{{...}}式 カテゴリ:テンプレート構文(Template Syntax)

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

1. Angular 2を利用するには?(準備編)

人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載スタート。まずはその特徴とインストール方法を説明する。

2. Angular 2を利用するには?(実装編)

初めてのAngular 2開発。誤解のしようもない最も基本的な“Hello World”を作成して、Angular 2アプリの基本構造を理解しよう。

3. コンポーネントに適用すべきテンプレートを指定するには?(template/templateUrlパラメーター)

@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート(ビュー)を適用する方法を説明する。

4. 【現在、表示中】≫ コンポーネントの値をビューに反映させるには?({{...}})

JavaScriptのオブジェクトをHTMLテンプレートに結び付けるためのデータバインドを記述するためのInterpolation記法の基礎を解説する。

5. ビューの中で「安全に」プロパティ/メソッドにアクセスするには?(「?.」演算子)

プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説する。

イベント情報(メディアスポンサーです)

Azure Central の記事内容の紹介

GrapeCity Garage 記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社