Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

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

f:id:JHashimoto:20140409044240j:plain

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

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

 

今回は3回目です。3つ目のセッションは、河内俊浩さんの「プロジェクトにMVVMを適用する狙い」でした。

セッション内容

Knockoutjs

  • MVVMを採用
  • 宣言型バインディングによるリアクティブプログラミングのスタイル

MVVMとは

  • Modelとは
    • 定義としては、ドメイン領域のデータを具現化したオブジェクト
  • Viewとは
    • 可視化できる画面
  • ViewModelとは
    • ViewとViewModelの橋渡し

MVVM概念図

  • View
    • ViewModelをデータバインディングで追従
  • ViewModel
    • Viewを知らない
    • Modelのデータを監視可能な状態にする
  • Model
    • ViewにもViewModelにも依存しない

MVVMとデータバインディングのうまみ

  • Viewからロジックを追い出せる
  • Viewのレイアウト変更にロジックが影響が受けない
    • ViewはViewModelを追いかけているだけ
    • ViwModelの使いまわしが可能
  • Viewにデータに置かなくていい
    • データはViewModelで管理して、Modelに反映
    • Ajax通信時にFormからJSONやQueryStringを組み立てる必要がない
  • jQueryオンリーの構成では
    • まず初めに対象のデータを選ぶDOMを選んでから処理を実行することになってしまう

適用事例

  • 製品登録を一画面で実装
    • 部品登録
    • 登録した部品の一覧

jQueryも使用する

  • AjaxのDeferred、Promise大活躍
  • Domを直接指定して操作するScriptは使用しない

手ごたえ

  • メリット
    • Jsonとしてサーバーに投げられるのは楽
    • クライアント側で状態を持つため、複数Windowを開かれた場合の対応が楽
    • データと表示フォーマットの分離
      • BindingでHTMLで処理

セッション資料

KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い

リンク

第1回のリンクです。

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

 

第2回のリンクです。

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

 

第4回のリンクです。

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

 

第5回のリンクです。

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

 

第6回のリンクです。

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