As web applications get more dynamic and complex, it's crucial to know what's the fastest way to render content. I have done some research and I am gladly sharing it with you.

高速＆シンプルなJavascriptテンプレートシステム『RND』の紹介。

Ajaxなどを駆使して動的にWebアプリケーションのHTMLを書き換える手法は、最近のWebアプリのトレンドとなっています。
動的にWebアプリケーションのHTMLを書き換える方法としては次があります。

• document.createElementでHTML要素を動的に作成し、appendChildなどでHTMLのDOMツリーに追加する方法
• element.innerHTMLによってHTMLを直接書き換える方法
• テンプレートシステムの利用

これらの方法のそれぞれのベンチマークを取ると、
document.createElementによる方法が最も遅く、element.innerHTMLの３倍も時間がかり、結果としてelement.innerHTMLを書き換える方法が最も速いようです。

かといって、element.innerHTMLによって直接ＨＴＭＬを埋め込む記述は、HTMLが所々に散在してコードが読みにくくなったりしてしまい、テンプレートの再利用も出来ません。

innerHTMLで直接HTMLを挿入している例）
  elem.innerHTML = '<div id="'+idname+'">'+htmlvalue+'</div>';

※緑部分、HTMLと変数が混在していて、読みづらく、再利用もできない。そして、こういったコードが所々に散在してしまうのでコードの全体的な可読性が下がる。

ということでテンプレートシステムの登場。

テンプレートシステムといっても、次のような関数を一個定義するだけです。

function RND(tmpl, ns) {
  var fn = function(w, g) {
    g = g.split("|");
    var cnt = ns[g[0]];
    for(var i=1; i < g.length; i++)
      cnt = eval(g[i])(cnt);
    return cnt || w;
  };
  return tmpl.replace(/%(([A-Za-z0-9_|.]*))/g, fn);
}

関数を用意したら、次のコードを記述します。

var tmpl = '<a href="%(link)">%(value)</a>';
var name_space = {'link': 'http://amix.dk', 'value': 5.5};
alert( RND(tmpl, name_space) );

tmpl がHTMLテンプレート変数で、name_space が割り当てる変数です。
テンプレートの書式は、%(変数名) のようにします。割り当てる変数はjson形式で定義し、関数に渡します。
このJavaScriptプログラムを実行すると、<a href="http://amix.dk">5</a> がアラート出力されます。

関数を通すだけなので、パフォーマンスも出るようです(サイトのベンチマーク結果参照)。
テンプレートシステム部分のコード量も関数一個と、少ないのでサイズとしても気にならないですね。
そして、テンプレートと変数を分けることにより、データとHTMLの分離ができ、ソースコードの可読性を上げることができます。
更に、テンプレート部分が他の部分でも再利用できる形になりました。

上記の小さなサンプルではそのメリットを感じ取りにくいかもしれませんが、
テンプレートを別のファイルに定義しておいたり、クラスのメンバ変数に持たせておくことで便利に使えそう。

Javascript 開発規模が大きくなり、コードの肥大化がおこるにつれこういった開発手法が必要になってきますね:-)

関連エントリ
JavaScriptで動くテンプレートエンジン:JSmarty