ViewModelのダイエット Messengerパターン編

Transcript

1. ViewModelͷμΠΤοτ Messengerύλʔϯฤ

2. Keisuke KITA @kitak • Twitter: kitak • GitHub: kitak •

   FrontEnd Engineer at LINE (ओʹJS) • Blog: https://kitak.hatenablog.jp/

3. ͜ͷεϥΠυͷ໨త • MVVMʹ͍͓ͭͯ͞Β͍ • ViewModel͸େ͖͘ͳΓ͕ͪ • ʮشൃੑͷݱ৅ʯʹண໨ͯ͠MessengerύλʔϯͰ ViewModelΛখ͘͢͞Δɾখ͘͞อͭ • ଞͷAngular.js΍Knockout.jsͷΑ͏ͳMVVMϥΠϒϥ

   Ϧ/ϑϨʔϜϫʔΫʹ΋ద༻Ͱ͖Δ͸ͣ

4. MVVMΞʔΩςΫνϟύλʔϯ • MVC͔Β೿ੜͨ͠GUIΞϓϦέʔγϣϯΞʔΩςΫνϟύλ ʔϯͷͻͱͭ • ΞϓϦέʔγϣϯΛMɾVɾVMʹ෼ׂͯ͠ઃܭɾ࣮૷͢Δ͜ ͱͰɺϝϯςφϏϦςΟ΍։ൃੜ࢈ੑͷ޲্ΛਤΔ • WindowsϓϥοτϑΥʔϜ(.NET)Ͱੜ·Εͨߟ͑ํͰ͕͢ɺ ࠓͰ͸Web

   front-endɺAndroidɺiOSʹ΋޿͕͍ͬͯΔ

5. Vue ͱ MVVMͷؔ܎ A Vue instance is essentially a ViewModel

   as defined in the MVVM pattern — Vue.js Guide • ʮVueΠϯελϯε͸ຊ࣭తʹMVVMύλʔϯͰఆٛ͞Εͯ ͍ΔViewModelͰ͢ʯ

6. MVVMΛֶͿͨΊͷྑ͍ࢿྉ • ugaya40͞Μͷهࣄ͕͓͢͢ΊͰ͢(ݸਓతʹ໨͔Β΢ϩί ͕མͪ·ͨ͠) • ࠓ೔ɺ঺հ͢ΔMessengerύλʔϯ΋͜ͷهࣄ͔ΒͷҾ༻Ͱ ͢ • MVVMͷModelʹ·ͭΘΔޡղ •

   MVVMύλʔϯͷৗࣝ ― ʮMʯʮVʯʮVMʯͷ໾ׂͱ͸ʁ

7. ViewModel͸େ͖͘ͳΓ͕ͪ

8. MVVMΞʔΩςΫνϟύλʔϯ

9. େ͖͍ViewModel͸Կ͕໰୊ʁ • ԿΛ΍͍ͬͯΔͷ͔Θ͔ΓͮΒ͍ • ޙ͔ΒखΛ͍ΕͮΒ͍ • → େ͖ͳViewModel͸ϝϯςφϏϦςΟ͕௿͍ ͳͥViewModel͸େ͖͘ͳͬͯ͠·͏ͷ͔

10. ྫ͑͹ʮشൃੑͷݱ৅ʯ

11. ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά

12. Before: ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά var vm = new Vue({ data: { …

    isOpenedDialog: false, dialogContent: ‘’ }, methods: { openDialog: function() { this.isOpenedDialog = true; }, saveDialogContent: function() { }, closeDialog: function() { this.isOpenedDialog = false; } } }); දࣔͷϑϥάɺμΠΞϩάͰೖྗ͞ΕΔ಺༰Λঢ়ଶͱͯ͠؅ཧ͍ͯ͠Δ

13. Before: ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά var vm = new Vue({ data: { …

    isOpenedDialog: false, dialogContent: ‘’ }, methods: { openDialog: function() { this.isOpenedDialog = true; }, saveDialogContent: function() { }, closeDialog: function() { this.isOpenedDialog = false; } } }); ݩʑViewModelͰϝΠϯͰѻ͍ͬͯͨঢ়ଶ΍ৼΔ෣͍͕μΠΞ ϩάͷঢ়ଶ΍ৼΔ෣͍ͱࠞͬͯ͟ݫ͍͠

