書籍転載：JavaScriptライブラリ実践活用［厳選111］
［Underscore.js］テンプレートとオブジェクトから文字列を生成する
書籍転載の10本目（書籍内の番号は「101」）。テンプレートとオブジェクトをバインドし、その結果を出力できる「Underscore.js」のテンプレートAPIの使い方を説明。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
Underscore.jsは多くの機能を持つユーティリティライブラリです。テンプレートAPIはテンプレートとオブジェクトのバインドを行い、その結果を出力します。 テンプレートを使うことで、煩雑になりがちな動的なHTML表示を、すっきりとさせることができます。
- 名称： Underscore.js
- 分類： フレームワーク
- URL： http://underscorejs.org/
- 関連ファイル： underscore-1.4.3.js
Underscore.jsによるテンプレートバインド
UnderscoreのテンプレートAPIを使うと、テンプレートとオブジェクトのバインディングができます。動作イメージを図101-01に示します。
テンプレートAPI基本的な流れは、_.templateメソッドでテンプレートを事前コンパイルし（1）、コンパイル済みのテンプレートにオブジェクトをバインドする（2）、といったものになります。
テンプレートの文法について、リスト101-01で説明しましょう。実行結果は図101-02で、リスト101-01内と図中の丸数字はそれぞれ対応しています。
|
// 1 シンプルなバインド
function simple(name) {
// テンプレートを定義
var compiled = _.template("<p>Hello <%= name %>!</p>");
// バインドするオブジェクト定義
var user = { "name": name };
// テンプレート適用
$("#simple").html(compiled(user));
}
// 2 テンプレート内スクリプト
function fromList(name) {
// テンプレートを定義
var compiled = _.template("<ul>"
+ "<% _.each(list, function(item) { %>"
+ " <li><%= item.greeting %> <%= item.name %>!</li>"+ "<% }); %>"
+ "</ul>");
// バインドするリストを含むオブジェクトを定義
var source = {
list: [
{ "greeting": "Good morning", "name": name },
{ "greeting": "Hello", "name": name },
{ "greeting": "Good evening", "name": name }
]
};
// テンプレート適用
$("#from-list").html(compiled(source));
}
// 3 エスケープ処理
function withEscape(name) {
// テンプレートを定義
var compiled = _.template("<p><b>Hello <%- name %>!</b></p>");
// バインドするオブジェクト定義
var user = { "name": "<" + name + ">" };
// テンプレート適用
$("#with-escape").html(compiled(user));
}
// 4 print関数使用
function withPrint(name) {
// テンプレートを定義
var compiled = _.template("<% print('<p><i>Hello ' + name + '!</i></p>') %>");
// バインドするオブジェクト定義
var user = { "name": name };
// テンプレート適用
$("#with-print").html(compiled(user));
}
// 5 テンプレート外部定義
function outerDefinition(name) {
// テンプレートを取得
var template = $("#greeting-template").text();
// テンプレートを定義
var compiled = _.template(template);
// バインドするオブジェクト定義
var user = { "name": name };
// テンプレート適用
$("#out-def").html(compiled(user));
}
|
|
<!-- テンプレート外部定義-->
<script type="text/template" id="greeting-template">
<p><u>Hello <%= name %>!</u></p>
</script>
|
プレースホルダは<%= field_name %>形式で指定します（1）。ただし、この形式はエスケープ処理は行われません。テンプレート内にはスクリプトを記載することもできます（2）。条件分岐などが必要な場合はこの形式を使いましょう。エスケープ処理を行う場合は<% - fieldname %>形式を使用します（3）。普段はこちらを使うほうがよいでしょう。
テンプレート内でprint関数を使って結果を出力することもできます（4）。動的にテンプレートを変えるような用途で使用します。テンプレートは差し替え可能とするよう、スクリプトとは別のところに定義するのが望ましいです。そのために、scriptタグを使うことができます（5）。外部ファイルに定義することも可能ですが、その際はjQuery.getメソッドなどで処理する必要があります。
※以下では、本稿の前後を合わせて5回分（第8回～第12回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
8. ［QUnit］テストコードを実行し、ブラウザで結果を確認する
書籍転載の8本目（書籍内の番号は「111」）。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。
9. ［Underscore.js］さなざまなコレクション操作を行う
書籍転載の9本目（書籍内の番号は「100」）。ユーティリティ・ライブラリ「Underscore.js」の基礎として、さまざまなコレクション操作する方法を説明。
10. 【現在、表示中】≫ ［Underscore.js］テンプレートとオブジェクトから文字列を生成する
書籍転載の10本目（書籍内の番号は「101」）。テンプレートとオブジェクトをバインドし、その結果を出力できる「Underscore.js」のテンプレートAPIの使い方を説明。
11. RSpec風の構文でBDD用のテスト・コードを記述する［Jasmine］
書籍転載の11本目（書籍内の番号は「108」）。RSpec風のテスト・コードが書けるBDD（ビヘイビア駆動開発）テスティング・フレームワーク「Jasmine」の基本的な使い方を説明する。
12. JasmineのSpy機能でテストダブルを作成する
書籍転載の12本目（書籍内の番号は「109」）。Jasmineでテスト対象オブジェクトが持つメソッドの戻り値を固定値に変更したり、そのメソッドが実行されたかどうかを検証したりするために、Spy機能を使用する方法を解説。
