第4回　Meteor開発のテンプレート

Meteorを使用したアプリケーション開発

前回までは、Meteorの環境や基本的なAPIに関する説明でしたが、今回からは、いよいよ本格的なアプリケーション開発に必要とされる知識を紹介していきます。

UIプログラミングを行う際、必ずといって良いほど言及されるプログラミングモデルがMVCモデルです。MVCモデルとは、ご存知の通り、Uデータを保持する「モデル⁠」⁠、ユーザの目に触れる「ビュー⁠」⁠、モデルとビューの間を取り持ち、UI全体を制御する「コントローラ」でアプリケーションを構成することです。

Meteor自身は、MVCモデルをそれほど積極的にサポートしているわけではありません。しかし、Meteorは非常に柔軟なアーキテクチャを提供することで、外部のMVCフレームワークと併用することや、ビューの構築に任意のテンプレートエンジンを利用することが可能となっています。

前置きが長くなってしまいましたが、今回からはMeteorが備えるテンプレートシステムの利用方法を説明していきたいと思います。

Meteorにおけるテンプレートシステム

前述した文章で、「⁠ビューの構築に任意のテンプレートエンジンを利用することが可能」と申し上げましたが、プレビュー版である現在は、残念ながら「Handlebars」というエンジンしかサポートしていません。

Handlebarsそのものについては、次回の記事で詳しく説明するとして、今回はMeteorでテンプレートを利用する仕組みを紹介します。

まず、HTMLに<template>要素を配置します。これは、<head>や<body>と同じレベルに記述します。つまり、MeteorアプリケーションのHTMLは<head>、<body>、<template>要素が並んだ構造になるということです。

MeteorにおけるHTMLのアウトライン

<head> </head>
<body> </body>
<template>テンプレート1</template>
<template>テンプレート2</template>

そして、<template>内にテンプレートのソースコードを記述します。テンプレートには名前が必要で、name属性を使用して指定します。ここでは、テンプレートの高度な機能は使わず、通常のHTMLを記述してみましょう。

<template name="template1">
  <h1>はじめてのテンプレート</h1>
</template>

このテンプレートを<body>要素内に展開するために、{{> テンプレート名}}という記述を行います。

<body>
  {{>template1}}
</body>

ここまでのソースコード全文は以下のようになります。

<head>
  <meta charset="UTF-8">
  <title>サンプル4-1</title>
</head>
<body>
  {{>template1}}
</body>
<template name="template1">
  <h1>はじめてのテンプレート</h1>
</template>

この例（サンプル4-1）を実行すると、以下のようになります。

サンプルは以下からダウンロードできます。

サンプル4-1（sample4-1.zip）

Meteorによるテンプレートの展開

Meteorは<template>要素によって定義されたテンプレートを、JavaScriptコードにコンパイルして利用します。開発モードで動作させる場合は、コンパイル処理を実行時に行いますが、本番環境ではコンパイル処理は事前に行われます。

コンパイルされた結果、テンプレートはJavaScriptの関数となり、グローバルなTemplateオブジェクトのメンバーとして定義されます。その関数に対しては、Template.テンプレート名でアクセスすることが可能です。

たとえば、先のサンプル4-1を実行した結果、Template.template1という関数が定義されます。サンプル4-1を実行中に、FirebugやWebインスペクタを用いて実行環境にアタッチし、Template.template1を呼び出してみましょう。

上の実行結果を見てお分かりの通り、テンプレート関数の戻り値は、テンプレートを実行した結果の文字列となります。

簡潔に言えば、「⁠テンプレートはMeteorによってコンパイルされ、Template.テンプレート名という関数になる」ということです。以降は、この説明を踏まえて解説を進めます。

Handlebarsテンプレート内で変数を使用する

Handlebarsは、{{と}}で囲んだ中で任意の式を使用することができます。最も一般的なのは、テンプレート内で変数を使用することです。以下の例を見てください。

<template name="mainContent">
  こんにちは{{yourName}}さん。現在時刻は{{now}}です。
</template>

このテンプレート中で使用されている変数に値を指定する方法は3つあります。テンプレート関数を直接呼び出す方法、テンプレート関数の属性として定数を定義する方法、テンプレート関数の属性として関数を定義する方法です。

まず、テンプレート関数を直接呼び出してみます。このテンプレートのコンパイル結果は、Template.mainContentとして定義されていますので、そのメソッドを直接呼び出すというものです（サンプル4-2⁠）⁠。テンプレート内で使用されている変数の値は、JavaScriptオブジェクトを関数の引数に与えることで指定することができます。

// テンプレートを評価
var content = Template.mainContent({ yourName: "白石", now: new Date });
// 評価結果をbody要素の内容として指定
document.body.innerHTML = content;

この方法は、テンプレート関数の動作を理解するという点では優れていますが、Meteorにおいては一般的な方法ではありません。より一般的な方法として、テンプレート関数の属性として定数を定義する方法があります（サンプル4-3⁠）⁠。以下の例を見てください。

// 変数yourNameに対応する定数
Template.mainContent.yourName = "白石";
// 変数nowに対応する定数
Template.mainContent.now = new Date;

さらに、定数の代わりに関数を指定することもできます（サンプル4-4⁠）⁠。関数はMeteorによって自動的に呼び出され、その戻り値がテンプレート内変数の値として使用されます。言うまでもありませんが、この方法が最も柔軟です。

// 変数yourNameに対応する定数
Template.mainContent.yourName = function() {
    return "白石";
};
// 変数nowに対応する定数
Template.mainContent.now = function() {
    return new Date;
};

まとめ

今回は、Meteorが備えるテンプレートシステムのさわりの部分を解説しました。<template>要素を用いてテンプレートの定義を行えること、テンプレートはJavaScript関数にコンパイルされ、グローバルなTemplateオブジェクトの属性として定義されること、テンプレート内で変数を使用するための方法をお伝えしました。

次回は、テンプレート内での条件分岐や繰り返しなど、より進んだテンプレートの記述方法について学びます。