Knockoutの機能とメリット

Knockout は リッチでレスポンシブなUIデザインの開発を助け、比較的大規模な開発であっても簡潔なデータモデルを保つことができる JavaScript ライブラリです。 ユーザの操作による状況の変化や、外部データソースの変更などにより動的に変更されるUIを作る際に、Knockout はよりシンプルかつ保守しやすいように実装する手助けとなります。

主な特徴:

• エレガントな依存トラッキング  -  データモデルが変更される度に、UIの関連付けられた部分を更新します。
• 宣言型 バインディング  -  データモデルとUIを関連付ける、シンプルで明確な方法です。複雑な動的UIも、バインディング・コンテキストを階層化させることで簡単に作成できます。
• 拡張が容易  -  新たなバインディングの仕組みを実装することも、最小限のコード量で実現できます。

その他のメリット

• 純粋な JavaScript ライブラリである  -  サーバサイド,　クライアントサイドの技術を選びません。
• 既存のWebアプリケーションにも投入できる  -  アーキテクチャに大きな変更を必要としません。
• コンパクト　 -  gzip圧縮済みであればおよそ13KB程度です。
• メインストリームのブラウザをサポート  -  ( IE6以降, Firefox2以降, Chrome, Safari 等 )
• ビヘイビア駆動開発に向いている  -  ビヘイビア駆動開発（テストコードが仕様書とほぼ同義となる開発手法）を用いて、新しいブラウザやプラットフォームでの動作検証を簡略化することができます。

Ruby on Rails, ASP.NET MVC, その他の Model-View-* 技術に親しんだ技術者であれば、 MVVM は宣言型構文の「いまのかたち」であると感じるのではないでしょうか。 もしくは、Knockout は本質的に “JSONデータを加工するためのUI” の汎用的な方法と捉えることもできます。

※訳者注

このドキュメントは、オブジェクト指向プログラミングについて基本的な内容を理解されている方を対象としております。 といっても、クラスとオブジェクトがなにかを知っていれば問題ありません。Knockout での開発において継承やポリモーフィズムは極めて有用ですが、本ドキュメントにおいては登場しません。
JavaScript に精通している必要はありません。 また、jQuery を使用した例がいくつか登場します。必須ではありませんが、jQuery に触れておくことが読者にとっての理解の助けになることがあると思います。

どう使えばいいの？

最も手っ取り早く、かつ最も楽しくはじめるには、本家サイトにある インタラクティブ・チュートリアル を試してください。 基本がわかったら、 Live Examples を見て実践に活かしましょう。
(訳注: Live Examples の日本語版は Demo & Tips として翻訳中です。まずはこちらをご覧になることをオススメ致します。)

jQuery (またはPrototype.js,その他) と競合しない？

みんな大好きjQuery！ jQueryは、それらが出てくるまで我慢して使っていた DOM API の優秀な代替品です。 Webページ上のエレメントを操作したり、イベントハンドラを設置したりといったローレベルな部分を扱うライブラリです。 対して Knockout は、それとは別の問題を解決します。

もしも jQuery だけを使って開発しているなら、そのUIは機能が追加される度に複雑に膨れ上がり、メンテナンスに苦労するものになっていくはずです。 例えば、アイテムを追加・削除できるリストを作っているとします。リストに追加できるアイテムは最大５つまでという制約があったとしましょう。 jQuery には ViewModel (要素に紐付くデータモデル) の概念がありません。まず現在のアイテム数を取得するために、TRタグや、 所定のクラスをつけたDIVタグの数を数える必要があります。アイテム数をSPANタグで画面に表示するなら、アイテムが追加・削除されたとき、 毎回SPANタグのテキストを更新しなければなりません。アイテム数が5つに達していたら、「追加ボタン」を使用できなくすることも忘れてはなりません。 「削除ボタン」についても、クリックされる度に“どのDOM要素を変更すべきか”を判断する必要があります。

Knockout はどうちがう？

先ほどの例ですが、Knockout を使えばとても簡単になります。システムに矛盾を生む心配をせずとも、より複雑に拡張していくことができるようになります。 アイテムを JavaScript の配列として定義し、 foreach バインディングを使って配列を TABLE や DIVタグの連続に変換するだけです。 アイテム配列に変更があればUIに反映されます。TRタグを挿入したり削除したりするコードは不要で、常に一貫性が保たれます。 試しに、次のように SPANタグにアイテム数をバインドしてみましょう。

登録されたアイテム: <span data-bind="text: myItems().count"></span>件

これだけです！アイテム数を書き換えるコードは要りません。配列「myItems」に変更があれば自動的に更新されます。 同様に、アイテムが5つに満たないときだけ「追加ボタン」が押せるようにするには、次のように書きます。

<button data-bind="enable: myItems().count < 5">追加</button>

「削除ボタン」を実装する上で、どの要素を削除すべきかを考える必要はなくなります。 ViewModelのプロパティ (ここではアイテム配列) から要素を削除するだけで良いのです。

まとめ：
Knockout は　jQuery やその他のローレベルなライブラリと競合しません。Knockout はデータとUIをリンクさせるハイレベルな機能を補うためのものです。 Knockout は、それ自体は jQuery に依存しませんが、同時に利用することでアニメーションを使ったバインドなど、さらに多くのことが簡単にできるようになります。