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

Transcript

1. 1.

   ViewModel͸σβΠϯ ύλʔϯͷເΛݟΔ͔ EDWARD FOX @Meguro.es 2016/10/13

2. 2.

   Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,

   AWS - Vue.js 2.0, WebAssembly
3. 3.

   repro.io ϞόΠϧΞϓϦ޲͚ ϚʔέςΟϯάπʔϧ

4. 4.

   ϑϩϯτΤϯυʢVue.jsʣ ͱ όοΫΤϯυʢRailsʣ ͷ࣮૷΍ͬͯ·͢

5. 5.

   ࠓ೔࿩͢͜ͱ ϑϩϯτΛ։ൃ͍ͯ͠ΔதͰ ߟ͑ͨViewModelͷઃܭ ʹ͍ͭͯ

6. 6.

   ࠓ೔࿩͞ͳ͍͜ͱ - ಛఆͷϥΠϒϥϦͷ ࣮૷΍ڍಈ - αϯϓϧίʔυ θϩ

7. 7.

   σβύλྑ͍

8. 8.

   - ੹຿ͷ෼ׂ - Մಡੑ - ڞ௨ͷޠኮΛఏڙ

9. 9.

   ϑϩϯτͷϑϨʔϜϫʔΫ΍ ϥΠϒϥϦʹ͸ύλʔϯ ͷద༻͕ଟ͘ݟΒΕΔ

10. 10.

    1. jQuery େ͖ͳFacadeύλʔϯ

11. 11.

    None
12. 12.

    2. MVVMϑϨʔϜϫʔΫ Observerύλʔϯ (Pub-Subύλʔϯ)

13. 13.

    None
14. 14.

    όοΫΤϯυͷ࣮૷Λ ݟΔͱɺ༷ʑͳύλʔϯ͕ ద༻͞Ε͍ͯΔ

15. 15.

    ϞσϧʗΫϥεɺςʔϒϧ ߏ଄ͱͳΔ΂͘߹கͨ͠ ϑϩϯτઃܭʹ͍ͨ͠

16. 16.

    ߴ·ΔViewModel΍ ίϯϙʔωϯτ΁ͷ σβύλద༻ͷػӡ

17. 17.

    ΍ͬͯΈͨ ը૾͖ͭϝοηʔδ ࡞੒ը໘

18. 18.

    None
19. 19.

    - ϝοηʔδͷछྨ͕બ ΂Δ - ϓϨϏϡʔͷOS͕੾Γ ସ͑ΒΕΔ - ϓϨϏϡʔͷॎԣදࣔ ͕੾Γସ͑ΒΕΔ

20. 20.

    1ͭ1ͭͷίϯϙʔωϯτ Λখ͘͢͞ΔͨΊʹ ͢΂ͯ෼ׂ

21. 21.

    ༩͑ΒΕͨೖྗΛݩʹ ҟͳΔVueίϯϙʔωϯτ Λੜ੒͢Δ FactoryύλʔϯͬΆ͍ ࣮૷

22. 22.

    None
23. 23.

    ݁Ռ

24. 24.

    Πϕϯτ஍ࠈ

25. 25.

    ͞·͟·ͳίϯϙʔωϯτ ʹঢ়ଶ͕·͕ͨΓɺ Πϕϯτ͕ແடংʹ ඈͼ߹͏

26. 26.

    ཁ݅ͷมߋʹ ͍͍͚ͭͯͳ͍੬͍࡞Γ

27. 27.

    ViewModelͷσʔλ × UI্ͷૢ࡞ʹجͮ͘ঢ়ଶ × ίϯϙʔωϯτؒͷΠϕϯτ

28. 28.

    ෳࡶੑ͸ֻ͚ࢉʹͳΔ

29. 29.

    ViewModel૚ʹ͸ ద͍ͯ͠Δύλʔϯͱ ͋·Γద͞ͳ͍ύλʔϯ ͕͋Δؾ͕ͯ͘͠Δ

30. 30.

    ͋·Γద͞ͳ͍ = ෳࡶੑͱϝϯςφϯεੑ͕ ௼Γ߹Θͳ͍

31. 31.

    (΋ͪΖΜέʔεόΠέʔε)

32. 32.

    A. ద͍ͯ͠Δύλʔϯ

33. 33.

    - Observer - State - Messenger ͳͲ

34. 34.

    = ৼΔ෣͍ʹجͮ͘ ύλʔϯ

35. 35.

    ͋·Γద͞ͳ͍ύλʔϯ

36. 36.

    - Factory / AbstractFactory - Builder ͳͲ

37. 37.

    = ΦϒδΣΫτͷੜ੒ʹ جͮ͘ύλʔϯ

38. 38.

    ૷০తͳݟͨ໨΍ଐੑɺ ࡉ͔͍ৼΔ෣͍͕มΘΔ ͜ͱ͸͋ͬͯ΋ɺͦͷ ΠϯλʔϑΣʔεΛ௨ͯ͠ Ϣʔβʔ͕࣮ݱ͍ͨ͜͠ͱ ͸େ͖͘มΘΒͳ͍

39. 39.

    ΠϯλʔϑΣʔε ͷཻ౓ͰViewModelΛ෼ׂ ͨ͠ΓɺৼΔ෣͍ʹ ج͍ͨύλʔϯΛద༻͢Δ

40. 40.

    ࠷ۙͷέʔε Ϣʔβʔநग़ϑΟϧλʔ ػೳͷ࣮૷

41. 41.

    None
42. 42.

    None
43. 43.

    None
44. 44.

    ݁Ռ

45. 45.

    - ෳࡶੑ͸ݸผͷ ίϯϙʔωϯτʹดͨ͡ - ཁ݅ͷมߋʹॊೈ ʹͳͬͨ

46. 46.

    σϝϦοτ ݸʑͷίϯϙʔωϯτ͕ ΍΍ϑΝοτʹ

47. 47.

    ·ͱΊ

48. 48.

    ϑϩϯτͷઃܭʹ͓͍ͯɺ ViewModelͷ෼ׂ୯Ґͱ ద༻͢Δύλʔϯͷؔ܎Λ Α͘ߟ͑Δ

49. 49.

    ΠϯλʔϑΣʔε΍ ৼΔ෣͍ʹجཻͮ͘౓ Ͱߟ͑Δ

50. 50.

    ࠓޙ

51. 51.

    fluxΞʔΩςΫνϟͱ ΦϒδΣΫτࢦ޲ͷ ϓϥΫςΟεʹ͍ͭͯ ߟ͍͑ͨ

52. 52.

    Thank you!