14. .NETͷMVVMͰ͸Ͳ͏ߟ͍͑ͯΔ͔ ʼຊ࣭తʹμΠΞϩά΍ը໘ભҠ͸شൃੑͷݱ৅Ͱ͢ʢྫ͑͹ μΠΞϩάΛด͡ΔͱɺͦͷμΠΞϩά্ͷ৘ใ͸͢΂ͯফࣦ ͢΂͖Ͱ͢ʣɻ͔ͩΒɺදࣔ͢ΔͨΊͷ৘ใΛৗʹViewModel ʹεςʔτͱ͍ͯ࣋ͬͯ͠Δͷ͸ɺࣗવͰཧղ͠΍͍࣮͢૷ͩ ͱ͸͍͑·ͤΜ ऴΘͬͨΒফࣦ͢΂͖ঢ়ଶΛViewModelʹৗʹอ࣋͢Δͷ͸ෆࣗવ

15. .NETͷMVVMͰ͸Ͳ͏ߟ͍͑ͯΔ͔ ʼViewModelʹεςʔτΛ͍࣋ͬͯΔܗ͸্هͷͱ͓Γɺෆࣗ વͰ͔ͭࠔ೉ͳ࣮૷Λڧ͍ΒΕͯ͠·͍·͢ɻ౴͑͸γϯϓϧ Ͱ͢ɻViewModel্ʹɺView΁ͷشൃੑͷݱ৅ΛΠϕϯτʹ Αͬͯ௨஌͢Δઐ༻ͷΦϒδΣΫτ͕͋Ε͹Α͍ͷͰ͢ɻView ͸ͦͷΦϒδΣΫτΛσʔλɾόΠϯσΟϯάͯ͠؂ࢹ͢Δػ ߏΛ͍࣋ͬͯΕ͹Α͍ͷͰ͢ɻͦͯͦ͠Ε͕ͦ͜MessengerͰ ͢ɻ

16. Messengerύλʔϯ

17. After: ྫ͑͹͜Μͳ͔Μ͡ var vm = new Vue({ methods: { openDialog:

    function() { this.$emit(‘open-dialog’, function(result) { // μΠΞϩάͷ݁ՌΛड͚औΔίʔϧόοΫ }); } }); ViewModelͷΠϕϯτػߏΛར༻ͯ͠ɺViewModelʹ Messengerͷ໾ׂΛ݉೚ͤ͞Δ(͋͘·Ͱ࣮૷ͷҰྫͰ͢)

18. After: ྫ͑͹͜Μͳ͔Μ͡ <div v-dialog></div> Vue.directive(‘dialog’, function() { this.vm.$on(‘open-dialog’, (callback) =>

    { var dialog = new Dialog(); // Use vue component or constructor defined by Vue.extend dialog.callback = callback; var dialogElement = document.createElement(‘div’); this.el.appendChild(dialogElement); dialog.$mount(dialogElement); }); }); directiveΛ༻ҙͯ͠ɺΠϕϯτ͕ಧ͍ͨΒɺίϯετϥΫλɾ ίϯϙʔωϯτ͔ΒVueΠϯελϯεΛੜ੒͢Δ

19. ·ͱΊ • ViewͱModelͷ஥ཱͪΛ͢ΔViewModel͸ංେԽ͕ͪ͠ • ৭ʑͳཧ༝͕͋Δ͕ɺྫ͑͹ʮشൃੑͷݱ৅ʯʹΑͬͯංେ Խ͢Δ • MessengerύλʔϯΛద༻͢Δ͜ͱͰViewModelΛখ͘͞ อͭ͜ͱ͕Ͱ͖Δ •

    ଞϓϥοτϑΥʔϜͷMVVMࣄ৘Λ஌Δ͜ͱͰɺVueͷίʔ σΟϯάʹ΋׆͔͢͜ͱ͕Ͱ͖·͢

20. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