$30 off During Our Annual Pro Sale. View Details »
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
750
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
100
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
590
Repro basketball club
edwardkenfox
0
250
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
150
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
460
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
生成AIシステムとAIエージェントに関する性能や安全性の評価
shibuiwilliam
2
280
小規模チームによる衛星管制システムの開発とスケーラビリティの実現
sankichi92
0
170
段階的に進める、 挫折しない自宅サーバ入門
yu_kod
5
2k
Kill the Vibe?Architecture in the age of AI
stoth
1
130
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
uhyo
1
180
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.9k
命名から始めるSpec Driven
kuruwic
3
720
DDD x Microservice Architecture : Findy Architecture Conf 2025
syobochim
13
7k
経営から紐解くデータマネジメント
pacocat
9
1.7k
AI 時代のデータ戦略
na0
8
2.2k
GitHub を組織的に使いこなすために ソニーが実践した全社展開のプラクティス
sony
18
9.2k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
21k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
Visualization
eitanlees
150
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Scaling GitHub
holman
464
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Statistics for Hackers
jakevdp
799
230k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
690
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!