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
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
31k
300人の組織でスクラムを運用するための考え方 / Scrum with 300 people
ama_ch
3
1.5k
Columinity (旧Scrum Team Survey) を使ってチームの継続的な改善活動を始めよう / Scrum Fest Osaka 2024
ama_ch
2
1.2k
スクラムマスターを職能にする挑戦 - 健全なチームを増やし組織をチームワークであふれさせる道のり / RSGT2024
ama_ch
7
30k
アジャイルな組織を作るために開発チーム作成ガイドを書いた話 / Scrum Fest Mikawa 2023
ama_ch
5
3.5k
スクラムフェス仙台2023の見どころを紹介します
ama_ch
0
120
スクラムイベントを効果的な場にするためのファシリテーションの学び方 / Scrum Fest Fukuoka 2023
ama_ch
6
3.1k
【やってみた】スクラムチームを超生産的にするためのパタン・ランゲージ / Scrum Fest Sapporo 2022
ama_ch
2
1.1k
幸福を実現するための人生戦略 / hajimete_it
ama_ch
0
160
Other Decks in Programming
See All in Programming
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.3k
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
120
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
13
5.1k
AI Agents with JavaScript
slobodan
0
200
趣味全開のAITuber開発
kokushin
0
180
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
1.2k
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
110
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
160
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
420
データベースエンジニアの仕事を楽にする。PgAssistantの紹介
nnaka2992
9
4.4k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Bash Introduction
62gerente
611
210k
Designing for Performance
lara
606
69k
A Tale of Four Properties
chriscoyier
158
23k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Code Review Best Practice
trishagee
67
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Pragmatic Product Professional
lauravandoore
33
6.5k
The Language of Interfaces
destraynor
157
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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の目的は、アプリの構造 化とビューの抽象化です • フレームワークはまだ発展途上ですが、基本的
な概念と戦略は役に立ちます
ありがとうございました