どこでも活躍できるテンプレートエンジン「Mustache」

2010年10月05日 12:34 （2013年10月13日 21:54 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

世にテンプレートエンジンは多くあれど、
これ程多くの場所で活躍出来るテンプレートエンジンはなさそうです。
本稿はそんなテンプレートエンジン「Mustache」の試用レビューです。

Mustache

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をご覧ください。

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

コメントを書く