Backbone.js とかで JavaScript で MVC してるサンプルとかを読んでいると、 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、 サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、 DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。
デザイナーが HTML、プログラマー が JavaScript と担当者を分ける場合には便利なのかな。
[追記] テンプレートエンジンにはテキストベースのもの (Underscore.js template, Mustache など) だけではなく、DOM ベースのもの (PURE, Transparency など) もあるようなので、その場合は当てはまらない。なので、当記事はテキストベースのテンプレートエンジンについての記述。
[追記] 同様の考察
- Micro Templates Are Dead... forget about it. http://blog.nodejitsu.com/micro-templates-are-dead
- Template Engines - Sendhil's Cyber Home http://codingarchitect.wordpress.com/2012/10/22/template-engines/
HTML ファイル内に非表示要素で動的テンプレートを用意し、必要になったら取得してテキストとして編集する。
<script type="text/template" id="item-template">
<div class="view">
<label><%- title %></label>
<input type="checkbox" <%= done ? 'checked="checked"' : '' %> />
</div>
</script>
var template = _.template($('#item-template').html());
this.$el.html(template({
title : model.get('title'),
done : model.get('done')
}));
HTML ファイル内に非表示要素で静的テンプレートを用意し、必要になったら clone() して DOM 要素として編集する。
<div id="item-template" class="template">
<div class="view">
<label class="title"></label>
<input class="done" type="checkbox" />
</div>
</div>
.template {
display: none
}
var $item = $('#item-template .view').clone();
$('.title', $item).text(model.get('title'));
$('.done', $item).prop('checked', model.get('done'));
this.$el.empty().append($item);
インターフェイスが名前+値の集合のみとなるため、JavaScript が HTML を意識する必要がなくなる。 そのため、デザイン変更の影響が JavaScript に波及することが少なくなり、独立して作業しやすい。
HTML と JavaScript という技術単位で担当者を分ける場合、DOM 操作方式だと HTML 担当は静的要素のみとなるが、 テンプレートエンジン方式だと動的要素も HTML 担当に寄せられる。
HTML を煩雑にした代償としてなので、全体としての差し引きをどう考えるか。 また、DOM 操作方式でも jQuery を直接使わずにライブラリ化すれば同程度にシンプルにできそう。
-> 試してみた https://github.com/froop/jquery-dom-tmpl
-> それ目的のライブラリも既にいろいろあった
- PURE: http://beebole.com/pure/
- Transparency: https://github.com/leonidas/transparency
- weld: https://github.com/hij1nx/weld
- plates: https://github.com/flatiron/plates
- distal http://code.google.com/p/distal/
テキストベースで DOM に依存しないため、ブラウザ環境がなくもテストできる。 -> 結果テキストを解析する手間を考えると、結局は DOM に変換した方が楽な気がする
コードに新たな文法を追加することになり、理解する手間が増える。
デザイナーとプログラマーを分けている場合には、デザイナーが文法を覚える必要があるが、
それならいっそ JavaScript を覚えた方が将来につながるし良いかも...?
HTML に異物が混じるので、コーディング時に HTML 単体をブラウザで表示しての確認がしづらい。
ライブラリの導入が必要だが、未だデファクトスタンダードと呼べるものがなく、不安定な土台に依存する危険がある。
毎回テキストから要素を生成するので、clone 方式がページ表示時に1度だけなことと比較するとだいぶ遅そう。
機能に乏しい独自言語を使って分岐とか繰り返しとかを制御するくらいなら、 JavaScript + jQuery の方が多機能で便利だし、IDE の支援もある。