読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「第一回 knockoutjsハンズオン」に行ってきた(その5「knockoutでグラフを描こう!Viewを極めるMVVM」by 鈴木健太さん)

f:id:JHashimoto:20140409044240j:plain

5/17に、「第一回 knockoutjsハンズオン」に行ってきたので、6回に分けて勉強会の内容を紹介します。

初心者向けJavaScript入門からテラ・コーティングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する! : ATND

 

今回は5回目です。5つ目のセッションは、鈴木健太さんの「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 考

リンク

第1回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その1「JavaScript入門」by 坂巻瑞穂さん) - プログラマーな日々

 

第2回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その2「ASP.NETの変遷とKnockout.js」by 日本マイクロソフト松崎剛さん) - プログラマーな日々

 

第3回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その3「プロジェクトにMVVMを適用する狙い」by 河内俊浩さん) - プログラマーな日々

 

第4回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その4「タイトル未定」by 田中豪さん) - プログラマーな日々

 

第6回のリンクです。

「第一回 knockoutjsハンズオン」に行ってきた(その6 ハンズオン) - プログラマーな日々