JavaScript用テンプレートライブラリ tempura

JavaScript tempura

JavaScriptのテンプレートライブラリを作りました。その名もtempura（てんぷら）。はい、、語呂だけで選びました。

リポジトリ


Backbone.jsと組み合わせることを想定して作りましたが、特にほかのライブラリには依存していません。サーバーサイドでも動きます。値の参照は、mustache.jsのように{{name}}と書きます。シンタックスの大部分はmustache.jsを踏襲しています。


特徴はというと、値の変換やフォーマットの機能そのものは持っていないのですが、変換やフォーマットを組み込みやすい仕組みをもっています。サンプルコードをみるとわかりやすいです。

var data = {
  name: 'hoge',
  enclose: function(value) { return '[' + value + ']';}
};
var result = tempura.prepare('Hi, {{ name | enclose }}!').render({name:  'hoge'});
console.log(result);

出力はこうなります。

Hi, [hoge]!


ポイントは {{ と }} で囲まれている | です。パイプですね。つまり、nameプロパティの値をenclose関数で処理し、その結果をテンプレートに書いて結果を返しているということをしています。パイプの関数は{{value|f1|f2|f3|…}}と何個でもかけます。
ここでの例は、単に括弧でくくっただけですが、実際にはフォーマットが得意なライブラリを使って日時や数値を処理するのがおすすめです。


ほかにもいくつか特徴あるのですが、ドキュメント（githubのREADME）を書いたのでそちらを参照ください。jsfiddleにいくつかサンプルをおいたので実際に動かしてみるのも簡単です。


それから、せっかくなのでnpmにも登録してみました。node.jsで動きます。

npm install -g tempura

でインストールし、

var tempura = require('tempura');

という感じで使えます。