第4回 JavaScriptTemplates（JST）入門！

JavaScript用テンプレートエンジン「JST」とは？

　皆さんがこれまで制作に携わったAjaxアプリケーションは、次のどのタイプだったでしょうか。

1.HTMLファイルの中にJavaScriptの記述が混ざっている
2.JavaScriptファイルの中にHTMLの記述が混ざっている
3.JavaScriptファイルとHTMLファイルが完全に分離されている

　最近では、jQueryなどを使うことで、HTMLファイルからJavaScriptを追い出して、JavaScriptファイルの中にHTMLの記述が混ざっている状態で、制作をしている人が多いのではないでしょうか。

　今回紹介する、JavaScript用テンプレートエンジン「JavaScript Templates（JST）」は、TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジンです。JSTを使用することで、JavaScriptファイルとHTMLファイルが完全に分離されている状態を実現することができます。

　今回は、jQueryとJSTを使ったHello World的な簡単なサンプルと、外部サイトのRSSの埋め込みという、より実践的なサンプルを使って、JSTの使い方を紹介していきます。本記事を理解するために、JavaScriptやJSON、jQueryなどの知識が必要な個所がありますが、その都度、外部解説ページへのリンクもありますので、参照しつつ読み進めてみてください。

Hello JST！

　JSTの使い方を学んでいただくために、簡単なサンプルを用意しましたのでこちらからダウンロードできます（808_1.zip/25.1 KB/GPL）。

　それでは、図1を見てみてください。このサンプルでは、「名前」のテキストボックスに名前を入力して「送信」を押すと、「こんにちは ○○ さん!」とJavaScriptで表示します。

　このサンプルのHTMLファイルには以下のようなマークアップが存在します。

<textarea id="helloTemplate" style="display:none;">
こんにちは ${name} さん!
</textarea>

　この<textarea>の中身がJST形式のテンプレートです。「display:none;」となっているため、ブラウザには表示されません。<textarea>タグであるため、HTMLタグもテンプレート内に記述できます。

　jQueryとJSTのライブラリファイル、それと今回のサンプルのために作った自作のJSファイルを読み込んでいます。

<script language="javascript" src="javascripts/jquery-1.2.6.min.js"></script>
<script language="javascript" src="javascripts/trimpath-template-1.0.38.js"></script>
<script language="javascript" src="javascripts/sample1.js"></script>

　JavaScriptコードはすべて外部ファイルに切り出しており、HTMLファイル内にJavaScriptコードは含まれていません。JSTは、GoogleCodeの「TrinPathプロジェクトのダウンロードページ（http://code.google.com/p/trimpath/downloads/list）」からダウンロードできます。

　sample1.jsの内容について簡単に紹介しましょう。

　送信ボタンが押されると、<textarea>内の値を、「template」という変数に代入します。合わせて「jQueryのid属性を使った要素検索（http://docs.jquery.com/Selectors/id#id）」「jQueryのval()のマニュアル（http://docs.jquery.com/Attributes/val）」も参照ください。

var template = $('#helloTemplate').val();

　次に、テキストボックスに入力された値を「name」という変数に代入します。

var name = $('#name').val();

　さらに、テンプレートに埋め込むためのデータをJSONのオブジェクト形式で作成します。

var data = {'name': name};

　ここでは、nameというキーに、先ほど用意したname変数を設定します。

　次に、テンプレートにこの埋め込むデータをセットして、processメソッドを呼び出します。「process()メソッドの解説（http://code.google.com/p/trimpath/wiki/JavaScriptTemplateAPI）」を合わせて参照ください。

var result = template.process(data);

　これで、テンプレート「こんにちは ${name} さん!」の「${name}」の部分に、入力した名前が埋め込まれ、その結果が変数に代入されます。このように、JSTでは「${オブジェクトのキー}」と指定すると、その部分をオブジェクトにセットした「値」で置き換えることができます。

　この結果を、<div id='hello'>の内容としてセットします。「jQueryのhtml()のマニュアル（http://docs.jquery.com/Attributes/html#val）」も合わせて参照ください。

$('#hello').html(result);

　次は外部サイトのRSSをページ内に埋め込むサンプルを通じて、テンプレート内のfor構文やif構文、モディファイアについて紹介していきます。