JavaScriptで簡単に動かせるクライアントサイドテンプレートエンジンHandlebars.js

Ajaxが広く浸透し、「非同期的にサーバからデータを取り出しブラウザに表示する」というのは、もう当たり前のことになりました。
しかしながら、サーバから取り出したデータを「どうやって表示するか」というのは、少し難しい問題です。
「サーバサイドでHTMLを生成して返す」というのも手ですが、JSON APIの他にHTML APIを別途作成しなければならず手間がかかります。かと言って、最初からHTMLの中にテンプレートを埋め込んでおくのも難しく･･･と思っていたら、クライアントサイドのテンプレートエンジンの開発がもう随分進んでいるようです。

クライアントサイドでHTML生成できるHandlebars.js

クライアントサイドで動くJavaScriptベースのテンプレートエンジンはいくつかあるようですが、今回は良く使われているような気がするHandlebars.jsを使ってみました。

Handlebars.js: Minimal Templating on Steroids

テンプレートはscriptタグに仕込むだけ

Handlebars.jsの最も簡単な使い方として、<script>タグ内にテンプレートを仕込むことができます。

<script>タグなので、直接HTMLには表示されません。これで、{{name}}の領域を自在に変えられるテンプレートを定義できます。

テンプレートをコンパイルして関数化する。

使う下準備として、この<script>タグ内のテンプレート文字列を、Handlebars#compile()によってコンパイルします。コンパイルされたものは関数となりますので、そこにテンプレートの{{name}}領域に表示する値を含むオブジェクトを投げ込むことで、HTMLが生成されます。

$(function(){
	var nameListTemplate = Handlebars.compile($("#name-list").html());
	$('ul').append(nameListTemplate({
		name: 'katty0324'
	}));
});

これだけです。めちゃくちゃ簡単です。

デモを作りました。

というわけで、とても簡単な例ですが、デモページを作りました。

この<li>タグなどが複雑になってきたときに、大きな力を発揮します。
実際にリリースするときは、事前にテンプレートをプリコンパイルしJavaScriptファイルを生成しておくこともできます。こうすることで、クライアントでコンパイルする時間を節約することができます。
これは良い！