createElementとかやっちゃダメ。Twitter製のテンプレートエンジンを使いましょう。 - hogan.js -

Webページを作るとき、JavaScriptでHTMLを書く時があります。そんな時、document.getElementById("div")とかいって、DOM操作しちゃう時がありますが、そんなことをしてはダメです。絶対。DOM操作は読みにくいし、タグとJavaScriptの2つの方法で画面を作るなんて、メンテナンス性も劣るし、ダメダメです。
画面はHTMLタグで書きましょう。JavaScriptで動的に画面を切り替えたい場合も、テンプレートエンジンを使いましょう。

JavaScriptのテンプレートエンジンにはいくつも実装がありますが、ここではTwitter社が作ったテンプレートエンジン、Hogan.jsをご紹介します。

hogan.jsのセットアップ

HTMLで一つのJavaScriptを読み込むだけです。

htmlから抜粋

<script src="http://twitter.github.com/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>

Hogan.jsのトップページにその時の最新バージョンのURLが乗っているので、最新版を使うとよいでしょう。

サンプル

Githubにサンプルを公開しています。

解説

index.htmlをご覧ください。
テンプレートとなる部分はこちら

<div id="userArea">
	<h2 align="right">USER INFO</h2>
	<div>{{name}}</div>
	<div>{{description}}</div>
</div>

サーバから受け取った情報とテンプレートから、HTMLを出力しているのがこちらです。

$.getJSON("api/user", {
	name : "aUserName"
}, function(data) {
	$("#userArea").html(Hogan.compile($("#userArea").html()).render(data));
});

サーバからはJSONを受け取っています。

サーバから受け取っているJSON

{"name": "aUserName", "description", "This user is a user."}

簡単ですね。JSONのフィールド名と、テンプレート中の{{}}がマッピングされて、出力されます。その機能を持っているのが、

Hogan.compile("テンプレート").render("マッピングするデータ");

です。
簡単ですね。

覚えておくといい、+1の使い方。

幾つか、覚えておくといいHoganの使い方がありますので、ご紹介します。

配列を使ったレンダリング

配列を使うときのサンプルです。

index.htmlからかいつまみ

var template = Hogan.compile($("#messageInner").html());
var renderdArray = data.map(function(message) {
	return template.render(message);
});
$("#messageInner").html(renderdArray.join(" "));

配列の要素一つ一つをレンダリングして、最後に結合しています。

データを加工してレンダリング

日付をformatしてレンダリングしたい場合などに使えます。

index.htmlからかいつまみ

var formatDate = function() {
	return function() {
		var date = new Date(this.createdAt);
		var retdate = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
		return retdate;
	};
}
message.formatDate = formatDate;
template.render(message);

関数を引数に返す関数を定義して、データに追加します。ここでは、messageというデータにformatDateという関数を追加しています。この関数は、テンプレート中で{{formatDate}}として呼び出すことができます。

いかがでしたか？テンプレートエンジンを使って、綺麗にブラウザ上の処理をつくりましょう！