手軽にレンダリング！テンプレートエンジンTransparency
はじめに
Transparencyは、Javascriptで記述されたテンプレートエンジンです。クライアント側にて機能します。このテンプレートエンジンは以下の特徴を持っています
- テンプレートをHTMLの一部として記述（DOM構造内に記述）
- 属性値に基づくデータの結合（<%= foo %>や{{foo}}などは不要）
- 繰り返し構造の描画（ループ処理の記述不要）
一般的なJavaScriptテンプレートエンジン（Underscore.js、Mustache、jQuery Templateなど）では、テンプレートをSCRIPTタグ内に記述します。レンダリング時にはテンプレートからHTML文字列を生成します。これらのエンジンを使った場合、HTMLファイルを編集しずらかったり、読み込みが遅れて画面がブレることが多々あります。
一方で、Transparencyを使うと、HTMLを編集しやすい上、レンダリングを直感的かつ手軽に行えます。特に、jQueryやZeptoと併せて使うと効果的です。この記事ではjQueryと組み合わせた場合の使い方をご紹介します。
Transparencyが対応しているブラウザは、IE9以上、Chrome、Firefox、iOSやAndroidのモバイルブラウザとなります。ただし、jQueryと組み合わせると古いブラウザにも対応できるそうです。
初歩的な使い方
最初に、jQuery経由でテンプレートエンジンを使えるように設定しましょう。jQueryとTransparencyのソースコードを読み込んだ後に、以下のコードを実行します。
$.fn.render = Transparency.jQueryPlugin;
これでjQueryのDOM経由、render()メソッドでレンダリングできるようになります。例えば、次のようになります。まずはテンプレートをHTML内に記述しておきます。
<div id="test">
<span class="hoge"></span>
<span data-bind="fuga"></span>
</div>
DOMContentLoadedの後にJavaScriptで以下のコードを実行します。
$('#test').render({
hoge: 'ホゲ',
fuga: 'フガ'
});
すると、上記のテンプレート部分（HTML内部）が以下のように更新されます。
<div id="test">
<span class="hoge">ホゲ</span>
<span data-bind="fuga">フガ</span>
</div>
このように実行コードは非常にシンプルです。もちろん、HTMLタグはエスケープした状 態で表示してくれます。
データ結合
上述のように、Transparencyでは、ある条件に合致する要素にJSONデータを入れ、その要素を更新していきます。その条件とは、JSONのキー値が、以下のいずれかの値と一致することです。
- 要素のid名
- 要素のclass名
- INPUTタグなどのname属性値
- data-bind属性値
ただ、デフォルトのまま使用することはお勧めできません。なぜならば、テンプレート機能と、CSSや入力フォームの内容が強く依存してしまうからです。出来ることなら、これらの内容を分けた方がコードがスッキリとします。
お勧めは、data-bind属性値のみを参照してデータ結合を行うように設定することです。その設定は次のようにします。これだけで、data-bind属性値とJSONキー値の一致のみがレンダリングの条件となります。
Transparency.matcher = function(element, key) {
return element.el.getAttribute('data-bind') === key;
};
繰り返し構造
また、繰り返し構造も簡単に実現できます。以下のテンプレート、JavaScriptコード、出力結果を見て下さい。他の実行方法もありますが、以下の方法が最も理解しやすいと思います。
Tempalte
<ul id="keywords">
<li data-bind="keyword"></li>
</ul>
JavaScript
var keywords = [
{keyword: 'Asial'},
{keyword: 'アシアル'},
{keyword: 'あしある'}
];
$('#keywords').render(keywords);
結果
<ul id="keywords">
<li data-bind="keyword">Asial</li>
<li data-bind="keyword">アシアル</li>
<li data-bind="keyword">あしある</li>
</ul>
Directivesの活用
さらに、出力時に変数を合成したり、タグの属性値を追加することも可能です。これらの場合には、Directivesという機能を使用します。render()メソッドの第二引数にオブジェクトリテラルを渡します。
Template
<div id="person">
<div data-bind="name"></div>
<div data-bind="company"></div>
</div>
JavaScript
var data, directives;
data = {
'id': 10,
'firstName': 'Kazushi',
'lastName' : 'Igawa',
'company': 'Asial'
};
directives = {
name: {
// data-bind="name"の要素内に出力する内容
text: function() {
return this.firstName + ' ' + this.lastName;
},
// data-id="name"の要素にdata-id属性を追加
'data-id': function() {
return this.id;
}
}
};
$('#person').render(data, directives);
結果
<div id="person">
<div data-bind="name" data-id="10">Kazushi Igawa</div>
<div data-bind="company">Asial</div>
</div>
renderメソッドの第三引数にオプションを渡すことで、デバッグ情報をコンソールに表示してくれます。
$('...').render(data, directives, {debug: true});
まとめ
このようにTransparencyを使うと、HTML内にテンプレートを記述しつつ、手軽にレンダリングを実行できます。また、HTMLタグやCSSと、データやJavaScriptコードをきれいに分離することもできます。とても便利ですので、興味があればぜひ使ってみてください。
ちなみに、類似のテンプレートエンジンもいくつか存在します。以下、参考までに。
参考コード
>>HTML
