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

Keisuke KITA @kitak • Twitter: kitak • GitHub: kitak • FrontEnd Engineer at LINE (ओʹJS) • Blog: https://kitak.hatenablog.jp/

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

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

Vue ͱ MVVMͷؔ܎ A Vue instance is essentially a ViewModel as defined in the MVVM pattern — Vue.js Guide • ʮVueΠϯελϯε͸ຊ࣭తʹMVVMύλʔϯͰఆٛ͞Εͯ ͍ΔViewModelͰ͢ʯ

MVVMΛֶͿͨΊͷྑ͍ࢿྉ • ugaya40͞Μͷهࣄ͕͓͢͢ΊͰ͢(ݸਓతʹ໨͔Β΢ϩί ͕མͪ·ͨ͠) • ࠓ೔ɺ঺հ͢ΔMessengerύλʔϯ΋͜ͷهࣄ͔ΒͷҾ༻Ͱ ͢ • MVVMͷModelʹ·ͭΘΔޡղ • MVVMύλʔϯͷৗࣝ ― ʮMʯʮVʯʮVMʯͷ໾ׂͱ͸ʁ

ViewModel͸େ͖͘ͳΓ͕ͪ

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

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

ྫ͑͹ʮشൃੑͷݱ৅ʯ

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

Before: ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά var vm = new Vue({ data: { … isOpenedDialog: false, dialogContent: ‘’ }, methods: { openDialog: function() { this.isOpenedDialog = true; }, saveDialogContent: function() { }, closeDialog: function() { this.isOpenedDialog = false; } } }); දࣔͷϑϥάɺμΠΞϩάͰೖྗ͞ΕΔ಺༰Λঢ়ଶͱͯ͠؅ཧ͍ͯ͠Δ

Before: ྫ͑͹ɺ͜Μͳ͔Μ͡ͷμΠΞϩά var vm = new Vue({ data: { … isOpenedDialog: false, dialogContent: ‘’ }, methods: { openDialog: function() { this.isOpenedDialog = true; }, saveDialogContent: function() { }, closeDialog: function() { this.isOpenedDialog = false; } } }); ݩʑViewModelͰϝΠϯͰѻ͍ͬͯͨঢ়ଶ΍ৼΔ෣͍͕μΠΞ ϩάͷঢ়ଶ΍ৼΔ෣͍ͱࠞͬͯ͟ݫ͍͠

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

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

Messengerύλʔϯ

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

After: ྫ͑͹͜Μͳ͔Μ͡ 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ΠϯελϯεΛੜ੒͢Δ

·ͱΊ • ViewͱModelͷ஥ཱͪΛ͢ΔViewModel͸ංେԽ͕ͪ͠ • ৭ʑͳཧ༝͕͋Δ͕ɺྫ͑͹ʮشൃੑͷݱ৅ʯʹΑͬͯංେ Խ͢Δ • MessengerύλʔϯΛద༻͢Δ͜ͱͰViewModelΛখ͘͞ อͭ͜ͱ͕Ͱ͖Δ • ଞϓϥοτϑΥʔϜͷMVVMࣄ৘Λ஌Δ͜ͱͰɺVueͷίʔ σΟϯάʹ΋׆͔͢͜ͱ͕Ͱ͖·͢

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