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>要素が並んだ構造になるということです。
そして、<template>
内にテンプレートのソースコードを記述します。テンプレートには名前が必要で、name属性を使用して指定します。ここでは、テンプレートの高度な機能は使わず、通常のHTMLを記述してみましょう。
このテンプレートを<body>
要素内に展開するために、{{> テンプレート名}}
という記述を行います。
ここまでのソースコード全文は以下のようになります。
この例(サンプル4-1)を実行すると、以下のようになります。
サンプルは以下からダウンロードできます。
Meteorによるテンプレートの展開
Meteorは<template>
要素によって定義されたテンプレートを、JavaScriptコードにコンパイルして利用します。開発モードで動作させる場合は、コンパイル処理を実行時に行いますが、本番環境ではコンパイル処理は事前に行われます。
コンパイルされた結果、テンプレートはJavaScriptの関数となり、グローバルなTemplate
オブジェクトのメンバーとして定義されます。その関数に対しては、Template.テンプレート名
でアクセスすることが可能です。
たとえば、先のサンプル4-1を実行した結果、Template.template1
という関数が定義されます。サンプル4-1を実行中に、FirebugやWebインスペクタを用いて実行環境にアタッチし、Template.template1
を呼び出してみましょう。
上の実行結果を見てお分かりの通り、テンプレート関数の戻り値は、テンプレートを実行した結果の文字列となります。
簡潔に言えば、「テンプレートはMeteorによってコンパイルされ、Template.テンプレート名
という関数になる」ということです。以降は、この説明を踏まえて解説を進めます。
Handlebarsテンプレート内で変数を使用する
Handlebarsは、{{
と}}
で囲んだ中で任意の式を使用することができます。最も一般的なのは、テンプレート内で変数を使用することです。以下の例を見てください。
このテンプレート中で使用されている変数に値を指定する方法は3つあります。テンプレート関数を直接呼び出す方法、テンプレート関数の属性として定数を定義する方法、テンプレート関数の属性として関数を定義する方法です。
まず、テンプレート関数を直接呼び出してみます。このテンプレートのコンパイル結果は、Template.mainContent
として定義されていますので、そのメソッドを直接呼び出すというものです(サンプル4-2)。テンプレート内で使用されている変数の値は、JavaScriptオブジェクトを関数の引数に与えることで指定することができます。
この方法は、テンプレート関数の動作を理解するという点では優れていますが、Meteorにおいては一般的な方法ではありません。より一般的な方法として、テンプレート関数の属性として定数を定義する方法があります(サンプル4-3)。以下の例を見てください。
さらに、定数の代わりに関数を指定することもできます(サンプル4-4)。関数はMeteorによって自動的に呼び出され、その戻り値がテンプレート内変数の値として使用されます。言うまでもありませんが、この方法が最も柔軟です。
まとめ
今回は、Meteorが備えるテンプレートシステムのさわりの部分を解説しました。<template>
要素を用いてテンプレートの定義を行えること、テンプレートはJavaScript関数にコンパイルされ、グローバルなTemplate
オブジェクトの属性として定義されること、テンプレート内で変数を使用するための方法をお伝えしました。
次回は、テンプレート内での条件分岐や繰り返しなど、より進んだテンプレートの記述方法について学びます。