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" target="_blank" rel="noopener">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" target="_blank" rel="noopener">http://docs.jquery.com/Selectors/id#id</a>）」「jQueryのval()のマニュアル（<a href="http://docs.jquery.com/Attributes/val" target="_blank" rel="noopener">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" target="_blank" rel="noopener">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" target="_blank" rel="noopener">http://docs.jquery.com/Attributes/html#val</a>）」も合わせて参照ください。<br> <br> $('#hello').html(result);<br> <br> 　次は外部サイトのRSSをページ内に埋め込むサンプルを通じて、テンプレート内のfor構文やif構文、モディファイアについて紹介していきます。 </div> <!--pagebreak--> <div id="article_body"> <h2>Google AJAX Feed APIを使った外部サイトのRSS埋め込み</h2> <p>　それでは、図2を見てみましょう。このサンプルでは、「URL」のテキストボックスに「<a href="http://thinkit.jp/rss/rss20.xml" target="_blank" rel="noopener">http://thinkit.jp/rss/rss20.xml</a>」などのRSSのURLを入力して「送信」を押すと、Google AJAX Feed APIを使って、指定されたRSSを取得し、RSS内の各記事のタイトルをJSTを使って描画します。サンプルファイルは<a href="http://dl.impressbm.co.jp/content/136" target="_blank" rel="noopener">こちら</a>からダウンロードできます（808_2.zip/25.4 KB/GPL）。<br> <br> 　このサンプルでもHTMLとJavaScriptを完全に分離しています。HTMLファイルでは、サンプル1でも読み込んでいた、jQuery、JSTに加えて、Google AJAX Feed APIのライブラリファイルと、このサンプルアプリケーションのために自作したsample2.jsを読み込んでいます。<br> <br> 　このサンプルでは、「送信」ボタンを押すとテキストボックスに入力された値をurlという変数に代入します。<br> <br> var url = $('#url').val();<br> <br> 　このURLをGoogle AJAX Feed APIに渡して、RSSを取得させます。</p> <p class="img"><a href="/images/article/808-201.png" target="_blank"><img src="/images/article/808-201-t.png" loading="lazy" decoding="async" class=" lazyload-auto lazyload-processed"></a></p> <h2>JSTテンプレートでのforループの使い方</h2> <p>　それでは、取得されたRSSのデータの描画のサンプルを通じて、JSTによるforループ構文を紹介していきます。今回のサンプルで使用されているJSTテンプレートは以下の通りです。<br> <br> </p> <ul>{for entry in entries}<br> <li>${entry.title}</li> <br> {/for}</ul> <br> <br> 　これがサンプル1と同様に非表示化された<textarea>タグに囲われています。<br> <br> 　まず、Google AJAX Feed APIのマニュアルで、「提供されるRSSデータの構造（<a href="http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html#JSON" target="_blank" rel="noopener">http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html#JSON</a>）」を確認します。このサンプルでは、次のようにすることで、entries[]配下の要素をテンプレートでアクセスできるようにしています。<br> <br> var template = $('#rssTemplate').val();<br> var data = {entries: result.feed.entries}<br> var result = template.process(data);<br> <br> 　そして、以下のようなforループ構文を使うと、配列内の要素一つ一つに対して、繰り返し同じ内容で描画をさせることができます。<br> <br> {for 配列内の要素名 in 配列}<br> 配列内の要素用テンプレート<br> {/for}<br> <br> 　配列内の要素用テンプレートでは、${配列内の要素名}で配列内の要素の値を使用することができます。今回のサンプルでは、配列内の要素は、以下のようなオブジェクトです。<br> <br> {title: 'タイトル1'}<br> <br> 　テンプレート内では、${}に指定する値がさらにオブジェクトである場合、「${entry.title}」のようにして、子オブジェクトの値を埋め込むことができます。<br> <br> 　次は、サンプルを少し拡張して、if構文やモディファイアについて紹介していきます。