VBScript meets Vue.js 〜20年越しの出会い〜

5/23にヒカラボで登壇してお話させてもらった、一休.com レストランのレガシー改善でVue.jsを導入した体験談です

webpack導入話も併せてどうぞ
https://speakerdeck.com/japboy/legacy-development-meets-webpack

Transcript

1. VBScript meets
   Vue.js
   ʙ20೥ӽ͠ͷग़ձ͍ʙ
   

   View Slide

2. ࣗݾ঺հ
   দݪ༎հɹ@matzz(ࣾ಺) / @simezi9(֎෦)
   • 2015೥9݄ Ұٳೖࣾ
   • 2016೥4݄ʙ Ұٳ.com Ϩετϥϯ iOSΞϓϦ ΤϯδχΞ
   • 2017೥2݄ʙ Ұٳ.com Ϩετϥϯ ϑϩϯτΤϯυΤϯδ
   χΞ
   • WebϑϩϯτΤϯυ୲౰ʹͳ͔ͬͯΒ3ϲ݄
   

   View Slide

3. උ඼ߪೖ΍Γա͗Δਓ
   

   View Slide

4. ͓͖ͯ͞
   

   View Slide

5. ࠓ೔ͷ͸ͳ͠
   • Ұٳ.com Ϩετϥϯͷ͜Ε·Ͱ
   • ϨΨγʔΛͲ͏΍ͬͯղফ͍͔ͯ͘͠
   • ͳͥVueΛબΜ͔ͩ
   • ࣮ࡍʹVueΛ౤ೖͨ͠Ҋ݅ͷ࿩
   

   View Slide

6. Ұٳ.comϨετϥϯ͸Ͳ͏ϨΨγʔ͔ʁ
   

   View Slide

7. ϨΨγʔཁૉᶃݴޠ
   • 96೥ੜ·ΕͷݴޠVBScript
   • ݴޠػೳͷਐԽ͸99೥Ͱࢭ·͍ͬͯΔ
   • (ࢀߟ IE5: 99೥ / IE6: 01೥)
   • jsonͷγϦΞϥΠζɾσγϦΞϥΠζͰࠔΔ͜ͱ΋ɾɾɾ
   • ϑϩϯτΤϯυ͸jQueryͷΈ
   • ཁٻ͞ΕΔػೳ͕ෳࡶʹͳΓݫ͘͠ͳ͖ͬͯͨ
   

   View Slide

8. ϨΨγʔᶄઃܭ
   • ܧ͗଍͞Εͯ਺ઍߦʹ๲ΒΜͩڞ௨CSS/JS
   • ͍ΖΜͳϑΝΠϧ͔ΒjQueryͷΠϕϯτ͕࢓ࠐ·Ε͍ͯͯશମͷ೺Ѳ͕೉͍͠
   • σβΠϯमਖ਼ͷӨڹ͕Ͳ͜ʹى͖Δͷ͕Θ͔ΓͮΒ͍
   • VBSͷதͷ͋ͪͪ͜ʹ அยԽͯ͠ຒΊࠐ·ΕͨHTML
   • ViewͱϩδοΫ͕ࠞࡏ͍ͯͯ͠ϝϯςφϯεੑ͕ѱ͍
   

   View Slide

9. Ͱ͸Ͳ͏͢Δͷ͔ʁ
   

   View Slide

10. վળͷํ਑
    • ಋೖ͞ΕͨwebpackͷΤίγεςϜΛ׆༻͢Δ
    • طଘͷϏδωεϩδοΫ͚ͩΛVBSʹ࢒͠ɺը໘ඳը
    ʹؔ͢ΔॲཧΛঃʑʹϑϩϯτΤϯυʹد͍ͤͯ͘
    • ϑϩϯτΤϯυΛ෼཭͢Ε͹ɺࠓ౓͸αʔόʔα
    ΠυͷϦϓϨʔε΋΍Γ΍͘͢ͳΔ
    • ϑϩϯτΤϯυͰ͸ϖʔδຖʹίʔυͷಠཱੑΛߴ
    ͯ͘͠ɺमਖ਼ͷӨڹൣғΛ࠷খʹ͢Δ
    

    View Slide

11. վળͷํ਑
    ͜ΕΛ ͜͏͢Δ
    ͦΖ͹Μ(VBS)͚ͩͰؤு͖ͬͯͨ෦෼ʹ
    ศརͳి୎(ϑϩϯτΤϯυ)Λ͚ͭ
    ໾ׂ͝ͱʹ࢖͍෼͚Δ
    ʢͦͯͦ͠Ζ͹Μ΁ͷґଘΛͲΜͲΜݮΒ͢ʣ
    

    View Slide

