5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、６回に分けて勉強会の内容を紹介します。
初心者向けJavaScript入門からテラ・コーティングまで！JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する！ : ATND
今回は５回目です。５つ目のセッションは、鈴木健太さんの「knockoutでグラフを描こう！Viewを極めるMVVM」でした。
セッション内容
デモサイト
KO-SVG DEMO
よくある12星座占い
全体的な構造
- Knockout ES5を使用
- ECMA Script 5
- ko.track(self);でプロパティの変更を監視
- ko.defineProperty(computedの変わり）
データモデル
- ConsellationResultオブジェクト（星座の占い結果）
- parametersプロパティ
- Parameterオブジェクト（運勢の数だけ保持）
- nameプロパティ（運勢の名前）
- valueプロパティ（運勢の値）
Good Parts
- SVG
- SVGだからといって特別なことは何もない
- HTMLにバインドするのと同じ
- コンバータパターン
- 変換Functionをグローバルに定義しておき、Viewで変換させつつバインディングする
- 例えば、値から座標への変換
- ViewModelにViewごとに変わるような見せ方に関する仕事を任せたくない
- ViewModelを使いまわそうとしたときこれがベター
- テンプレート化
- SVGでもなんでもテンプレート化できる
- 部品化のメリット
- どこでも再利用できる
- CSSで見た目は外側から変えられる
- tranformで拡大、縮小など自由自在
まとめ
- MVVMは Presentation Domain Separetionのための概念
- Knockoutjsで開発するときに以下を意識するとうまくいく
- ViewModel
- 何を提供するの
- View
- どう提供するの
セッション資料
ko-svg
Knockoutで グラフを描こう! View を極める MVVM 考
リンク
第１回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その１「JavaScript入門」by 坂巻瑞穂さん） - プログラマーな日々
第２回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その２「ASP.NETの変遷とKnockout.js」by 日本マイクロソフト松崎剛さん） - プログラマーな日々
第３回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その３「プロジェクトにMVVMを適用する狙い」by 河内俊浩さん） - プログラマーな日々
第４回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その４「タイトル未定」by 田中豪さん） - プログラマーな日々
第６回のリンクです。
「第一回 knockoutjsハンズオン」に行ってきた（その６ ハンズオン） - プログラマーな日々
