Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
明日のためのクライアントサイドMVC
Search
ama-ch
June 05, 2012
Programming
3
2.6k
明日のためのクライアントサイドMVC
ama-ch
June 05, 2012
Tweet
Share
More Decks by ama-ch
See All by ama-ch
スクラムマスターを職能にする挑戦 - 健全なチームを増やし組織をチームワークであふれさせる道のり / RSGT2024
ama_ch
5
1.6k
アジャイルな組織を作るために開発チーム作成ガイドを書いた話 / Scrum Fest Mikawa 2023
ama_ch
4
2.9k
スクラムフェス仙台2023の見どころを紹介します
ama_ch
0
65
スクラムイベントを効果的な場にするためのファシリテーションの学び方 / Scrum Fest Fukuoka 2023
ama_ch
5
2.2k
【やってみた】スクラムチームを超生産的にするためのパタン・ランゲージ / Scrum Fest Sapporo 2022
ama_ch
1
820
幸福を実現するための人生戦略 / hajimete_it
ama_ch
0
100
スクラムマスターの「観察」スキルを掘り下げる / Scrum Fest Niigata 2022
ama_ch
0
2.4k
スクラムフェス仙台やるよ!
ama_ch
0
180
ハックマンに学ぶ良いチームの作り方 / What is an effective work team
ama_ch
1
3.1k
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
240
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
6
910
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
650
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
260
Elm Form Validation
bkuhlmann
0
510
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
Folding Cheat Sheet #3
philipschwarz
PRO
0
120
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
237
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Happy Clients
brianwarren
92
6.4k
Code Review Best Practice
trishagee
55
15k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Debugging Ruby Performance
tmm1
70
11k
Teambox: Starting and Learning
jrom
128
8.4k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
BBQ
matthewcrist
80
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
明日のための クライアントサイド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の目的は、アプリの構造 化とビューの抽象化です • フレームワークはまだ発展途上ですが、基本的
な概念と戦略は役に立ちます
ありがとうございました