ViewModelはデザインパターンの夢を見るか

20161013
Meguro.es @ Drecom
http://meguroes.connpass.com/event/32167/

Transcript

1. ViewModel͸σβΠϯ ύλʔϯͷເΛݟΔ͔ EDWARD FOX @Meguro.es 2016/10/13
2. Edward Fox - Developer @ Repro Inc. - RoR, JavaScript, AWS - Vue.js 2.0, WebAssembly
3. repro.io ϞόΠϧΞϓϦ޲͚ ϚʔέςΟϯάπʔϧ
4. ϑϩϯτΤϯυʢVue.jsʣ ͱ όοΫΤϯυʢRailsʣ ͷ࣮૷΍ͬͯ·͢
5. ࠓ೔࿩͢͜ͱ ϑϩϯτΛ։ൃ͍ͯ͠ΔதͰ ߟ͑ͨViewModelͷઃܭ ʹ͍ͭͯ
6. ࠓ೔࿩͞ͳ͍͜ͱ - ಛఆͷϥΠϒϥϦͷ ࣮૷΍ڍಈ - αϯϓϧίʔυ θϩ
7. σβύλྑ͍
8. - ੹຿ͷ෼ׂ - Մಡੑ - ڞ௨ͷޠኮΛఏڙ
9. ϑϩϯτͷϑϨʔϜϫʔΫ΍ ϥΠϒϥϦʹ͸ύλʔϯ ͷద༻͕ଟ͘ݟΒΕΔ
10. 1. jQuery େ͖ͳFacadeύλʔϯ
12. 2. MVVMϑϨʔϜϫʔΫ Observerύλʔϯ (Pub-Subύλʔϯ)
14. όοΫΤϯυͷ࣮૷Λ ݟΔͱɺ༷ʑͳύλʔϯ͕ ద༻͞Ε͍ͯΔ
15. ϞσϧʗΫϥεɺςʔϒϧ ߏ଄ͱͳΔ΂͘߹கͨ͠ ϑϩϯτઃܭʹ͍ͨ͠
16. ߴ·ΔViewModel΍ ίϯϙʔωϯτ΁ͷ σβύλద༻ͷػӡ
17. ΍ͬͯΈͨ ը૾͖ͭϝοηʔδ ࡞੒ը໘
19. - ϝοηʔδͷछྨ͕બ ΂Δ - ϓϨϏϡʔͷOS͕੾Γ ସ͑ΒΕΔ - ϓϨϏϡʔͷॎԣදࣔ ͕੾Γସ͑ΒΕΔ
20. 1ͭ1ͭͷίϯϙʔωϯτ Λখ͘͢͞ΔͨΊʹ ͢΂ͯ෼ׂ
21. ༩͑ΒΕͨೖྗΛݩʹ ҟͳΔVueίϯϙʔωϯτ Λੜ੒͢Δ FactoryύλʔϯͬΆ͍ ࣮૷
23. ݁Ռ
24. Πϕϯτ஍ࠈ
25. ͞·͟·ͳίϯϙʔωϯτ ʹঢ়ଶ͕·͕ͨΓɺ Πϕϯτ͕ແடংʹ ඈͼ߹͏
26. ཁ݅ͷมߋʹ ͍͍͚ͭͯͳ͍੬͍࡞Γ
27. ViewModelͷσʔλ × UI্ͷૢ࡞ʹجͮ͘ঢ়ଶ × ίϯϙʔωϯτؒͷΠϕϯτ
28. ෳࡶੑ͸ֻ͚ࢉʹͳΔ
29. ViewModel૚ʹ͸ ద͍ͯ͠Δύλʔϯͱ ͋·Γద͞ͳ͍ύλʔϯ ͕͋Δؾ͕ͯ͘͠Δ
30. ͋·Γద͞ͳ͍ = ෳࡶੑͱϝϯςφϯεੑ͕ ௼Γ߹Θͳ͍
31. (΋ͪΖΜέʔεόΠέʔε)
32. A. ద͍ͯ͠Δύλʔϯ
33. - Observer - State - Messenger ͳͲ
34. = ৼΔ෣͍ʹجͮ͘ ύλʔϯ
35. ͋·Γద͞ͳ͍ύλʔϯ
36. - Factory / AbstractFactory - Builder ͳͲ
37. = ΦϒδΣΫτͷੜ੒ʹ جͮ͘ύλʔϯ
38. ૷০తͳݟͨ໨΍ଐੑɺ ࡉ͔͍ৼΔ෣͍͕มΘΔ ͜ͱ͸͋ͬͯ΋ɺͦͷ ΠϯλʔϑΣʔεΛ௨ͯ͠ Ϣʔβʔ͕࣮ݱ͍ͨ͜͠ͱ ͸େ͖͘มΘΒͳ͍
39. ΠϯλʔϑΣʔε ͷཻ౓ͰViewModelΛ෼ׂ ͨ͠ΓɺৼΔ෣͍ʹ ج͍ͨύλʔϯΛద༻͢Δ
40. ࠷ۙͷέʔε Ϣʔβʔநग़ϑΟϧλʔ ػೳͷ࣮૷
44. ݁Ռ
45. - ෳࡶੑ͸ݸผͷ ίϯϙʔωϯτʹดͨ͡ - ཁ݅ͷมߋʹॊೈ ʹͳͬͨ
46. σϝϦοτ ݸʑͷίϯϙʔωϯτ͕ ΍΍ϑΝοτʹ
47. ·ͱΊ
48. ϑϩϯτͷઃܭʹ͓͍ͯɺ ViewModelͷ෼ׂ୯Ґͱ ద༻͢Δύλʔϯͷؔ܎Λ Α͘ߟ͑Δ
49. ΠϯλʔϑΣʔε΍ ৼΔ෣͍ʹجཻͮ͘౓ Ͱߟ͑Δ
50. ࠓޙ
51. fluxΞʔΩςΫνϟͱ ΦϒδΣΫτࢦ޲ͷ ϓϥΫςΟεʹ͍ͭͯ ߟ͍͑ͨ
52. Thank you!