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

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

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

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

疑問 ✦ 通信エラーが起きたら？ ✦ 不正なデータが返ってきたきたら？ ✦ 別のDOMで同じような処理がしたい時は？ ✦ UIデザインを変更したい時は？ ✦
ユニットテストがしたい時は？ ✦ シングルページ化したい時は？ ✦ オフラインでも動くように作るには？

✦ jQueryは素晴らしいものです ✦ でも今時の複雑なWebアプリケーションを綺麗に作れるようにしてくれる訳じゃない ✦ 新しい方法が必要だよね ✦ そうだ、MVCだ！

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

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

Model View Controller ①リクエスト ②問い合わせ ③データ返却 ④描画依頼 ⑤HTML ⑥レスポンス ✦
1リクエストに1レスポンスを返す構造 ✦ JavaScriptだとどうなる？

目的 ✦ アプリケーションの構造化 ✦ モデルの独立 ✦ DOMとロジックの分離 ✦ ビューの抽象化

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

JavaScriptでMVC ✦ サーバサイドMVCの概念をそのまま当てはめてみる ✦ モデルは、サーバから取得したデータ ✦ ビューは、HTML ✦ コントローラは、ユーザの入力を受ける？受ける
のはビュー(HTML）じゃ？ ✦ ビューとコントローラの境界が曖昧

Model Controller View インタラクション操作監視呼び出し

Model Controller View インタラクション操作監視呼び出し ✦ ビューで受けたインタラクションをコントローラが処理する
✦ コントローラがモデルを操作する ✦ ビューがモデルを監視して表示を更新 ✦ ビューとコントローラを分ける必要性が低い ✦ そもそもモデルの変更以外の方法でビューが更新されない

MVP ✦ MVC派生パターンのひとつ ✦ コントローラの代わりにPresenter ✦ ビューはモデルを参照しない ✦ Presenterがモデルを監視して、ビューを更新する

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

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

Model ViewModel View インタラクション監視操作監視呼び出し

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

MV*フレームワーク ✦ 最近はjsのMV*フレームワークが多数存在 ✦ Backbone.js, Knockout.js, Ember.js, Spine.js, Dojo, YUI,
Closure, Extjs... ✦ TodoMVCで色々見られる ✦ http://addyosmani.github.com/ todomvc/

フレームワークの現状 ✦ コントローラを筆頭に、MVCの解釈はまちまち ✦ モデルはサーバサイドで扱うものとほぼ同じ ✦ ビューはコントローラ的なクラスだったり、出力されたHTMLだけを指す場合もある

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

batman.js

batman.js Knockout.js

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

クライアントサイドMVC を実現する基本戦略

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

2.コンポーネントを作る • UIコンポーネントごとにビューのインスタンスを作る • 一覧とその中のアイテムなど • 外部の変数など環境に依存しないように作る ✦ 再利用しやすい ✦
シングルページ化しやすい ✦ UIが変更しやすい ✦ ユニットテストしやすい

3.ビューをモデルに同期 • ビューはモデルのデータを表示する • モデルを監視して、ビューを同期させる ✦ モデルだけ気にすれば良いのでシンプル ✦ 応答性の高いUIが作れる

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

ありがとうございました

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

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

ama-ch

More Decks by ama-ch

Other Decks in Programming

Featured

Transcript