Angularでコンポーネントに適用すべき「テンプレート」を指定するには？（template／templateUrlパラメーター）：Angular TIPS

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

[山田祥寛，著]

連載目次

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 2／4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

　コンポーネントにテンプレート（ビュー）を適用するには、@Componentデコレーターのtemplate／templateUrlいずれかのパラメーターを利用します。本稿では、それぞれの方法について解説します。

シンプルなテンプレートを定義するならば「template」パラメーター

　数行程度の簡単なテンプレートを定義するならば、templateパラメーターを利用するのが便利です。文字列としてテンプレートを指定できますので、コンポーネントファイル1つにクラス定義もビュー定義もまとめて記述できます。リスト1はそのコード例で、その実行結果が図1です（※Angular 2アプリの基本構造や実行の仕方は、別稿「TIPS：Angular 2を利用するには？（実装編）」を参照）。

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

@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>
    <p class="main">{{contents}}</p>`
})
export class AppComponent {
  title = 'Angular 2 TIPS';
  contents = '皆で頑張って、Angular 2を覚えましょう！';
}

リスト1　templateテンプレートでテンプレートを定義した例（app/app.component.ts）

▼

図1　テンプレートに文字列を反映

　templateパラメーターの設定値（文字列）が、シングルクォート／ダブルクォートではなく、バッククォート（`〜`）でくくられている点に注目です。これは、TypeScript／ECMAScript 2015の構文で「テンプレート文字列」と呼ばれます。テンプレート文字列を利用することで、複数行にまたがる文字列を1つの文字列リテラルとして表現できるようになります。テンプレート定義に際してはよく利用されますので、覚えておきましょう。

　一般的なJavaScriptであれば、以下のように表現していたところです。

template: "<h1>{{title}}</h1>\n    <p class=\"main\">{{contents}}</p>"

リスト2　テンプレート文字列を利用しない場合

テンプレートを外部ファイル化するならば「templateUrlパラメーター」

　templateパラメーターは、@Componentデコレーターにテンプレートをハードコーディングするというその性質上、テンプレートが大きくなった場合に、コードの見通しが劣化しやすいという問題があります。一定以上の規模のテンプレートであれば、外部ファイル化し、templateUrlパラメーターでインポートするのが望ましいでしょう（リスト3、リスト4）。

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

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  title = 'Angular 2 TIPS';
  contents = '皆で頑張って、Angular 2を覚えましょう！';
}

リスト3　templateUrlテンプレートでテンプレートを定義した例（app/app.component.ts）

<h1>{{title}}</h1>
<p class="main">{{contents}}</p>

リスト4　外部ファイル化されたテンプレート（app/app.component.html）

　結果は、先ほどと同じになるはずです。

　なお、templateUrlパラメーターを指定する場合には、コンポーネントファイルからの相対パスではなく、アプリケーションルートからのパスを指定する点に注意してください。

処理対象：テンプレート　カテゴリ：基本
API：@Component　カテゴリ：@angular > core > Component decorator（コンポーネントデコレーター）

「Angular TIPS」