体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説
第4回 Meteor開発のテンプレート
Meteorを使用したアプリケーション開発
前回までは，
UIプログラミングを行う際，
Meteor自身は，
前置きが長くなってしまいましたが，
Meteorにおけるテンプレートシステム
前述した文章で，
Handlebarsそのものについては，
まず，<template>要素を配置します。これは，
MeteorにおけるHTMLのアウトライン
<head> </head>
<body> </body>
<template>テンプレート1</template>
<template>テンプレート2</template>そして，<template>内にテンプレートのソースコードを記述します。テンプレートには名前が必要で，
<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>この例
図1 サンプル4-1の実行結果
サンプルは以下からダウンロードできます。
Meteorによるテンプレートの展開
Meteorは<template>要素によって定義されたテンプレートを，
コンパイルされた結果，Templateオブジェクトのメンバーとして定義されます。その関数に対しては，Template.テンプレート名でアクセスすることが可能です。
たとえば，Template.という関数が定義されます。サンプル4-1を実行中に，Template.を呼び出してみましょう。
図2 テンプレート関数を直接呼び出す
上の実行結果を見てお分かりの通り，
簡潔に言えば，Template.テンプレート名という関数になる」
Handlebarsテンプレート内で変数を使用する
Handlebarsは，{{と}}で囲んだ中で任意の式を使用することができます。最も一般的なのは，
<template name="mainContent">
こんにちは{{yourName}}さん。現在時刻は{{now}}です。
</template>このテンプレート中で使用されている変数に値を指定する方法は3つあります。テンプレート関数を直接呼び出す方法，
まず，Template.として定義されていますので，
// テンプレートを評価
var content = Template.mainContent({ yourName: "白石", now: new Date });
// 評価結果をbody要素の内容として指定
document.body.innerHTML = content;この方法は，
// 変数yourNameに対応する定数
Template.mainContent.yourName = "白石";
// 変数nowに対応する定数
Template.mainContent.now = new Date;さらに，
// 変数yourNameに対応する定数
Template.mainContent.yourName = function() {
return "白石";
};
// 変数nowに対応する定数
Template.mainContent.now = function() {
return new Date;
};まとめ
今回は，<template>要素を用いてテンプレートの定義を行えること，Templateオブジェクトの属性として定義されること，
次回は，