そろそろKnockoutJSばどげんかせんと。。。
ザクです。九州の産まれではありません。
でも、KnockoutJSをどげんかせんといかんとおもうちょります。AngularJSの人気がやばいです。日本語の本も出ました。気になってしかたがありません。でも、ザクはKnockoutJS使ってアプリ開発してます。
理由をざっくりあげてくと
- お客さんの環境ではまだまだIE使っている（普通にIE9とかザラ）
- 今エクセルでやってる表計算をウェブアプリでやりたいという要件
- なんでもかんでもJavaScriptでやりたいわけではない（Viewのところだけインタラクティブに）
開発と実行がWindows環境で、作っているのがギョームアプリなので、KnockoutJSでも十分だったりするんですよね。それに、覚えることも少ないです。コントローラありませんし。IEも6まで対応とかしてたりとか。（KnockoutJSの開発者がMicrosoftに勤めてるのが大きいかも）
エクセルっぽいSPA（シングルページアプリケーション）を作るんだったら、KnockoutJSでいんじゃなーいという気がします。
KnockoutJSってなんやろ？
本家サイトを見ると「モデル－ビュー－ビューモデル（MVVM）」パターンだそうです。いみふ。ぶっちゃけ、「エクセルアプリっぽいものをウェブで作るライブラリ」でいいんじゃないですか！
KnockoutJSのキモは、ビューモデルに格納されたデータをビューと紐つける（バインドする）ことです。双方向バインディングというやつです。ビューのフォームからビューモデルのデータをアップデートしたり、JavaScriptでビューモデルのデータを操作したりすることで、それを表示してる部分が自動的に更新したりするということです。わかりやすい例を挙げるならば「エクセルの関数」ですよ。入力用のセルにじゃかじゃか数値を入れていって、ここからここまでの合計（SUM）を出せとかよくやると思いますが、まさにアレなのです。中の数字を変えたら、もちろん合計も変わります。こう考えると、KnockoutJSの使い道も考えやすくないですか？
KnockoutJSといったらObservable
はい、反論ありません。KnockoutJSは全てこれの作り方、使い方次第です。３種類あったりしますね。
- Obserbable：監視する変数に使います。変数の値が一つで良い時ですね。MVC4側のモデルからデータを引っ張ってきて、モデルのプロパティと同名のObserbableをビューモデルで定義してやって、そこに放り込むことが多いです。
- ObserbableArray：これは配列になったObservableです。配列なので、モデル丸ごととか複雑な構造体を放り込めます。モデルのプロパティの一個一個は上に書いたとおりObservableにすることが多いです。配列なので、ループでビューに出力したりしますね。それようのテンプレートの仕組みも用意されています。
- Computed Observable：Observable同士を組み合わせて、より複雑なアウトプットをするやつと考えればいいでしょうか。さっきのSUMなんかはこれを使ってJavaScriptゴリゴリ書いて作ります。一度これを作ってしまうと、この中で使っているObservableの値を変えることで、ここのアウトプットも変えることができます。
KnockoutJSってテスタブルなん？
Yes. ただ、KnockoutJS自体はビューモデルとビュー間の双方向バインディングやるためだけのライブラリだったりするので、テストには別のライブラリを使います。ザクが使ってるのは、Jasmine、RequireJS、Squire.jsですね。テスト自体はJasmineで書いて、ランナーはJasmineそのままとか、Visual Studio2012用のChutzpahなんかも使いますね。フレームワークになってないので、テスト環境は自分で作りこむ必要がありますが、自分好みに環境が作れるのもメリットだったりします。しかし、KnockoutJSのテスト環境に関する情報の少ないこと少ないこと。。。このブログでは、KnockoutJSのテスト方法も詳しく書きますですよ。
