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

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. ありがとうございました