12. ٻΊΔ΋ͷ
    • JSͷςϯϓϨʔτΤϯδϯ
    • ݱࡏͷWebpackΛલఏͱͨ͠ΤίγεςϜͱ૬ੑ͕͍͍͜ͱ
    • ͍··ͰαʔόʔαΠυͰ΍͖ͬͯͨը໘දࣔϩδοΫΛදݱ
    ͢Δʹ଍Δ͚ͩͷػೳ͕͋Δ͜ͱ
    

    View Slide

13. Vue.js
    

    View Slide

14. ͳͥVue.jsʹ͔ͨ͠
    • ީิ͸ReactͱVue
    • े෼ͳར༻࣮੷ͱυΩϡϝϯτɾ৘ใʢ೔ຊޠʣ͕ἧ
    ͍ͬͯΔ
    • (Reactʹൺ΂)طଘͷίʔυΛঃʑʹஔ͖׵͍͑ͯ͘ͷ
    ʹ޲͍͍ͯΔʢ఻ฉʣ
    • (Reactʹൺ΂)ֶशۂઢ͕ͳͩΒ͔Ͱɺͭ·͖ͮʹ͍͘
    ʢ఻ฉʣ
    

    View Slide

15. ຊ౰ʹVue.jsͰ͍͍ͷ͔ʁ
    • গͨ͠͠Β·ͨ৽͍͠ΞʔΩςΫνϟʔ͕ग़͖ͯͯ
    Vue͕ഇΕΔͷͰ͸ͳ͍͔ʁ
    • ͍ͣΕʹͤΑطଘͷΞʔΩςΫνϟ͸ͦΖͦΖݶքʹདྷ͍ͯΔ
    • ։ൃޮ཰Λ্͍͔͛ͯͳ͍ͱɺαʔϏεվળͷεϐʔυ͕ग़ͳ͍
    • ϑϩϯτΤϯυͷҠΓมΘΓ͕ܹ͍͔͠Βͱ༷ࢠݟΛ͍ͯͨ͠Β͍
    ͭ·Ͱ΋มΘΕͳ͍
    • ͦ͏ͯ͠10೥Ҏ্VBS+jQueryͰؤு͖ͬͯͨɻ
    

    View Slide

16. ຊ౰ʹVue.jsͰ͍͍ͷ͔ʁ
    • େࣄͳͷ͸ɺ৽͍ٕ͠ज़͕ग़ͯ΋Ҡߦ͍͚ͯ͠Δ౔
    ୆Λ࡞Δ͜ͱ
    • ʮVue͕ૉ੖Β͍͔͠Β࠾༻ʯͱ͍͏ΑΓ΋ʮݱ࣌఺ͰϨΨγʔΛ
    վળ͢ΔͳΒVue͕ྑͦ͞͏ʯͱ͍͏ؾ࣋ͪ
    • 1೥ޙ2೥ޙʹ΋ͬͱ͍͍ٕज़͕ग़ͨͳΒ৐Γ׵͍͚͑ͯΔΑ͏
    ʹલྫΛ࡞͍ͬͯ͘
    

    View Slide

17. ࣮ࡍͷҊ݅
    

    View Slide

18. ࣮ࡍͷҊ݅
    • εϚϗαΠτͷ༧໿ը໘ϦχϡʔΞϧ
    • UIͷશମతͳϦχϡʔΞϧ
    • ༧໿ೖྗը໘ʹભҠ͢Δࡍʹඞͣදࣔ͞Ε͍ͯͨϩάΠϯը໘Λഇࢭ
    • ඇձһ༻ͷ༧໿ը໘Λձһ༻ͷ༧໿ը໘ʹ౷߹
    

    View Slide

19. αʔόʔαΠυ
    • ը໘දࣔʹඞཁͳ৘ใΛϑϩϯταΠυʹ౉͚ͩ͢ʹ͢Δ
    • viewͷ੍ޚϩδοΫ͸Ұ੾ॻ͔ͳ͍
    vueͷΤϯτϦϙΠϯτ vueʹσʔλΛૹΔJSΦϒδΣΫτ
    

    View Slide

20. ϑϩϯτΤϯυ
    

    View Slide

