JSON を Template-Toolkit で展開する Jemplate - naoyaのはてなダイアリー

Jemplate is a templating framework for Javascript that is built over Perl's Template Toolkit (TT2).
Jemplate parses TT2 templates using the TT2 Perl framework, but with a twist. Instead of compiling the templates into Perl code, it compiles them into Javascript.

かぜぶろさんや宮川さんがブックマークしてたので気になってちょっと見てみた新着モジュールの Jemplate。なかなか面白いです。Template-Toolkit で記述したテンプレートのテンプレート変数に JavaScript 上の JSON を展開させることができるというもの。

つまり、

<h1>[% title %]</h1>

というテンプレートに対して

{ title : 'My Homepage' }

という JSON を渡すと、[% title %] が展開されて "My Homepage" になると。

仕組みが結構面白くって、まず最初に jemplate というコマンドラインツールで TT のテンプレートを JavaScript に変換(コンパイル)して、その JavaScript を HTML でロードする、という具合。template/body.html というテンプレートを用意して以下のようにテンプレートを記述して、

<h1>[% title %]</h1>

<p>[% description %]</p>

これを jemplate コマンドでコンパイルする。

$ jemplate --compile template/* > js/jemplate01.js

このコンパイルされたコードと、Jemplate ディストリビューションに付属する Jemplate.js を HTML からロードして、Jemplate.process() にテンプレート名と JSON を渡す。

<html>
<head>
<title>Jemplate!</title>
<script type="text/javascript" src="../js/Jemplate.js"></script>
<script type="text/javascript" src="../js/jemplate01.js"></script>
</head>
<body>

<script type="text/javascript">
document.writeln(
  Jemplate.process(
    'body.html',
    {
      title : 'うはー夢がひろがりんぐ！', 
      description : 'Jemplate!'
    }
  )
);
</script>

</body>
</html>

すると、body.html テンプレートに JSON が渡って展開されて、ご所望の出力が得られますと。

Jemplate の機能はまだ変数を展開するぐらいしかサポートされていないようですが、これがループやその他さまざまな機能を使えるようになったら熱いですね。サーバーサイドのアプリケーションから JSON を返してその JSON を TT で展開して画面描写ってことができる。Ajax アプリケーションを書くのが相当楽になりそう。

期待age。