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

http://vuejs-meetup.connpass.com/event/31139/ のLTのスライドです

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ViewModel͸େ͖͘ͳΓ͕ͪ
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. Messengerύλʔϯ
    

    View Slide

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

    View Slide

18. 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 Slide

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

    View Slide

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

    View Slide