2010年10月5日

jQuery に Templates Plugin と Data Link Plugin が追加

jQuery に Templates プラグイン(jquery-tmpl)と Data Link プラグイン(jquery-datalink)が追加された。
これらは普通のプラグインとは少し違っていて、jQuery オフィシャル。JavaScript を書いていると処理と HTML が綺麗に分離できなかったりすることがしばしばあるけど、これらのプラグインを使うとコードの整理がしやすくなるのではないかと思う。ありがとう Microsoft!

http://api.jquery.com/category/plugins/templates/
http://api.jquery.com/category/plugins/data-link/

ドキュメントも整っていて使い始めるのにもそんなに戸惑わずに済みそう。ただしまだリリースされていない jQuery1.4.3 に依存しているようなのでもうちょっと我慢。まだ触っていないものの、プロポーサルの時から目をつけていたのでちょっと説明も書いておく。
間違っているところがあるかも知れないのでその辺についてはごめんなさい。先に謝っておきます。

Data Link プラグイン

個人的には Data Link プラグインのほうが地味ながら重要な機能を担っていると思うのでこっちから紹介。
これはその名のとおりデータをリンクするプラグイン。データをサーバサイドと JavaScript サイドでシームレスに行き来させるのは地味に面倒くさいが、その辺の面倒な部分をある程度綺麗に書けるようにしてくれるので、構造が整理されて読みやすいソースになりそう。

最初に出てくる例がわかりやすいので2つを引用してみる。
var person = {};
$("form").link(person);
$("[name=firstName]").val("NewValue"); // Set firstName to a value.
person.firstName; // NewValue

// User types a value into the form field.
person.firstName; // firstName now contains the user-ented value.

// Set the object property.
$(person).data("firstName", "NewValue");
// The change is automatically pushed to the input element.
$("[name=firstName]").val(); // The value is now "NewValue"
person という空のオブジェクトを作って、それを form タグとリンクさせる。これだけで input に対しての変更が person からきちんと読み出せるし、person に対する変更が input に反映されるようになる。
非常に地味なのだが素晴らしい。

person に対するデータの割り当てが $(person).data() になるのが若干エレガントさに欠ける。取得だけの用途なら person.firstName と書けてスマートだけど、読み書きするなら読み出しも $(person).data('firstName') にしたほうが jQuery らしい気もする。

Templates プラグイン

HTMLをテンプレート化できるプラグイン。これも名前の通り。
PHP を知っていればコードと HTML が分離されていないソースのヤバさは知っていると思うけど、JavaScript にも同じような問題が付きまとう。

今までも JsTemplate とか json-template とか Smarty を使っている人なら使いたくなる Jarty とか、JavaScript でテンプレート機能を提供してくれるライブラリはいくつかあった。ただ JavaScript 特有の問題として複数行に渡る文字列を書くのが大変ということもあって、使うにしても若干ハードルが高くなりがちだった(JsTemplate はちょっと特殊だけど)。

ところが WebGL での shader の書き方のように、HTML 内に text/javascript ではないタイプで script タグを記述することで、画面上には表示されない複数行に渡るテキストデータを HTML に埋めこむことができる。
この辺の仕組みを上手く使ってサンプルが書かれている Templates プラグインはいい感じにテンプレート使用のハードルを引き下げてくれそうな気がする。テンプレート用のタグも each, if, else などの基本的なものや tmpl という別なテンプレートと融合させられるタグもあるので入り組んだ構造のテンプレートも作りやすそう。

テンプレートは JavaScript とサーバサイド側の言語と両方で使われる可能性があって、記述方法が全く違うと使う側が混乱する原因になる可能性がある(特に、テンプレートはプログラマだけが触るとは限らない)。
その辺の問題をある程度無効化できる Jarty や、必要最低限の機能に絞って特定の言語への依存を排除して、Python や golang でも使える json-template に比べると若干課題を抱えているようにも思える。Templates プラグインの書式に従ってテンプレート処理が出来るライブラリが他の言語にも出てくるともっと状況が好転するかな、とか思う。

2010-10-06 - 追記
http://blogs.msdn.com/b/chack/archive/2010/10/05/jquery-templates-data-link-globalization-accepted-as-official-jquery-plugins.aspx
とてもわかりやすく紹介してくれている記事がありました。流し読みしかしてなかったので気付いてなかったですがテンプレートは 1.5 で統合されるんですね。これは楽しみ。
Clip to Evernote