21. ߏ੒
    • FW : Vue.js
    • ݴޠ : ESNext + CSS Next + CSS Module
    • ϓϥάΠϯྨ
    • vee-validateʢϑΥʔϜόϦσʔγϣϯʣͷΈ
    • vuex(ReduxͷVue༻࣮૷ʣ΍vue-router(ϧʔςΟϯά)͸ෆ࢖༻
    • SPAʹ͍ͨ͠ͱ͍͏धཁ͕ͳ͘ɺϓϨʔϯͳVueͷػೳͰे෼ը໘͕࡞ΕΔͱ൑
    அ
    • jQuery
    • ajaxʹͷΈ࢖༻
    • jQuery3.0͔ΒPromises/A+ʹ४ڌͨͨ͠ΊɺES Nextͷasync/await΋ར༻Ͱ͖Δ
    

    View Slide

22. ࣮૷ํ਑
    • ίϯϙʔωϯτͷࡉ෼Խ͸͋·Γͤͣγϯϓϧʹ࡞Δ
    • νʔϜϝϯόʔͷͱ͖ͬͭ΍͢͞Λ༏ઌ
    • ࠶ར༻͍ͨ͠ίϯϙʔωϯτ͕࣮ࡍʹग़͖͔ͯͯΒখ͞
    ͘෼ׂ͢Δ
    • HTMLʢ.vue) ΍CSSʹ͍ͭͯ͸1ϑΝΠϧ͕ଟগେ͖͘
    ͳͬͯ΋ؾʹ͠ͳ͍
    • ϑΝΠϧͷείʔϓ͕ด͍ͯ͡Ε͹͍͍
    

    View Slide

23. طଘͷ࣮૷(jQuery)
    addEventListener
    addEventListener
    HTML͔Βॲཧ͕ḷΕͳ͍
    

    View Slide

24. ৽͍࣮͠૷(vue)
    ॲཧͷྲྀΕΛ௥͍΍͘͢
    
    
    HTMLΛݟΕ͹Կ͕ى͜Δ͔෼͔Δ
    

    View Slide

25. ࣮૷αϯϓϧ
    چ࣮૷
    ৽࣮૷
    EventListenerͷ௥Ճ
    ঢ়ଶ੍ޚ
    DOMૢ࡞
    JS HTML
    EventͷൃՐ
    σʔλόΠϯσΟϯά
    

    View Slide

26. ৺͕͚ͨ͜ͱ
    • σβΠφʔ΁ͷαϙʔτΛͱʹ͔͘खް͘͢Δ
    • JSͷΤίγεςϜͷதʹHTML/CSSΛ૊ΈࠐΉ͜ͱʹͳΔͷͰɺΤϯδ
    χΞ͕ؤுͬͯҾͬுΔඞཁ͕͋Δɻʢ࠲੮͕͍ۙͱͱͯ΋ָʣ
    • ΤϯδχΞ͸ެࣜͷυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δͱɺ୭͔͕࢖͍࢝ΊΕ
    ͹ࣗવͱ࢖͍࢝ΊΔͷͰಛʹؾʹ͠ͳ͔ͬͨ
    • ϏδωεαΠυʹ৽͍ٕ͠ज़ͷՁ஋Λྗઆ͠ͳ͍
    • Ͳͷٕज़ΛͲͷΑ͏ʹ࢖͏͔͸ΤϯδχΞ͕੹೚Λ΋ܾͬͯఆ͢Δ
    • ϏδωεαΠυͱ࿩͞ͳ͍ͱ͍͚ͳ͍͜ͱ͸ଞʹ͋ΔʢKPIɺαΠτͷ࢖
    ͍΍͢͞ɾɾɾetcʣ
    

    View Slide

27. ݁Ռ
    

    View Slide

28. 5/18ϦϦʔε
    • ༧໿৘ใͷೖྗUI͕γϯϓϧͰ࢖͍΍͘͢
    • ϩάΠϯ΍ձһొ࿥ͷ൥Θ͕ܰ͠͞ݮ
    • ༧໿ͱಉ࣌ʹϩάΠϯɾձһొ࿥͕Ͱ͖ΔΑ
    ͏ʹ
    • ਺஋ܭଌ͸·ͩ·ͩ͜Ε͔Β
    

    View Slide

29. ࣮ࡍʹ΍ͬͯΈͨײ૝
    • ϞμϯϑϩϯτΤϯυ͸ා͘ͳ͍ɻΉ͠Ζշద
    • Ϟδϡʔϧ؅ཧ΍ɺclassߏจɺasync/await౳ɺ αʔόαΠυ͹
    ͔Γ΍͍ͬͯͨΤϯδχΞͰ΋͢ΜͳΓೖ͍͚ͬͯΔΑ͏ͳ࢓
    ૊Έʹͳ͍ͬͯΔ
    • ͱʹ͔͘γϯϓϧʹૉૣ͘࡞ͬͯΈΔͷ͕େࣄ
    • ϨΨγʔվળ͸·ͣ୭͔͕ϓϩμΫγϣϯίʔυʹ౿Έࠐ·ͳ
    ͍ͱਐ·ͳ͍
    

    View Slide