JavaScriptテンプレートエンジンJsRender 基本のキ

徹底解説JsRender／JsViews 第1回

jQueryを使ってテキストの生成を簡略化する

　JsRenderはjQueryがなくても動きます。しかし、jQueryが読み込まれた環境では、JsRenderはjQueryのプラグインとして機能し、便利な機能が使えるようになります。

jQueryの読み込み

　まずは、jQueryを使う準備をしましょう。HTMLヘッダーに以下の行を追加して、jQueryを読み込んでください。その際、jsrender.jsより先にjquery.jsを読み込むようにします。

リスト5 JsRenderの前にjQueryを読み込む（JsRender_sample4.html）

<!-- jQueryの読み込み -->
<script src="jquery-1.10.2.js" type="text/javascript"></script>

<!-- JsRenderの読み込み -->
<script src="jsrender.js" type="text/javascript"></script>

セレクターを指定したテンプレートオブジェクトの作成

　これによって、先ほどのコードは以下のように表せるようになります。

リスト6 jQueryを使ったテンプレートオブジェクトの作成（JsRender_sample4.html）

// テンプレートが定義されたscript要素を探し、そこからテンプレートオブジェクトを作成
var template = $.templates("#itemTemplate");

// テンプレートとデータモデルを組み合わせてテキストを生成
var result = template.render(item);

　jsviews.templatesメソッドは、jQueryオブジェクト$のメソッドとして呼び出します。この場合、引数も（テンプレートのテキストではなく）テンプレートを示すセレクターを指定できます。

templatesメソッドの省略

　templatesメソッドを省略することも可能です。

リスト7 templatesメソッドの省略（JsRender_sample5.html）

// script要素からテンプレートオブジェクトを作成し、データモデルと組み合わせてテキストを生成
var result = $("#itemTemplate").render(item);

　セレクターを使ってテンプレートを定義したscript要素を指定し、renderメソッドを呼び出します。

　この方法では、renderメソッドを呼び出すごとにテンプレートオブジェクトが作られるので注意してください。テンプレートを一度しか使わない場合は、templatesメソッドを省略するとよいでしょう。

名前付きテンプレートの定義

　複数のテンプレートを何度も使う場合は、名前付きテンプレートを定義すると便利です。

　templatesメソッドを省略する場合、メソッドを呼び出すごとにテンプレートオブジェクトを作成するためオーバーヘッドがかかります。また、templatesメソッドを使ってテンプレートオブジェクトを作成する場合、作成したオブジェクトを変数に保存すればオーバーヘッドを回避できますが、テンプレートの数が増えてくるとそれに応じて変数の数が増えてしまいます。

　名前付きテンプレートを定義すると、JsRenderにテンプレートを登録できます。これにより、テンプレートオブジェクトを管理しなくても、いつでもテンプレートを使えるようになります。

リスト8 名前付きテンプレートの登録（JsRender_sample6.html）

// 名前付きテンプレートを登録
$.templates("myItemTemplate", "#itemTemplate");

// 名前付きテンプレートを使ってテキストを生成
var result = $.render.myItemTemplate(item);

　名前付きテンプレートを登録するには、templatesメソッドの第1引数にテンプレート名を、第2引数にテンプレートのテキストかセレクターを指定します。

　名前付きテンプレートを使うには、$.renderオブジェクトの後に名前付きテンプレート名をメソッドとして指定します。

　このように、jQueryが有効な環境では、スクリプトを大幅に簡略化できます。

まとめ

　今回はJsRenderの基本機能を紹介し、動的にテキストを生成する例を見てきました。JsRenderなどのテンプレートエンジンを使うと、テンプレートを修正するだけでコンテンツを変更できるので、メンテナンスが容易になります。

　また、jQueryのプラグインとしてJsRenderを使う例も見てきました。JsRenderは単体でも動きますが、jQueryのプラグインとして使用することで非常に簡単に使うことができます。

　次回は、JsRenderを使ってHTMLを生成する例を紹介します。

参考資料

• Boris Moore's Blog Dancing with Data
• jsviws.com
• Official jQuery Blog
• jQuery UI planning & design wiki