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
ViewModelはデザインパターンの夢を見るか
Search
Edward Fox
October 13, 2016
Technology
0
220
ViewModelはデザインパターンの夢を見るか
20161013
Meguro.es @ Drecom
http://meguroes.connpass.com/event/32167/
Edward Fox
October 13, 2016
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
740
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
99
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
330
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
450
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
370
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
470
事業開発におけるDify活用事例
kentarofujii
3
840
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
私のMCPの使い方
tsubakimoto_s
0
110
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
190
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
430
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
We Have a Design System, Now What?
morganepeng
53
7.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
How to train your dragon (web standard)
notwaldorf
97
6.3k
KATA
mclloyd
PRO
32
15k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Thoughts on Productivity
jonyablonski
70
4.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Transcript
ViewModelσβΠϯ ύλʔϯͷເΛݟΔ͔ EDWARD FOX @Meguro.es 2016/10/13
Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,
AWS - Vue.js 2.0, WebAssembly
repro.io ϞόΠϧΞϓϦ͚ ϚʔέςΟϯάπʔϧ
ϑϩϯτΤϯυʢVue.jsʣ ͱ όοΫΤϯυʢRailsʣ ͷ࣮ͬͯ·͢
ࠓ͢͜ͱ ϑϩϯτΛ։ൃ͍ͯ͠ΔதͰ ߟ͑ͨViewModelͷઃܭ ʹ͍ͭͯ
ࠓ͞ͳ͍͜ͱ - ಛఆͷϥΠϒϥϦͷ ࣮ڍಈ - αϯϓϧίʔυ θϩ
σβύλྑ͍
- ͷׂ - Մಡੑ - ڞ௨ͷޠኮΛఏڙ
ϑϩϯτͷϑϨʔϜϫʔΫ ϥΠϒϥϦʹύλʔϯ ͷద༻͕ଟ͘ݟΒΕΔ
1. jQuery େ͖ͳFacadeύλʔϯ
None
2. MVVMϑϨʔϜϫʔΫ Observerύλʔϯ (Pub-Subύλʔϯ)
None
όοΫΤϯυͷ࣮Λ ݟΔͱɺ༷ʑͳύλʔϯ͕ ద༻͞Ε͍ͯΔ
ϞσϧʗΫϥεɺςʔϒϧ ߏͱͳΔ͘߹கͨ͠ ϑϩϯτઃܭʹ͍ͨ͠
ߴ·ΔViewModel ίϯϙʔωϯτͷ σβύλద༻ͷػӡ
ͬͯΈͨ ը૾͖ͭϝοηʔδ ࡞ը໘
None
- ϝοηʔδͷछྨ͕બ Δ - ϓϨϏϡʔͷOS͕Γ ସ͑ΒΕΔ - ϓϨϏϡʔͷॎԣදࣔ ͕Γସ͑ΒΕΔ
1ͭ1ͭͷίϯϙʔωϯτ Λখ͘͢͞ΔͨΊʹ ׂͯ͢
༩͑ΒΕͨೖྗΛݩʹ ҟͳΔVueίϯϙʔωϯτ Λੜ͢Δ FactoryύλʔϯͬΆ͍ ࣮
None
݁Ռ
Πϕϯτࠈ
͞·͟·ͳίϯϙʔωϯτ ʹঢ়ଶ͕·͕ͨΓɺ Πϕϯτ͕ແடংʹ ඈͼ߹͏
ཁ݅ͷมߋʹ ͍͍͚ͭͯͳ͍੬͍࡞Γ
ViewModelͷσʔλ × UI্ͷૢ࡞ʹجͮ͘ঢ়ଶ × ίϯϙʔωϯτؒͷΠϕϯτ
ෳࡶੑֻ͚ࢉʹͳΔ
ViewModelʹ ద͍ͯ͠Δύλʔϯͱ ͋·Γద͞ͳ͍ύλʔϯ ͕͋Δؾ͕ͯ͘͠Δ
͋·Γద͞ͳ͍ = ෳࡶੑͱϝϯςφϯεੑ͕ Γ߹Θͳ͍
(ͪΖΜέʔεόΠέʔε)
A. ద͍ͯ͠Δύλʔϯ
- Observer - State - Messenger ͳͲ
= ৼΔ͍ʹجͮ͘ ύλʔϯ
͋·Γద͞ͳ͍ύλʔϯ
- Factory / AbstractFactory - Builder ͳͲ
= ΦϒδΣΫτͷੜʹ جͮ͘ύλʔϯ
০తͳݟͨଐੑɺ ࡉ͔͍ৼΔ͍͕มΘΔ ͜ͱ͋ͬͯɺͦͷ ΠϯλʔϑΣʔεΛ௨ͯ͠ Ϣʔβʔ͕࣮ݱ͍ͨ͜͠ͱ େ͖͘มΘΒͳ͍
ΠϯλʔϑΣʔε ͷཻͰViewModelΛׂ ͨ͠ΓɺৼΔ͍ʹ ج͍ͨύλʔϯΛద༻͢Δ
࠷ۙͷέʔε Ϣʔβʔநग़ϑΟϧλʔ ػೳͷ࣮
None
None
None
݁Ռ
- ෳࡶੑݸผͷ ίϯϙʔωϯτʹดͨ͡ - ཁ݅ͷมߋʹॊೈ ʹͳͬͨ
σϝϦοτ ݸʑͷίϯϙʔωϯτ͕ ϑΝοτʹ
·ͱΊ
ϑϩϯτͷઃܭʹ͓͍ͯɺ ViewModelͷׂ୯Ґͱ ద༻͢ΔύλʔϯͷؔΛ Α͘ߟ͑Δ
ΠϯλʔϑΣʔε ৼΔ͍ʹجཻͮ͘ Ͱߟ͑Δ
ࠓޙ
fluxΞʔΩςΫνϟͱ ΦϒδΣΫτࢦͷ ϓϥΫςΟεʹ͍ͭͯ ߟ͍͑ͨ
Thank you!