前回までは、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>要素が並んだ構造になるということです。</body><template>テンプレート1</template><template>テンプレート2</template>そして、<template>内にテンプレートのソースコードを記述します。テンプレートには名前が必要で、name属性を使用して指定します。ここでは、テンプレートの高度な機能は使わず、通常のHTMLを記述してみましょう。テンプレート名}}という記述を行います。{{>template1}}</body>ここまでのソースコード全文は以下のようになります。<h1>はじめてのテンプレート</h1></template>この例(サンプル4-1)を実行すると、以下のようになります。サンプル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は、{{と}}で囲んだ中で任意の式を使用することができます。一般的なのは、テンプレート内で変数を使用することです。以下の例を見てください。こんにちは{{yourName}}さん。現在時刻は{{now}}です。</template>このテンプレート中で使用されている変数に値を指定する方法は3つあります。テンプレート関数を直接呼び出す方法、テンプレート関数の属性として定数を定義する方法、テンプレート関数の属性として関数を定義する方法です。テンプレート関数を直接呼び出してみます。このテンプレートのコンパイル結果は、Template.mainContentとして定義されていますので、そのメソッドを直接呼び出すというものです(サンプル4-2⁠)⁠。テンプレート内で使用されている変数の値は、JavaScriptオブジェクトを関数の引数に与えることで指定することができます。content;この方法は、テンプレート関数の動作を理解するという点では優れていますが、Meteorにおいては一般的な方法ではありません。一般的な方法として、テンプレート関数の属性として定数を定義する方法があります(サンプル4-3⁠)⁠。以下の例を見てください。Date;さらに、定数の代わりに関数を指定することもできます(サンプル4-4⁠)⁠。関数はMeteorによって自動的に呼び出され、その戻り値がテンプレート内変数の値として使用されます。言うまでもありませんが、この方法が最も柔軟です。Date;};まとめ今回は、Meteorが備えるテンプレートシステムのさわりの部分を解説しました。<template>要素を用いてテンプレートの定義を行えること、テンプレートはJavaScript関数にコンパイルされ、グローバルなTemplateオブジェクトの属性として定義されること、テンプレート内で変数を使用するための方法をお伝えしました。次回は、テンプレート内での条件分岐や繰り返しなど、より進んだテンプレートの記述方法について学びます。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。