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ファイルには以下のようなマークアップが存在します。

<br /> こんにちは ${name} さん!<br />

　このの中身がJST形式のテンプレートです。「display:none;」となっているため、ブラウザには表示されません。<textarea>タグであるため、HTMLタグもテンプレート内に記述できます。<br /> <br /> 　jQueryとJSTのライブラリファイル、それと今回のサンプルのために作った自作のJSファイルを読み込んでいます。<br /> <br /> <script language="javascript" src="javascripts/jquery-1.2.6.min.js"></script><br /> <script language="javascript" src="javascripts/trimpath-template-1.0.38.js"></script><br /> <script language="javascript" src="javascripts/sample1.js"></script><br /> <br /> 　JavaScriptコードはすべて外部ファイルに切り出しており、HTMLファイル内にJavaScriptコードは含まれていません。JSTは、GoogleCodeの「TrinPathプロジェクトのダウンロードページ（<a href="http://code.google.com/p/trimpath/downloads/list">http://code.google.com/p/trimpath/downloads/list</a>）」からダウンロードできます。<br /> <br /> 　sample1.jsの内容について簡単に紹介しましょう。<br /> <br /> 　送信ボタンが押されると、<textarea>内の値を、「template」という変数に代入します。合わせて「jQueryのid属性を使った要素検索（<a href="http://docs.jquery.com/Selectors/id#id">http://docs.jquery.com/Selectors/id#id</a>）」「jQueryのval()のマニュアル（<a href="http://docs.jquery.com/Attributes/val">http://docs.jquery.com/Attributes/val</a>）」も参照ください。<br /> <br /> var template = $('#helloTemplate').val();<br /> <br /> 　次に、テキストボックスに入力された値を「name」という変数に代入します。<br /> <br /> var name = $('#name').val();<br /> <br /> 　さらに、テンプレートに埋め込むためのデータをJSONのオブジェクト形式で作成します。<br /> <br /> var data = {'name': name};<br /> <br /> 　ここでは、nameというキーに、先ほど用意したname変数を設定します。<br /> <br /> 　次に、テンプレートにこの埋め込むデータをセットして、processメソッドを呼び出します。「process()メソッドの解説（<a href="http://code.google.com/p/trimpath/wiki/JavaScriptTemplateAPI">http://code.google.com/p/trimpath/wiki/JavaScriptTemplateAPI</a>）」を合わせて参照ください。<br /> <br /> var result = template.process(data);<br /> <br /> 　これで、テンプレート「こんにちは ${name} さん!」の「${name}」の部分に、入力した名前が埋め込まれ、その結果が変数に代入されます。このように、JSTでは「${オブジェクトのキー}」と指定すると、その部分をオブジェクトにセットした「値」で置き換えることができます。<br /> <br /> 　この結果を、<div id="hello">の内容としてセットします。「jQueryのhtml()のマニュアル（<a href="http://docs.jquery.com/Attributes/html#val">http://docs.jquery.com/Attributes/html#val</a>）」も合わせて参照ください。<br /> <br /> $('#hello').html(result);<br /> <br /> 　次は外部サイトのRSSをページ内に埋め込むサンプルを通じて、テンプレート内のfor構文やif構文、モディファイアについて紹介していきます。 </div>