JavaScriptTemplates(JST)入門!

2009年1月28日(水)
志田 裕樹

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



 この

株式会社アークウェブ
取締役 CTO。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。オープンソースコミュニティーZen Cart.JPにてコミッターの役割を務め、Zen Cart、Ajax、Ruby on Railsなどの記事執筆も行っている。http://www.ark-web.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています