Pro Yearly is on sale from $80 to $50! »

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

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

Cf7eac3e62e372dd097bc581818db760?s=128

Keisuke KITA

June 01, 2016
Tweet

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