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.9k
明日のためのクライアントサイドMVC
ama-ch
June 05, 2012
Tweet
Share
More Decks by ama-ch
See All by ama-ch
サバティカルふりかえり(2025年5月版)
ama_ch
0
250
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
32k
300人の組織でスクラムを運用するための考え方 / Scrum with 300 people
ama_ch
3
1.5k
Columinity (旧Scrum Team Survey) を使ってチームの継続的な改善活動を始めよう / Scrum Fest Osaka 2024
ama_ch
2
1.4k
スクラムマスターを職能にする挑戦 - 健全なチームを増やし組織をチームワークであふれさせる道のり / RSGT2024
ama_ch
7
31k
アジャイルな組織を作るために開発チーム作成ガイドを書いた話 / Scrum Fest Mikawa 2023
ama_ch
6
3.6k
スクラムフェス仙台2023の見どころを紹介します
ama_ch
0
130
スクラムイベントを効果的な場にするためのファシリテーションの学び方 / Scrum Fest Fukuoka 2023
ama_ch
6
3.2k
【やってみた】スクラムチームを超生産的にするためのパタン・ランゲージ / Scrum Fest Sapporo 2022
ama_ch
2
1.1k
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
PicoRuby on Rails
makicamel
2
140
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
650
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
590
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
97
34k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
NPOでのDevinの活用
codeforeveryone
0
870
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Thoughts on Productivity
jonyablonski
69
4.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Statistics for Hackers
jakevdp
799
220k
Rails Girls Zürich Keynote
gr2m
95
14k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for humans not robots
tammielis
253
25k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building an army of robots
kneath
306
45k
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の目的は、アプリの構造 化とビューの抽象化です • フレームワークはまだ発展途上ですが、基本的
な概念と戦略は役に立ちます
ありがとうございました