Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:JavaScriptライブラリ実践活用[厳選111]

書籍転載:JavaScriptライブラリ実践活用[厳選111]

[Underscore.js]テンプレートとオブジェクトから文字列を生成する

2013年6月6日

書籍転載の10本目(書籍内の番号は「101」)。テンプレートとオブジェクトをバインドし、その結果を出力できる「Underscore.js」のテンプレートAPIの使い方を説明。

WINGSプロジェクト 高野 将
  • このエントリーをはてなブックマークに追加

書籍転載について

 本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用[厳選111]』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

Underscore.jsは多くの機能を持つユーティリティライブラリです。テンプレートAPIはテンプレートとオブジェクトのバインドを行い、その結果を出力します。 テンプレートを使うことで、煩雑になりがちな動的なHTML表示を、すっきりとさせることができます。

  • 名称: Underscore.js
  • 分類: フレームワーク
  • URL: http://underscorejs.org/
  • 関連ファイル: underscore-1.4.3.js

Underscore.jsによるテンプレートバインド

 UnderscoreのテンプレートAPIを使うと、テンプレートとオブジェクトのバインディングができます。動作イメージを図101-01に示します。

図101-01 derscore.jsのテンプレートエンジン
図101-01 derscore.jsのテンプレートエンジン

 テンプレートAPI基本的な流れは、_.templateメソッドでテンプレートを事前コンパイルし(1)、コンパイル済みのテンプレートにオブジェクトをバインドする(2)、といったものになります。

 テンプレートの文法について、リスト101-01で説明しましょう。実行結果は図101-02で、リスト101-01内と図中の丸数字はそれぞれ対応しています。

JavaScript
// 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));
}
リスト101-01 Underscore.jsのテンプレートAPIの使用方法(greeter.js)
HTML
<!-- テンプレート外部定義-->
<script type="text/template" id="greeting-template">
  <p><u>Hello <%= name %>!</u></p>
</script>
リスト101-02 テンプレート外部定義(underscore.js-2.template.htmlより
図101-02 サンプル実行結果画面
図101-02 サンプル実行結果画面

 プレースホルダは<%= field_name %>形式で指定します(1)。ただし、この形式はエスケープ処理は行われません。テンプレート内にはスクリプトを記載することもできます(2)。条件分岐などが必要な場合はこの形式を使いましょう。エスケープ処理を行う場合は<% - fieldname %>形式を使用します(3)。普段はこちらを使うほうがよいでしょう。

 テンプレート内でprint関数を使って結果を出力することもできます(4)。動的にテンプレートを変えるような用途で使用します。テンプレートは差し替え可能とするよう、スクリプトとは別のところに定義するのが望ましいです。そのために、scriptタグを使うことができます(5)。外部ファイルに定義することも可能ですが、その際はjQuery.getメソッドなどで処理する必要があります。

※以下では、本稿の前後を合わせて5回分(第8回~第12回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
8. [QUnit]テストコードを実行し、ブラウザで結果を確認する

書籍転載の8本目(書籍内の番号は「111」)。JavaScript用テストランナーの定番ライブラリである「QUnit」の基礎と基本的な使い方を説明。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
9. [Underscore.js]さなざまなコレクション操作を行う

書籍転載の9本目(書籍内の番号は「100」)。ユーティリティ・ライブラリ「Underscore.js」の基礎として、さまざまなコレクション操作する方法を説明。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
10. 【現在、表示中】≫ [Underscore.js]テンプレートとオブジェクトから文字列を生成する

書籍転載の10本目(書籍内の番号は「101」)。テンプレートとオブジェクトをバインドし、その結果を出力できる「Underscore.js」のテンプレートAPIの使い方を説明。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
11. RSpec風の構文でBDD用のテスト・コードを記述する[Jasmine]

書籍転載の11本目(書籍内の番号は「108」)。RSpec風のテスト・コードが書けるBDD(ビヘイビア駆動開発)テスティング・フレームワーク「Jasmine」の基本的な使い方を説明する。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
12. JasmineのSpy機能でテストダブルを作成する

書籍転載の12本目(書籍内の番号は「109」)。Jasmineでテスト対象オブジェクトが持つメソッドの戻り値を固定値に変更したり、そのメソッドが実行されたかどうかを検証したりするために、Spy機能を使用する方法を解説。

サイトからのお知らせ

Twitterでつぶやこう!