アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

手軽にレンダリング!テンプレートエンジンTransparency


はじめに


Transparencyは、Javascriptで記述されたテンプレートエンジンです。クライアント側にて機能します。このテンプレートエンジンは以下の特徴を持っています

  • テンプレートをHTMLの一部として記述(DOM構造内に記述)
  • 属性値に基づくデータの結合(<%= foo %>や{{foo}}などは不要)
  • 繰り返し構造の描画(ループ処理の記述不要)


一般的なJavaScriptテンプレートエンジン(Underscore.js、Mustache、jQuery Templateなど)では、テンプレートをSCRIPTタグ内に記述します。レンダリング時にはテンプレートからHTML文字列を生成します。これらのエンジンを使った場合、HTMLファイルを編集しずらかったり、読み込みが遅れて画面がブレることが多々あります。

一方で、Transparencyを使うと、HTMLを編集しやすい上、レンダリングを直感的かつ手軽に行えます。特に、jQueryやZeptoと併せて使うと効果的です。この記事ではjQueryと組み合わせた場合の使い方をご紹介します。

Transparencyが対応しているブラウザは、IE9以上、ChromeFirefoxiOSAndroidのモバイルブラウザとなります。ただし、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