jQuery.tmpl() で HTML の View と Model を分離してみるよ - スタジオ・アルカナ技術ブログ

2011年6月21日 09:00 yossy a.k.a. 会長

jQuery.tmpl() で HTML の View と Model を分離してみるよ

はいどうも～。
季節の変わり目のせいか咳がずーっと止まらなくて、
予想に反して腹筋力が若干向上してしまった虚弱エンジニアの吉田だよ。

今回は jQuery.tmpl() を紹介してみたいと思うよ。
（今回は口語調で書いてみるけど許しておくれ。この記事は夜中にお酒を飲みながら書いているんだ。）

jQuery.tmpl() っていうのを、PHPプログラマ向けに簡単に説明してみようと試みると、
SmartyのJavaScript版みたいなもの、って言えばイメージしやすいかな？
つまり、JavaScriptで使えるテンプレートエンジンってこと。

Webアプリケーションを開発するとき、サーバサイドだと技術もかなり枯れてきているから、
例えばPHPなんかだとSmartyを使えばModelとViewを分離するのはそんなに難しくないよね。

でも、フロントサイド（HTMLやCSSやJavaScript）のGUIが絡んでくるところに関しては、
ブラウザという枠の制約があるせいか、なかなか綺麗なコードにすることが難しいよね。

綺麗なコードが書きにくいから、バグも潜在しやすくなるし、バグが出ちゃたときにIE6でJavaScriptの
デバッグをしているときなんか、この職業を選んだ自分を心の底から呪いたくなったりもするね。

そんなフロントサイドの悩みの種も、jQuery.tmpl() を使ってあげれば、少しだけコードが
シンプルになると思うから、HTMLやCSSやJavaScriptとももっと仲良くなれると思うよ。

jQuery Plugin jQuery.tmpl()
http://api.jquery.com/jQuery.tmpl

jQuery Plugin .tmpl()
http://api.jquery.com/tmpl

今回はインストール方法の説明と、簡単な使い方を紹介してみるね。
jsdo.it で簡単なTwitter検索プログラムを作ってみたから、最後に、そのコードも晒してみるよ。

インストール

jQuery.tmpl() はｊQueryのプラグインだから、プラグインファイルを読み込めば使えるようになるよ。
jQueryのバージョンは1.4.2以上が必要だから、古いバージョンを使っている人は気を付けてね。

jQuery.tmpl() のソースコードはgithubで公開されているから、jquery.tmpl.js っていう
ファイルをダウンロードしてHTMLで読み込んでみてね。
http://github.com/jquery/jquery-tmpl

使い方

じゃあ早速 jQuery.tmpl() の簡単な使い方を紹介するね。

jQuery.tmpl() には引数が3つ用意されているけど、今回は2つの引数にポイントを絞って説明するよ。

jQuery.tmpl( template, [ data ], [ options ] )

・template には、テンプレートとなるHTML文字列を渡す。
・data には、テンプレートの中で使う変数のオブジェクトを渡す。

実際にソースコードを見た方が解りやすいと思うから、サンプルコードを紹介するよ。

HTML

  <div id="target"></div>

JavaScript

  $.tmpl( "<li>${name}</li>", { "name": "Atsuko Maeda" } ).appendTo( "#target" );

結果HTML

  <div id="target"><li>Atsuko Maeda</li></div>

こんな風に、$.tmpl()の第一引数と第二引数でそれぞれ「HTMLのテンプレート」と
その中で扱う「データ」を明確に分離することができるんだ。

　　・HTMLテンプレート： "<li>${name}</li>"
　　・データ： { "name": "Atsuko Maeda" }

テンプレート中の変数も ${var} って感じで書くことができるから、Smartyを知ってる人は
すぐに馴染むことができそうでしょ？（FlexのMXMLにもだいぶ似ているよね。）

このサンプルだと、HTMLテンプレートを文字列で渡しているから、そんなに便利だと
感じないかもしれないけど、template にはHTMLエレメントを渡すこともできるんだ。

次のサンプルコードを見て欲しい。

HTML

  <div id="target"></div>
  <script id="template" type="text/x-jquery-tmpl">
    <li>${name}</li>
  </script>

JavaScript

  var data = [ { "name" : "Atsuko Maeda" }, { "name" : "Yuko Oshima" } ];
  $.tmpl( $( "#template" ), data ).appendTo( "#target" );

結果HTML

  <div id="target">
    <li>Atsuko Maeda</li>
    <li>Yuko Oshima</li>
  </div>

こんな風に、$.tmpl()の第一引数にはテンプレートが記述されたHTMLエレメントを渡すこともできるし、
第二引数に配列を渡せば、繰り返し処理もしてくれるようになっているんだ。

テンプレートを使わないでコレと同じコードを書くとなると、HTMLコード文字列と
JavaScriptの変数を文字列結合させながら処理することになるから、可読性も
低いしメンテナンスも大変。それに比べるとだいぶすっきりするから嬉しいね！

簡単なTwitterアプリ

jQuery.tmpl() を使った簡単なTwitter検索アプリをjsdo.itで作ってみたから紹介するよ。

このアプリでは、上記では説明を省略した $.tmpl() の第三引数（options）を使って、
日時から「○秒前」に表示を変換しているよ。詳しくはソースコードを見てみてね。

jQuery.tmpl()を使ってTwitterから検索するアプリ

jQuery.tmpl()を使ってTwitterから検索 - jsdo.it - share JavaScript, HTML5 and CSS

ソースコード

jQuery.tmpl()を使ってTwitterから検索 - jsdo.it - share JavaScript, HTML5 and CSS

と、なんだか変な口調で書いてしまいましたが、今回はここまでです。
最後まで読んでくれてありがとうだよ。
デワデワ。