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೥ӽ͠ͷग़ձ͍ʙ
2. ࣗݾ঺հ দݪ༎հɹ@matzz(ࣾ಺) / @simezi9(֎෦) • 2015೥9݄ Ұٳೖࣾ • 2016೥4݄ʙ Ұٳ.com Ϩετϥϯ iOSΞϓϦ ΤϯδχΞ • 2017೥2݄ʙ Ұٳ.com Ϩετϥϯ ϑϩϯτΤϯυΤϯδ χΞ • WebϑϩϯτΤϯυ୲౰ʹͳ͔ͬͯΒ3ϲ݄
3. උ඼ߪೖ΍Γա͗Δਓ
4. ͓͖ͯ͞
5. ࠓ೔ͷ͸ͳ͠ • Ұٳ.com Ϩετϥϯͷ͜Ε·Ͱ • ϨΨγʔΛͲ͏΍ͬͯղফ͍͔ͯ͘͠ • ͳͥVueΛબΜ͔ͩ • ࣮ࡍʹVueΛ౤ೖͨ͠Ҋ݅ͷ࿩
6. Ұٳ.comϨετϥϯ͸Ͳ͏ϨΨγʔ͔ʁ
7. ϨΨγʔཁૉᶃݴޠ • 96೥ੜ·ΕͷݴޠVBScript • ݴޠػೳͷਐԽ͸99೥Ͱࢭ·͍ͬͯΔ • (ࢀߟ IE5: 99೥ / IE6: 01೥) • jsonͷγϦΞϥΠζɾσγϦΞϥΠζͰࠔΔ͜ͱ΋ɾɾɾ • ϑϩϯτΤϯυ͸jQueryͷΈ • ཁٻ͞ΕΔػೳ͕ෳࡶʹͳΓݫ͘͠ͳ͖ͬͯͨ
8. ϨΨγʔᶄઃܭ • ܧ͗଍͞Εͯ਺ઍߦʹ๲ΒΜͩڞ௨CSS/JS • ͍ΖΜͳϑΝΠϧ͔ΒjQueryͷΠϕϯτ͕࢓ࠐ·Ε͍ͯͯશମͷ೺Ѳ͕೉͍͠ • σβΠϯमਖ਼ͷӨڹ͕Ͳ͜ʹى͖Δͷ͕Θ͔ΓͮΒ͍ • VBSͷதͷ͋ͪͪ͜ʹ அยԽͯ͠ຒΊࠐ·ΕͨHTML • ViewͱϩδοΫ͕ࠞࡏ͍ͯͯ͠ϝϯςφϯεੑ͕ѱ͍
9. Ͱ͸Ͳ͏͢Δͷ͔ʁ
10. վળͷํ਑ • ಋೖ͞ΕͨwebpackͷΤίγεςϜΛ׆༻͢Δ • طଘͷϏδωεϩδοΫ͚ͩΛVBSʹ࢒͠ɺը໘ඳը ʹؔ͢ΔॲཧΛঃʑʹϑϩϯτΤϯυʹد͍ͤͯ͘ • ϑϩϯτΤϯυΛ෼཭͢Ε͹ɺࠓ౓͸αʔόʔα ΠυͷϦϓϨʔε΋΍Γ΍͘͢ͳΔ • ϑϩϯτΤϯυͰ͸ϖʔδຖʹίʔυͷಠཱੑΛߴ ͯ͘͠ɺमਖ਼ͷӨڹൣғΛ࠷খʹ͢Δ
11. վળͷํ਑ ͜ΕΛ ͜͏͢Δ ͦΖ͹Μ(VBS)͚ͩͰؤு͖ͬͯͨ෦෼ʹ ศརͳి୎(ϑϩϯτΤϯυ)Λ͚ͭ ໾ׂ͝ͱʹ࢖͍෼͚Δ ʢͦͯͦ͠Ζ͹Μ΁ͷґଘΛͲΜͲΜݮΒ͢ʣ
12. ٻΊΔ΋ͷ • JSͷςϯϓϨʔτΤϯδϯ • ݱࡏͷWebpackΛલఏͱͨ͠ΤίγεςϜͱ૬ੑ͕͍͍͜ͱ • ͍··ͰαʔόʔαΠυͰ΍͖ͬͯͨը໘දࣔϩδοΫΛදݱ ͢Δʹ଍Δ͚ͩͷػೳ͕͋Δ͜ͱ
13. Vue.js
14. ͳͥVue.jsʹ͔ͨ͠ • ީิ͸ReactͱVue • े෼ͳར༻࣮੷ͱυΩϡϝϯτɾ৘ใʢ೔ຊޠʣ͕ἧ ͍ͬͯΔ • (Reactʹൺ΂)طଘͷίʔυΛঃʑʹஔ͖׵͍͑ͯ͘ͷ ʹ޲͍͍ͯΔʢ఻ฉʣ • (Reactʹൺ΂)ֶशۂઢ͕ͳͩΒ͔Ͱɺͭ·͖ͮʹ͍͘ ʢ఻ฉʣ
15. ຊ౰ʹVue.jsͰ͍͍ͷ͔ʁ • গͨ͠͠Β·ͨ৽͍͠ΞʔΩςΫνϟʔ͕ग़͖ͯͯ Vue͕ഇΕΔͷͰ͸ͳ͍͔ʁ • ͍ͣΕʹͤΑطଘͷΞʔΩςΫνϟ͸ͦΖͦΖݶքʹདྷ͍ͯΔ • ։ൃޮ཰Λ্͍͔͛ͯͳ͍ͱɺαʔϏεվળͷεϐʔυ͕ग़ͳ͍ • ϑϩϯτΤϯυͷҠΓมΘΓ͕ܹ͍͔͠Βͱ༷ࢠݟΛ͍ͯͨ͠Β͍ ͭ·Ͱ΋มΘΕͳ͍ • ͦ͏ͯ͠10೥Ҏ্VBS+jQueryͰؤு͖ͬͯͨɻ
16. ຊ౰ʹVue.jsͰ͍͍ͷ͔ʁ • େࣄͳͷ͸ɺ৽͍ٕ͠ज़͕ग़ͯ΋Ҡߦ͍͚ͯ͠Δ౔ ୆Λ࡞Δ͜ͱ • ʮVue͕ૉ੖Β͍͔͠Β࠾༻ʯͱ͍͏ΑΓ΋ʮݱ࣌఺ͰϨΨγʔΛ վળ͢ΔͳΒVue͕ྑͦ͞͏ʯͱ͍͏ؾ࣋ͪ • 1೥ޙ2೥ޙʹ΋ͬͱ͍͍ٕज़͕ग़ͨͳΒ৐Γ׵͍͚͑ͯΔΑ͏ ʹલྫΛ࡞͍ͬͯ͘
17. ࣮ࡍͷҊ݅
18. ࣮ࡍͷҊ݅ • εϚϗαΠτͷ༧໿ը໘ϦχϡʔΞϧ • UIͷશମతͳϦχϡʔΞϧ • ༧໿ೖྗը໘ʹભҠ͢Δࡍʹඞͣදࣔ͞Ε͍ͯͨϩάΠϯը໘Λഇࢭ • ඇձһ༻ͷ༧໿ը໘Λձһ༻ͷ༧໿ը໘ʹ౷߹
19. αʔόʔαΠυ • ը໘දࣔʹඞཁͳ৘ใΛϑϩϯταΠυʹ౉͚ͩ͢ʹ͢Δ • viewͷ੍ޚϩδοΫ͸Ұ੾ॻ͔ͳ͍ vueͷΤϯτϦϙΠϯτ vueʹσʔλΛૹΔJSΦϒδΣΫτ
20. ϑϩϯτΤϯυ
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΋ར༻Ͱ͖Δ
22. ࣮૷ํ਑ • ίϯϙʔωϯτͷࡉ෼Խ͸͋·Γͤͣγϯϓϧʹ࡞Δ • νʔϜϝϯόʔͷͱ͖ͬͭ΍͢͞Λ༏ઌ • ࠶ར༻͍ͨ͠ίϯϙʔωϯτ͕࣮ࡍʹग़͖͔ͯͯΒখ͞ ͘෼ׂ͢Δ • HTMLʢ.vue) ΍CSSʹ͍ͭͯ͸1ϑΝΠϧ͕ଟগେ͖͘ ͳͬͯ΋ؾʹ͠ͳ͍ • ϑΝΠϧͷείʔϓ͕ด͍ͯ͡Ε͹͍͍
23. طଘͷ࣮૷(jQuery) addEventListener addEventListener HTML͔Βॲཧ͕ḷΕͳ͍
24. ৽͍࣮͠૷(vue) ॲཧͷྲྀΕΛ௥͍΍͘͢ <button v-on:click=""> <button @change=""> HTMLΛݟΕ͹Կ͕ى͜Δ͔෼͔Δ
25. ࣮૷αϯϓϧ چ࣮૷ ৽࣮૷ EventListenerͷ௥Ճ ঢ়ଶ੍ޚ DOMૢ࡞ JS HTML EventͷൃՐ σʔλόΠϯσΟϯά
26. ৺͕͚ͨ͜ͱ • σβΠφʔ΁ͷαϙʔτΛͱʹ͔͘खް͘͢Δ • JSͷΤίγεςϜͷதʹHTML/CSSΛ૊ΈࠐΉ͜ͱʹͳΔͷͰɺΤϯδ χΞ͕ؤுͬͯҾͬுΔඞཁ͕͋Δɻʢ࠲੮͕͍ۙͱͱͯ΋ָʣ • ΤϯδχΞ͸ެࣜͷυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δͱɺ୭͔͕࢖͍࢝ΊΕ ͹ࣗવͱ࢖͍࢝ΊΔͷͰಛʹؾʹ͠ͳ͔ͬͨ • ϏδωεαΠυʹ৽͍ٕ͠ज़ͷՁ஋Λྗઆ͠ͳ͍ • Ͳͷٕज़ΛͲͷΑ͏ʹ࢖͏͔͸ΤϯδχΞ͕੹೚Λ΋ܾͬͯఆ͢Δ • ϏδωεαΠυͱ࿩͞ͳ͍ͱ͍͚ͳ͍͜ͱ͸ଞʹ͋ΔʢKPIɺαΠτͷ࢖ ͍΍͢͞ɾɾɾetcʣ
27. ݁Ռ
28. 5/18ϦϦʔε • ༧໿৘ใͷೖྗUI͕γϯϓϧͰ࢖͍΍͘͢ • ϩάΠϯ΍ձһొ࿥ͷ൥Θ͕ܰ͠͞ݮ • ༧໿ͱಉ࣌ʹϩάΠϯɾձһొ࿥͕Ͱ͖ΔΑ ͏ʹ • ਺஋ܭଌ͸·ͩ·ͩ͜Ε͔Β
29. ࣮ࡍʹ΍ͬͯΈͨײ૝ • ϞμϯϑϩϯτΤϯυ͸ා͘ͳ͍ɻΉ͠Ζշద • Ϟδϡʔϧ؅ཧ΍ɺclassߏจɺasync/await౳ɺ αʔόαΠυ͹ ͔Γ΍͍ͬͯͨΤϯδχΞͰ΋͢ΜͳΓೖ͍͚ͬͯΔΑ͏ͳ࢓ ૊Έʹͳ͍ͬͯΔ • ͱʹ͔͘γϯϓϧʹૉૣ͘࡞ͬͯΈΔͷ͕େࣄ • ϨΨγʔվળ͸·ͣ୭͔͕ϓϩμΫγϣϯίʔυʹ౿Έࠐ·ͳ ͍ͱਐ·ͳ͍