裕樹TweetJavaScript用テンプレートエンジン「JST」とは?皆さんがこれまで制作に携わったAjaxアプリケーションは、次のどのタイプだったでしょうか。1.HTMLファイルの中にJavaScriptの記述が混ざっている2.JavaScriptファイルの中にHTMLの記述が混ざっている3.JavaScriptファイルとHTMLファイルが完全に分離されている最近では、jQueryなどを使うことで、HTMLファイルからJavaScriptを追い出して、JavaScriptファイルの中にHTMLの記述が混ざっている状態で、制作をしている人が多いのではないでしょうか。Templates(JST)」は、TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジンです。JSTを使用することで、JavaScriptファイルとHTMLファイルが完全に分離されている状態を実現することができます。World的な簡単なサンプルと、外部サイトのRSSの埋め込みという、より実践的なサンプルを使って、JSTの使い方を紹介していきます。本記事を理解するために、JavaScriptやJSON、jQueryなどの知識が必要な個所がありますが、その都度、外部解説ページへのリンクもありますので、参照しつつ読み進めてみてください。それでは、図1を見てみてください。さん!」とJavaScriptで表示します。このサンプルのHTMLファイルには以下のようなマークアップが存在します。さん!このの中身がJST形式のテンプレートです。「display:none;」となっているため、ブラウザには表示されません。タグであるため、HTMLタグもテンプレート内に記述できます。jQueryとJSTのライブラリファイル、それと今回のサンプルのために作った自作のJSファイルを読み込んでいます。JavaScriptコードはすべて外部ファイルに切り出しており、HTMLファイル内にJavaScriptコードは含まれていません。JSTは、GoogleCodeの「TrinPathプロジェクトのダウンロードページ(http://code.google.com/p/trimpath/downloads/list)」からダウンロードできます。sample1.jsの内容について簡単に紹介しましょう。内の値を、「template」という変数に代入します。合わせて「jQueryのid属性を使った要素検索(http://docs.jquery.com/Selectors/id#id)」「jQueryのval()のマニュアル(http://docs.jquery.com/Attributes/val)」も参照ください。$('#helloTemplate').val();次に、テキストボックスに入力された値を「name」という変数に代入します。$('#name').val();さらに、テンプレートに埋め込むためのデータをJSONのオブジェクト形式で作成します。name};ここでは、nameというキーに、先ほど用意したname変数を設定します。次に、テンプレートにこの埋め込むデータをセットして、processメソッドを呼び出します。「process()メソッドの解説(http://code.google.com/p/trimpath/wiki/JavaScriptTemplateAPI)」を合わせて参照ください。さん!」の「${name}」の部分に、入力した名前が埋め込まれ、その結果が変数に代入されます。このように、JSTでは「${オブジェクトのキー}」と指定すると、その部分をオブジェクトにセットした「値」で置き換えることができます。この結果を、の内容としてセットします。「jQueryのhtml()のマニュアル(http://docs.jquery.com/Attributes/html#val)」も合わせて参照ください。$('#hello').html(result);次は外部サイトのRSSをページ内に埋め込むサンプルを通じて、テンプレート内のfor構文やif構文、モディファイアについて紹介していきます。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。Railsなどの記事執筆も行っている。Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。ITがお届けするポッドキャストです。