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とFlux
Search
Shotaro Watanabe
August 14, 2015
Programming
8
2.1k
フロントエンドMVCとFlux
SED 〜SIROK技術勉強会 #3「フロントエンドMVCとFlux(仮)」〜
https://atnd.org/events/68943
Shotaro Watanabe
August 14, 2015
Tweet
Share
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
170
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.4k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
680
slogパッケージの深掘り
integral0515
0
150
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
720
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
500
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
33
9.4k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
180
MCPで実現できる、Webサービス利用体験について
syumai
7
2.1k
Jakarta EE Meets AI
ivargrimstad
0
330
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Docker and Python
trallard
45
3.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
BBQ
matthewcrist
89
9.7k
Faster Mobile Websites
deanohume
308
31k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Fireside Chat
paigeccino
37
3.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
ϑϩϯτΤϯυMVCͱFlux SED | SIROKٕज़ษڧձ 2015/08/13
None
About Me • @sangotaro • Frontend Engineer • SIROK: 2ϲ݄
FluxΓ͍ͨͷͰɺFlux ڭ͢Δ!
·ͣMVCͷ෮श
MVC
MVC • GUIΞϓϦΛ࣮͢ΔͨΊͷσβΠϯύλʔϯ • αʔόʔαΠυMVCੜܥ • ͍ΖΜͳྲྀ͕͋ΔͷͰݴٴ͠ͳ͍
Model σʔλͱϏδωεϩδοΫΛ୲ɻσʔ λͷมߋΛViewʹ௨͢Δɻ View σʔλΛදࣔ͢Δɻ௨ৗ֊ߏΛʹ ͳΔɻ Controller Ϣʔβ͔ΒͷೖྗΛϞσϧʹ͑Δɻ Ҿ༻ݩ: https://ja.wikipedia.org/wiki/
Model_View_Controller
JSϥΠϒϥϦͷ༗໊Ͳ͜Ζ • Backbone.js • AngularJS • Knockout.js • Ember.js ͦΕͧΕݫີʹMVCͰͳ͍ͷͰɺ૯শͱͯ͠MVW
or MV* ͱݺΕΔɻ
Backbone.jsͰ • Backbone.View: ControllerɺView • Backbone.Model: Model
GUIΞϓϦͷઃܭ
GUIΞϓϦઃܭͷϙΠϯτ ෳࡶͳ"ঢ়ଶ"ʹͲ͏ཱ͔ͪ͏͔
ঢ়ଶ(State)??? • ঢ়ଶ = UIͷঢ়ଶ • σʔλͦͷͷͰͳ͍❌ • ͲͪΒJSONͷΑ͏ͳσʔλߏͰදݱͰ͖Δ
σʔλͱঢ়ଶ ex. ࡏݿ͕0ͷͱ͖ɺߪೖϘλϯ͕ԡͤͳ͍ σʔλ => ࡏݿ0ɹঢ়ଶ => Ϙλϯ͕ແޮ let data
= { inventory: 0 } let state = { buyButton: 'disable' }
͠͞ • ཧ͢Δঢ়ଶ͕ଟ͗͢Δ! • Ͳ͜Ͱঢ়ଶΛཧ͢Δ͔" • ͩΕ͕ঢ়ଶΛมߋ͢Δ͔#
Backbone.jsͰͬͯΈΔͱ
ެࣜͷਤ Ҿ༻ݩ: http://backbonejs.org/
γϯϓϧͰΑͦ͞͏?
࣮ࡍෳࡶͩ͠ɺܾΊΔ͜ͱଟ͍!
େྔͷViewɺେྔͷModel͕૬ޓʹؔ࿈͢Δ • Model-VIewؒͷํσʔλϑϩʔ • ViewɺࢠView • ෳࡶ͕രൃ
UIͷঢ়ଶͲ͜ʹ͋Δͷ͔ • Model or View(View or ࢠView) • ͦͦҙࣝͯ͠ঢ়ଶΛཧ͍ͯ͠Δ͔? •
Model͕ͨͩͷσʔλModelʹͳͬͯͳ͍͔? • ViewͰෳࡶͳσʔλॲཧΛ͍ͯ͠ͳ͍͔ʁ
ͱֶ͍͑ͼ͋Δ
Backbone.js͕ڭ͑ͯ͘Εͨ͜ͱ
Viewͷ෦Խ • ࠶ར༻ՄೳͳView • ࠷ۙྲྀߦΓͷίϯϙʔωϯτࢦ • React • Angular •
Web Components
Φϒβʔόʔύλʔϯ • Model͕มߋ͞ΕͨΒΠϕϯτൃՐ • ViewModelͷΠϕϯτࢹ Ҿ༻ݩ: http://backbonejs.org/
Flux
Fluxͱ • Facebook͕ఏএͨ͠GUIΞϓϦͷΞʔΩςΫνϟ • ϥΠϒϥϦͰͳ͍ • ࣮͕ཚཱ • Unidirectional data
flow (୯ํσʔλϑϩʔ) • ΦϒβʔόʔύλʔϯͰ࣮ݱ
Fluxͷొਓ • Action • Dispatcher • Store • View
༗໊ͳਤ Ҿ༻ݩ: https://facebook.github.io/flux/docs/overview.html#content
༗໊ͳਤ2 Ҿ༻ݩ: https://github.com/facebook/flux/tree/master/examples/flux-todomvc/
ߏྫ(TODOΛ࡞Δ͚ͩͷΞϓϦ) src ├── actions │ └── todo-action-creators.js ├── app-constants.js ├──
app-dispatcher.js ├── app.js ├── stores | └── todo-store.js └── views ├── todo-controller-view.react.js └── todo-item.react.js
Action & Action Creator Fluxͷσʔλϑϩʔͷ։࢝! Action λΠϓͱσʔλΛͭΦϒδΣΫτ(like Πϕϯτ) Action Creator
ActionΛੜ͢Δϔϧύʔؔ(or ϝιου)
// todo-action-creators.js import AppDispatcher from '../app-dispatcher'; import AppConstants = from
'../app-constants'; var TodoActionCreators = { create: function(text) { AppDispatcher.dispatch({ actionType: AppConstants.TODO_CREATE, // type text: text // data }); } } export default TodoActionCreators;
Dispatcher • άϩʔόϧͳEventEmitterΈ͍ͨͳͷ • ActionΛStoreʹಧ͚Δ(Φϒβʔόʔύλʔϯ) // ActionΛىಈ(Pub) like EventEmitter#emit AppDispatcher.dispatch(action);
// ίʔϧόοΫͷొ(Sub) like EventEmitter#on AppDispatcher.registor(callback);
Store • σʔλͱঢ়ଶΛཧ(ঢ়ଶཧϩδοΫ͋Δ) • ActionͰ͔͠มߋͰ͖ͳ͍(No Setters, only gettes) • DispatcherʹίʔϧόοΫΛొ͢Δ
// todo-store.js let _todos = {}; // private data //
setter function create(text) { let id = (+new Date()).toString(); _todos[id] = { id: id, text: text }; } class TodoStore extend EventEmitter { constructor() { // TODO: Register dispatcher callback } // getter getAll() { return _todos; } emitChange() { this.emit('change'); } } export default new TodoStore;
// Register dispatcher callback AppDispatcher.register(action => { switch(action.actionType) { case
AppConstants.TODO_CREATE: let text = action.text.trim(); if (text !== '') { create(text); this.emitChange(); // Emit change event } break; default: // no op } });
View • ex. React componets • Storeͷ"ঢ়ଶ"มԽͷΈΛࢹ • Action CreatorΛίʔϧ
• େ͖͚ͯ͘2छ • Controller View • View
Controller View & View Controller View • ϧʔτ(ʹ͍ۙ)View • StoreͷมԽΛࢹ
• ࣗͱࢠViewΛϨϯμϦϯά View • ྲྀΕ͖ͯͨσʔλΛݩʹϨϯμϦϯ ά
ͬ͘͟Γ·ͱΊΔͱ
ActionΛىʹσʔλ͕Ұप͢Δ Ҏ্
MVCͱͲ͕͜ҧ͏?
MVCͱͷҧ͍ • ొਓͦΕͧΕͷׂ͕໌֬ • Unidirectional data flow
Viewͷσʔλϑϩʔ • View͔ΒࢠViewͷҰํ௨ߦ • ٯͰ͖Εආ͚Δ • ࢠ͔ΒͷόέπϦϨʔ͠ͳ͍ • ActionΛੜ͢Δ͖
ঢ়ଶStore͕ͭ • Viewࣗঢ়ଶΛมߋ͠ͳ͍ • Storeʹ͋Δঢ়ଶread-only • ViewActionੜ͢Δ͚ͩ
StoreͱModelͷҧ͍ • StoreModelΑΓׂ͕໌֬ • (σʔλ͚ͩͰͳ͘)ঢ়ଶͭ • ActionͰ͔͠มߋͰ͖ͳ͍
࣮͕γϯϓϧ • Pub/Sub͕໌֬ʹ͍ͯ͠Δ
ͿͬͪΌ͚ΦϨΦϨMVCͰ?
FacebookͷΦϨΦϨMVCઆ • ͨͿΜͦ͏ • ৽͍͠ొਓΛఆٛͯ͠໌֬ͳׂΛ༩͑ͨ • Fluxͱ͍͏MV*ܥͱࢥΘΕͳ͍ωʔϛϯά
࠷ۙͷFlux
facebook/fluxͷෆຬ • ͱ͖ͬͭʹ͍͘ • DispacherͨͩͷEventEmitterͰ? • Action (Creator)ͨͩͷؔͰ? • γϯάϧτϯ
• αʔόʔαΠυͰࠔΔ • ςετ͠ʹ͍͘
ͦΕͰUnidirectional data flow ͍͍ΑͶ
Flux࣮ • Flux Comparison • URL: https://github.com/voronianski/flux-comparison • ελʔ্Ґ⭐ •
Redux • Reflux • Alt
·ͱΊ
Flux࠷ߴ͔ͩΒΖ͏ React͡Όͳͯ͘Ͱ͖ΔΑ
࣍ճ
None