テンプレート

動的なWebアプリケーションを制作する上で、 テンプレートは非常に強力な味方になります。 それだけにテンプレートエンジンはまさに群雄割拠で、 それぞれ個性や独自の趣向をもったライブラリが至る所で開発されています。

基本的な機能

どのテンプレートエンジンも記法こそ様々ですが、提供する機能や使い方は基本的に共通しています。 出力用の関数が用意されており、その関数に元となるテンプレート文字列と、 その中で展開したいデータを格納したオブジェクトを渡します。

例えば Mustache では render メソッドがそれにあたります。

var output = Mustache.render(template, data);

render の中では、テンプレートの記述を元にして data オブジェクトの内容を展開していきます。 例えばこのようなテンプレートが文字列で用意されているとして、

<a href="mailto:{{email}}">{{name}}</a>

これを次のような data オブジェクトで展開したいとします。

var data = {
    name: "John",
    email: "john@example.com"
};

これらを Mustache.render メソッドに渡すと、次のような出力が文字列で返されます。

<a href="mailto:john@example.com">John</a>

制御構文

テンプレートエンジンは、データのコレクションをループで回して全部出力させたり、 条件分岐を行なって true の場合のみ出力させたりといった機能を提供してくれます。

<ul>
    <!-- products（配列）の中のオブジェクトを全て出力 -->
    {{#products}}
    <li>{{name}} : {{price}}</li>
    {{/products}}
</ul>

<!-- isError が true の場合だけ出力 -->
{{#isError}}
<strong>エラーです</strong>
{{/isError}}

これは Mustache での制御構文の例です。（制御構文の書き方はライブラリによって大きく異なります）

テンプレートのコンパイル

Mustache.render のようにテンプレートとデータを渡して出力する方法の他に、 テンプレートをコンパイルしてしまって繰り返し再利用可能な関数にしてしまう事もできます。 コンパイルも多くのテンプレートエンジンで実装されています。

var render = Mustache.compile(template);
var output = render(data);

何度も繰り返し使うようなパーツはコンパイルしてしまったほうが、 人にもパフォーマンスにも優しそうです。

テンプレート文字列

Web開発においてテンプレート文字列の内容は主に HTML であり、JavaScript の文字列リテラルで表現するには長過ぎます。 そこで、次のように script 要素の中に閉じ込めてしまう手法がよくとられます。

<script type="text/template" id="template-profile">
    <div class="profile">
        <div class="name">{{name}}</div>
        <div class="email">{{email}}</div>
    </div>
</script>

<script>
    var template = document.getElementById("template-profile").innerHTML;
</script>

テンプレートエンジンライブラリの色々

どのライブラリも記法・機能が千差万別です。 自分のスタイルや、プロジェクトに合ったテンプレートエンジンを選択しましょう。

Mustache

http://mustache.github.io/

Mustache の特徴として、「多言語に対応している」事と、「ロジックレスである」事が挙げられます。 JavaScript の他にも20言語（2013年12月現在）にわたって実装されていて、 サーバサイドでもフロントでも同じ記法でテンプレートを書くことができます。

<section>
    <h1>{{title}}</h1>
    {{#onsale}}<strong>セール中！</strong>{{/onsale}}
    <ul>
    {{#items}}
        <li>{{name}} : {{price}}</li>
    {{/items}}
    </ul>
</section>

ループや条件分岐は {{#name}} で表現する為、複雑な制御は出来ません。

hogan.js

http://twitter.github.io/hogan.js/

hogan.js は Mustache 互換のテンプレート記法を採用した、Twitter が提供するテンプレートエンジンです。 Mustache と変わらない記述で、本家よりも速く動作するとしています。 出力の仕方は Mustache と変わりありません。

var output = hogan.render(template, data); // 出力
var render = hogan.compile(template); // コンパイル

EJS

Ruby の ERB スタイルでテンプレートを書ける JavaScript のライブラリです。 Mustache系と違って、テンプレート内にそのまま JavaScript コードを記述する事ができます。

<section>
    <h1><%= title %></h1>
    <% if(onsale) { %>
    <strong>セール中！</strong>
    <% } %>
    <ul>
    <% items.forEach(function(item){ %>
        <li><%= item.name %> : <%= item.price %></li>
    <% }) %>
    </ul>
</section>

テンプレートにロジックが必要な場合は非常に強力な味方になりますね。 記述もタグで囲むだけのシンプルなもので、 Ruby 開発者は勿論、PHP の開発者にとっても馴染みのある書き方なのではないでしょうか。

出力に使うメソッド名は上に上げたものと変わりません。

var output = ejs.render(template, data); // 出力
var render = ejs.compile(template); // コンパイル

underscore

http://underscorejs.org/

underscore.js は便利なメソッドを多数提供してくれる大変有難いライブラリですが、 その中の _.template メソッドがテンプレートエンジンとして働いてくれます。

テンプレートの記述は ERB に倣った物で、上の EJS で書いたテンプレートがそのまま _.template で動作します。 出力もコンパイルも同じメソッドで行います。

var output = _.template(template, data); // 出力
var render = _.template(template); // コンパイル

一番の魅力は、この機能が underscore.js の一部でしかないという点だと思います。 他の便利なメソッドを使う為に、あるいは Backbone.js を使う為にインクルードしておいた underscore.js がテンプレートエンジンとしても働き、 新たに別のライブラリを読み込む必要がないのです。

参考資料

• {{ mustache }}
• Hogan.js
• visionmedia/ejs
• Underscore.js

CodeIgniterのビューファイルではプレーンなPHPを書きますが、
Mustacheを読み込んで使用する事で、
より簡単な、見通しの良いビューファイルが出来上がるのでは！ と思いやってみました。

普通にライブラリとして読み込む

配置する

執筆時からMustacheのバージョンが変わり、単ファイルではなくなっているため、手順が大きく変わる可能性があります。 （2012/10/25）

まずはPHP版のMustacheをダウンロードしてきます。

» bobthecow/mustache.php · GitHub

ダウンロードしてきたMustache.phpを、
system/application/libraries/ にコピーします。
ここは、CIのユーザーライブラリを格納しておくお決まりの場所です。
cf) ライブラリの作成 : CodeIgniter ユーザガイド 日本語版

簡単な例

$this->load->library( "mustache" );

echo $this->mustache->render(
    // 第一引数はテンプレート（文字列）
    "Hello, I am {{name}}",
    // 第二引数はテンプレートに渡す連想配列
    array( "name" => "HogeFuga" )
);
// Hello, I am Hogefuga

文字列をテンプレートとして出力してみた例。

ビューファイルを読み込んで出力する

/* コントローラ内 */
$this->load->library( "mustache" );
$this->mustache->render(
    $this->load->view( "example.php", null, true ),
    array(
        "members" => array(
            array( "name" => "太郎" ),
            array( "name" => "花子" ),
            array( "name" => "ジョンソン" )
        )
    )
);

CIおなじみの$this->load->view()の第三引数にtrueを渡すと
結果を文字列で受け取れるのでそれを使います。

<!--ビューファイル（example.php）-->
<ul>
    {{#members}}
    <li>わたしが{{name}}です！</li>
    {{/members}}
</ul>

出力結果

<!--出力結果-->
<ul>
    <li>わたしが太郎です！</li>
    <li>わたしが花子です！</li>
    <li>わたしがジョンソンです！</li>
</ul>

Controllerを拡張してみる

毎度$this->mustache->render()と、$this->load->view()を
両方呼ぶのが面倒だと感じたなら、
コアクラスのControllerを拡張してしまう手もあります。

/*
 * 2.0でおき場所がかわったので注意
 * 1.7.x → system/application/libraries/MY_Controller.php
 * 2.0 → system/application/core/MY_Controller.php
 */
class MY_Controller extends Controller {

    public function __construct(){
        parent::__construct();
        $this->load->library("mustache");
    }

    public function _render( $name, $data = null, $return = false ){
        $res = $this->mustache->render(
            $this->load->view( $name, null, true ),
            $data
        );
        if( $return ) return $res;
        echo $res;
    }
}

上の例では、$this->_render()を使う事で、
$this->load->view()と同じ要領でビューファイルを
Mustacheを通して出力する事が出来ます。

$this->_render(
    "example.php",
    array( "name" => "foobar" )
);

まとめ

単純な出力しか出来ないので場合によっては不向きですが、
他言語とテンプレートの共有が出来るなんていう利点もあったり。
なかなか悪くない組み合わせな気がします。

Mustacheについて

{{ mustache }}

“Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。
テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。

公式を見れば分かるとおり、Mustacheは1言語にとどまらず、
様々な言葉で開発されているテンプレートエンジンです。
知らない言語も入ってたりしますね…。

Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, ActionScript, Java, ColdFusion, Scala, and for node.js.

簡単な使い方

JavaScript版のmustache.jsで簡単な使い方を紹介してみます。

最もシンプルな例

var template = 'Hello, {{name}}!';
var html = Mustache.to_html( template, {
    name:"mach3"
});
alert(html); // "Hello, mach3!"

テンプレートにデータを渡して出力するには、Mustache.to_html()メソッドを使用します。
第一引数はテンプレートの文字列、第二引数は渡すデータ(Object)です。
基本的に{{と}}で囲った物が、テンプレートタグとして認識されます。

条件分岐

var template = '{{#isError}}エラーが発生しました。{{/isError}}';
var html = Mustache.to_html( template, {
    isError:true
});

dataの値がtrueである場合に
{{#data}}と{{/data}}に囲まれた部分が処理されます。
ちなみに条件を逆にしたい場合は、#の代わりに^を使用します。

var template = '{{^isError}}正常です。{{/isError}}';

ループ処理

var template = '<ul>{{#fruits}}<li>{{.}}</li>{{/fruits}}</ul>';
var html = Mustache.to_html( template, {
    fruits:["apple","orange","banana"]
});

記法は条件分岐と同じですが、dataが配列等の可算なオブジェクトだった場合は
その数だけ{{#data}}と{{/data}}に囲まれた部分が処理されます。
{{.}}とする事で現在の値にアクセス出来ます。

var template = '<ul>{{#fruits}}<li>{{name}} : &yen;{{price}}</li>{{/fruits}}</ul>';
var html = Mustache.to_html( template, {
    product:[
        { name:"apple", price:100 },
        { name:"orange", price:75 },
        { name:"banana", price:50 }
    ]
});

もう少し複雑な例です。
配列の値がオブジェクトである時は、ループ内で直接nameやpriceの値にアクセス出来ます。
一覧を出力する場合等はこの方法を選択する事になるでしょう。

コメントアウト

var template = '<p>超音速。{{! この中はスルーされます }}</p>'

{{! … }}とすると、その中身はコメントと認識されてスルーされます。

さらに高度なテンプレートタグについては、GithubのREADME/Manualをご覧ください。

• janl’s mustache.js at master – GitHub
• mustache(5) — Logic-less templates.

必要な機能が十分に備わっているのは勿論、
どの言語を使用しても同じ記法でテンプレートが書けるというのは強みですね。
しかも、特にWeb屋が扱う言語は概ね網羅している様子。
非常に有用なライブラリと思いますが、如何でしょうか。

nje’s jquery-tmpl at master – GitHub
ダウンロードはこちらの「DOWNLOAD SOURCE」より。

軽くデモしてみました。

<ul></ul>

<script id="template" type="text/html">
    <li>{%= name %} : ¥{%= price %}</li>
</script>

<script type="text/javascript">
    var foods = [
        { name:"おにぎり", price:100 },
        { name:"フライドチキン", price:150 },
        { name:"カップラーメン", price:180 }
    ];
    $("#template").render(foods).appendTo("ul");
</script>

結果

• おにぎり : ¥100
• フライドチキン : ¥150
• カップラーメン : ¥180

特徴として、テンプレートの中身をscript要素に挿入しています。
typeがtext/htmlになっているのに注意しましょう。
script要素（#template）に格納されているテンプレートを
foodsを元にレンダリングし、ulに挿入する、という流れです。

HTMLの出力には、renderメソッドを用います。

jQuery.fn.render( data, options )

data : Array or Object

If an array, the template is instantiated once for each item. Otherwise, the template is instantiated only once. （配列ならそれぞれのアイテムに対して、そうでなければ一度だけテンプレートがインスタンス化されます。）

options : Object

An object literal representing optional settings. You can set a rendering and rendered event handler. You also can pass any value and the value will be passed to the template. （オプションの設定を格納したオブジェクトリテラルを受け取ります。”rendering”または”rendered”イベントにコールバックを設定する事が可能。また、テンプレートに渡す値を自由に設定する事も出来ます。)

必殺跳訳。だいたい（!?）こんなかんじの意味でしょう。
渡したいアイテムが一つだけの場合は、以下のような感じで。

var foods = { name:"おにぎり", price:100 };

なお、”rendering”および”rendered”イベントは、
それぞれのアイテムのレンダリング全てに関してコールされるのでご注意を。
foodsの中身が100個あれば100回呼ばれます。

この他にも色んな提案が書かれていましたが、
一番よさげと思ったjQuery.fn.renderをログってみました。
他の提案も気になる方はこちらから。
jQuery Templates Proposal – jquery – GitHub
既存のテンプレートエンジンについても言及していますよ。