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
260
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
32k
300人の組織でスクラムを運用するための考え方 / Scrum with 300 people
ama_ch
3
1.6k
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
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
230
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
120
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
1
150
AI Ramen Fight
yusukebe
0
100
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
7.9k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
430
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
420
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
130
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
8
6k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
効率的な開発手段として VRTを活用する
ishkawa
1
180
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GitHub's CSS Performance
jonrohan
1031
460k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Producing Creativity
orderedlist
PRO
346
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Embracing the Ebb and Flow
colly
86
4.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
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の目的は、アプリの構造 化とビューの抽象化です • フレームワークはまだ発展途上ですが、基本的
な概念と戦略は役に立ちます
ありがとうございました