jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。
KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。
このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。
例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下のように記述します。data-bind属性の中にViewModelへの束縛のためのパラメータを埋め込み、その裏ではViewModelを適用してインタラクションが実装されます。
<div id="app">
<p><input type="checkbox" data-bind="checked : show" /> toggle</p>
<h1 data-bind="visible : show, text : headerText"></h1>
</div>
<script type="text/javascript">
$(function() {
var viewModel = {
show : ko.observable(true),
headerText : "HelloWorld"
};
ko.applyBindings(viewModel, $("#app")[0]);
});
</script>
もうひとつの特徴としては、jQueryの公式プラグインの一つであるjQuery Templatesプラグインとの連携が容易になっています。templateバインディングで、以下のようにテンプレートのIDを指定すると簡単にテンプレートとの連携もできます。
<div data-bind="template : 'hello'"></div>
<script type="text/x-jquery-tmpl" id="hello">
Hello World
</script>
<script type="text/javascript">
$(function() {
ko.applyBindings({});
});
</script>
とりあえず、これを用いてTODO管理アプリのデモを作ってみました。デザインを整えるためにTwitter Bootstrapを利用しています。宣言的な記述のおかげで、インタラクションのためにコードを長々と書く必要が一切なく、コードが非常にすっきりしています。HTMLやCSSなど含めて160行程度に収められました。
ソースコードを見れば、普通のjQueryでDOM操作をしてインタラクションを実装するスタイルとは、全くちがう書き方になっているのがわかると思います。上のTODOアプリのデモでは、DOM操作を直接記述している部分はひとつもありません。
既存の書き方とは違うので慣れないと最初は若干書きづらい感じもするのですが、KnockoutJSのウェブサイトには、普通のドキュメントやデモだけではなくJavaScriptを実行しながら進められるインタラクティブなチュートリアルがあり、ドキュメントも充実しています。
というわけで簡単にKnockoutJSの紹介をしました。興味を持った方は触ってみては如何でしょうか。
