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
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
240
見た目から始める生産性向上
ikumatadokoro
7
840
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
300
Featured
See All Featured
Faster Mobile Websites
deanohume
299
30k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
A designer walks into a library…
pauljervisheath
200
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
The Cult of Friendly URLs
andyhume
74
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
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の目的は、アプリの構造 化とビューの抽象化です • フレームワークはまだ発展途上ですが、基本的
な概念と戦略は役に立ちます
ありがとうございました