Upgrade to Pro — share decks privately, control downloads, hide ads and more …

明日のためのクライアントサイドMVC

Da40bdb49bfb7a3fc9426dacac78a99c?s=47 ama-ch
June 05, 2012

 明日のためのクライアントサイドMVC

Da40bdb49bfb7a3fc9426dacac78a99c?s=128

ama-ch

June 05, 2012
Tweet

Transcript

  1. 明日のための クライアントサイドMVC フロントエンド勉強会 2012/04/17 @ama_ch

  2. ✦ 最近はクライアントサイドでもMVCという言葉 をよく聞くようになりました ✦ クライアントサイドMVCの概要と現状を紹介し ます

  3. よくある書き方 ✦ 「このボタンをクリックしたらサーバからデータ を取得して表示したい」 ✦ jQueryでセレクタにイベントハンドラをセット ✦ イベントハンドラでAjaxリクエスト ✦ コールバックでレスポンスをDOMに挿入

  4. 疑問 ✦ 通信エラーが起きたら? ✦ 不正なデータが返ってきたきたら? ✦ 別のDOMで同じような処理がしたい時は? ✦ UIデザインを変更したい時は? ✦

    ユニットテストがしたい時は? ✦ シングルページ化したい時は? ✦ オフラインでも動くように作るには?
  5. ✦ jQueryは素晴らしいものです ✦ でも今時の複雑なWebアプリケーションを綺麗 に作れるようにしてくれる訳じゃない ✦ 新しい方法が必要だよね ✦ そうだ、MVCだ!

  6. Model View Controller 参照 間接的な参照 サーバサイドMVC

  7. Model View Controller ①リクエスト ②問い合わせ ③データ返却 ④描画依頼 ⑤HTML ⑥レスポンス

  8. Model View Controller ①リクエスト ②問い合わせ ③データ返却 ④描画依頼 ⑤HTML ⑥レスポンス ✦

    1リクエストに1レスポンスを返す構造 ✦ JavaScriptだとどうなる?
  9. 目的 ✦ アプリケーションの構造化 ✦ モデルの独立 ✦ DOMとロジックの分離 ✦ ビューの抽象化

  10. 注意点 ✦ WebアプリケーションのフロントエンドはGUIア プリに近いです ✦ なので、サーバサイドMVCの構造をそのままjs に適用することはできません ✦ MVC自体の定義よりも、MVCをヒントにjsをど う構造化するかが大事です

  11. JavaScriptでMVC ✦ サーバサイドMVCの概念をそのまま当てはめ てみる ✦ モデルは、サーバから取得したデータ ✦ ビューは、HTML ✦ コントローラは、ユーザの入力を受ける?受ける

    のはビュー(HTML)じゃ? ✦ ビューとコントローラの境界が曖昧
  12. Model Controller View インタラクション 操作 監視 呼び出し

  13. Model Controller View インタラクション 操作 監視 呼び出し ✦ ビューで受けたインタラクションをコントロー ラが処理する

    ✦ コントローラがモデルを操作する ✦ ビューがモデルを監視して表示を更新 ✦ ビューとコントローラを分ける必要性が低い ✦ そもそもモデルの変更以外の方法でビュー が更新されない
  14. MVP ✦ MVC派生パターンのひとつ ✦ コントローラの代わりにPresenter ✦ ビューはモデルを参照しない ✦ Presenterがモデルを監視して、ビューを更新 する

  15. Model Presenter View インタラクション 監視 操作 更新 呼び出し

  16. MVVM ✦ MVC派生パターンのひとつ ✦ コントローラの代わりにViewModel ✦ ビューはViewModelに同期する ✦ ビューとViewModelの同期にはデータバイン ディングが使われる

    ✦ jsのデータバインディングは後述
  17. Model ViewModel View インタラクション 監視 操作 監視 呼び出し

  18. Model ViewModel View インタラクション 監視 操作 監視 呼び出し データバインディング

  19. MV*フレームワーク ✦ 最近はjsのMV*フレームワークが多数存在 ✦ Backbone.js, Knockout.js, Ember.js, Spine.js, Dojo, YUI,

    Closure, Extjs... ✦ TodoMVCで色々見られる ✦ http://addyosmani.github.com/ todomvc/
  20. フレームワークの現状 ✦ コントローラを筆頭に、MVCの解釈はまちまち ✦ モデルはサーバサイドで扱うものとほぼ同じ ✦ ビューはコントローラ的なクラスだったり、出力 されたHTMLだけを指す場合もある

  21. MVVMフレームワーク ✦ data-* 属性を使ってHTML(テンプレート)に 情報を埋め込む ✦ jsで解析してHTMLを構築したり、任意のメ ソッドを実行させることで、データバインディン グ機能を提供する ✦

    こういう機能を提供するライブラリは、MVVMと 言われている
  22. batman.js

  23. batman.js Knockout.js

  24. 現状のまとめ ✦ クライアントサイドに「MVC」という素晴らしいラ イブラリがある訳ではない ✦ 既存の MVC/MVP/MVVM などを参考に、簡 単に開発する仕組みが模索されている ✦

    MVCフレームワークの決定版はまだない
  25. クライアントサイドMVC を実現する基本戦略

  26. 1. モデルを定義する • サーバから取得したデータを保持する • バリデーションする ✦ 異常な入出力を検出できる ✦ APIの代わりにlocalStorageなどを使うこと

    で、オフライン対応も現実的になる
  27. 2.コンポーネントを作る • UIコンポーネントごとにビューのインスタンスを作る • 一覧とその中のアイテムなど • 外部の変数など環境に依存しないように作る ✦ 再利用しやすい ✦

    シングルページ化しやすい ✦ UIが変更しやすい ✦ ユニットテストしやすい
  28. 3.ビューをモデルに同期 • ビューはモデルのデータを表示する • モデルを監視して、ビューを同期させる ✦ モデルだけ気にすれば良いのでシンプル ✦ 応答性の高いUIが作れる

  29. まとめ • クライアントサイドMVCとは、Webアプリを構造 化する設計と、それを実現するフレームワークで す • クライアントサイドMVCの目的は、アプリの構造 化とビューの抽象化です • フレームワークはまだ発展途上ですが、基本的

    な概念と戦略は役に立ちます
  30. ありがとうございました