5/23にヒカラボで登壇してお話させてもらった、一休.com レストランのレガシー改善でVue.jsを導入した体験談です
webpack導入話も併せてどうぞ https://speakerdeck.com/japboy/legacy-development-meets-webpack
VBScript meetsVue.jsʙ20ӽ͠ͷग़ձ͍ʙ
View Slide
ࣗݾհদݪ༎հɹ@matzz(ࣾ) / @simezi9(֎෦)• 20159݄ Ұٳೖࣾ• 20164݄ʙ Ұٳ.com Ϩετϥϯ iOSΞϓϦ ΤϯδχΞ• 20172݄ʙ Ұٳ.com Ϩετϥϯ ϑϩϯτΤϯυΤϯδχΞ• WebϑϩϯτΤϯυ୲ʹͳ͔ͬͯΒ3ϲ݄
උߪೖΓա͗Δਓ
͓͖ͯ͞
ࠓͷͳ͠• Ұٳ.com Ϩετϥϯͷ͜Ε·Ͱ• ϨΨγʔΛͲ͏ͬͯղফ͍͔ͯ͘͠• ͳͥVueΛબΜ͔ͩ• ࣮ࡍʹVueΛೖͨ͠Ҋ݅ͷ
Ұٳ.comϨετϥϯͲ͏ϨΨγʔ͔ʁ
ϨΨγʔཁૉᶃݴޠ• 96ੜ·ΕͷݴޠVBScript• ݴޠػೳͷਐԽ99Ͱࢭ·͍ͬͯΔ• (ࢀߟ IE5: 99 / IE6: 01)• jsonͷγϦΞϥΠζɾσγϦΞϥΠζͰࠔΔ͜ͱɾɾɾ• ϑϩϯτΤϯυjQueryͷΈ• ཁٻ͞ΕΔػೳ͕ෳࡶʹͳΓݫ͘͠ͳ͖ͬͯͨ
ϨΨγʔᶄઃܭ• ܧ͗͞ΕͯઍߦʹΒΜͩڞ௨CSS/JS• ͍ΖΜͳϑΝΠϧ͔ΒjQueryͷΠϕϯτ͕ࠐ·Ε͍ͯͯશମͷѲ͕͍͠• σβΠϯमਖ਼ͷӨڹ͕Ͳ͜ʹى͖Δͷ͕Θ͔ΓͮΒ͍• VBSͷதͷ͋ͪͪ͜ʹ அยԽͯ͠ຒΊࠐ·ΕͨHTML• ViewͱϩδοΫ͕ࠞࡏ͍ͯͯ͠ϝϯςφϯεੑ͕ѱ͍
ͰͲ͏͢Δͷ͔ʁ
վળͷํ• ಋೖ͞ΕͨwebpackͷΤίγεςϜΛ׆༻͢Δ• طଘͷϏδωεϩδοΫ͚ͩΛVBSʹ͠ɺը໘ඳըʹؔ͢ΔॲཧΛঃʑʹϑϩϯτΤϯυʹد͍ͤͯ͘• ϑϩϯτΤϯυΛ͢ΕɺࠓαʔόʔαΠυͷϦϓϨʔεΓ͘͢ͳΔ• ϑϩϯτΤϯυͰϖʔδຖʹίʔυͷಠཱੑΛߴͯ͘͠ɺमਖ਼ͷӨڹൣғΛ࠷খʹ͢Δ
վળͷํ͜ΕΛ ͜͏͢ΔͦΖΜ(VBS)͚ͩͰؤு͖ͬͯͨ෦ʹศརͳి(ϑϩϯτΤϯυ)Λׂ͚ͭ͝ͱʹ͍͚Δʢͦͯͦ͠ΖΜͷґଘΛͲΜͲΜݮΒ͢ʣ
ٻΊΔͷ• JSͷςϯϓϨʔτΤϯδϯ• ݱࡏͷWebpackΛલఏͱͨ͠ΤίγεςϜͱ૬ੑ͕͍͍͜ͱ• ͍··ͰαʔόʔαΠυͰ͖ͬͯͨը໘දࣔϩδοΫΛදݱ͢ΔʹΔ͚ͩͷػೳ͕͋Δ͜ͱ
Vue.js
ͳͥVue.jsʹ͔ͨ͠• ީิReactͱVue• ेͳར༻࣮ͱυΩϡϝϯτɾใʢຊޠʣ͕ἧ͍ͬͯΔ• (Reactʹൺ)طଘͷίʔυΛঃʑʹஔ͖͍͑ͯ͘ͷʹ͍͍ͯΔʢฉʣ• (Reactʹൺ)ֶशۂઢ͕ͳͩΒ͔Ͱɺͭ·͖ͮʹ͍͘ʢฉʣ
ຊʹVue.jsͰ͍͍ͷ͔ʁ• গͨ͠͠Β·ͨ৽͍͠ΞʔΩςΫνϟʔ͕ग़͖ͯͯVue͕ഇΕΔͷͰͳ͍͔ʁ• ͍ͣΕʹͤΑطଘͷΞʔΩςΫνϟͦΖͦΖݶքʹདྷ͍ͯΔ• ։ൃޮΛ্͍͔͛ͯͳ͍ͱɺαʔϏεվળͷεϐʔυ͕ग़ͳ͍• ϑϩϯτΤϯυͷҠΓมΘΓ͕ܹ͍͔͠Βͱ༷ࢠݟΛ͍ͯͨ͠Β͍ͭ·ͰมΘΕͳ͍• ͦ͏ͯ͠10Ҏ্VBS+jQueryͰؤு͖ͬͯͨɻ
ຊʹVue.jsͰ͍͍ͷ͔ʁ• େࣄͳͷɺ৽͍ٕ͠ज़͕ग़ͯҠߦ͍͚ͯ͠ΔΛ࡞Δ͜ͱ• ʮVue͕ૉΒ͍͔͠Β࠾༻ʯͱ͍͏ΑΓʮݱ࣌ͰϨΨγʔΛվળ͢ΔͳΒVue͕ྑͦ͞͏ʯͱ͍͏ؾ࣋ͪ• 1ޙ2ޙʹͬͱ͍͍ٕज़͕ग़ͨͳΒΓ͍͚͑ͯΔΑ͏ʹલྫΛ࡞͍ͬͯ͘
࣮ࡍͷҊ݅
࣮ࡍͷҊ݅• εϚϗαΠτͷ༧ը໘ϦχϡʔΞϧ• UIͷશମతͳϦχϡʔΞϧ• ༧ೖྗը໘ʹભҠ͢Δࡍʹඞͣදࣔ͞Ε͍ͯͨϩάΠϯը໘Λഇࢭ• ඇձһ༻ͷ༧ը໘Λձһ༻ͷ༧ը໘ʹ౷߹
αʔόʔαΠυ• ը໘දࣔʹඞཁͳใΛϑϩϯταΠυʹ͚ͩ͢ʹ͢Δ• viewͷ੍ޚϩδοΫҰॻ͔ͳ͍vueͷΤϯτϦϙΠϯτ vueʹσʔλΛૹΔJSΦϒδΣΫτ
ϑϩϯτΤϯυ
ߏ• 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ར༻Ͱ͖Δ
࣮ํ• ίϯϙʔωϯτͷࡉԽ͋·Γͤͣγϯϓϧʹ࡞Δ• νʔϜϝϯόʔͷͱ͖ͬͭ͢͞Λ༏ઌ• ࠶ར༻͍ͨ͠ίϯϙʔωϯτ͕࣮ࡍʹग़͖͔ͯͯΒখׂ͘͢͞Δ• HTMLʢ.vue) CSSʹ͍ͭͯ1ϑΝΠϧ͕ଟগେ͖͘ͳͬͯؾʹ͠ͳ͍• ϑΝΠϧͷείʔϓ͕ด͍ͯ͡Ε͍͍
طଘͷ࣮(jQuery)addEventListeneraddEventListenerHTML͔Βॲཧ͕ḷΕͳ͍
৽͍࣮͠(vue)ॲཧͷྲྀΕΛ͍͘͢HTMLΛݟΕԿ͕ى͜Δ͔͔Δ
࣮αϯϓϧچ࣮৽࣮EventListenerͷՃঢ়ଶ੍ޚDOMૢ࡞JS HTMLEventͷൃՐσʔλόΠϯσΟϯά
৺͕͚ͨ͜ͱ• σβΠφʔͷαϙʔτΛͱʹ͔͘खް͘͢Δ• JSͷΤίγεςϜͷதʹHTML/CSSΛΈࠐΉ͜ͱʹͳΔͷͰɺΤϯδχΞ͕ؤுͬͯҾͬுΔඞཁ͕͋Δɻʢ࠲੮͕͍ۙͱͱָͯʣ• ΤϯδχΞެࣜͷυΩϡϝϯτ͕ॆ࣮͍ͯ͠Δͱɺ୭͔͕͍࢝ΊΕࣗવͱ͍࢝ΊΔͷͰಛʹؾʹ͠ͳ͔ͬͨ• ϏδωεαΠυʹ৽͍ٕ͠ज़ͷՁΛྗઆ͠ͳ͍• Ͳͷٕज़ΛͲͷΑ͏ʹ͏͔ΤϯδχΞ͕Λܾͬͯఆ͢Δ• ϏδωεαΠυͱ͞ͳ͍ͱ͍͚ͳ͍͜ͱଞʹ͋ΔʢKPIɺαΠτͷ͍͢͞ɾɾɾetcʣ
݁Ռ
5/18ϦϦʔε• ༧ใͷೖྗUI͕γϯϓϧͰ͍͘͢• ϩάΠϯձһొͷΘ͕ܰ͠͞ݮ• ༧ͱಉ࣌ʹϩάΠϯɾձһొ͕Ͱ͖ΔΑ͏ʹ• ܭଌ·ͩ·ͩ͜Ε͔Β
࣮ࡍʹͬͯΈͨײ• ϞμϯϑϩϯτΤϯυා͘ͳ͍ɻΉ͠Ζշద• Ϟδϡʔϧཧɺclassߏจɺasync/awaitɺ αʔόαΠυ͔Γ͍ͬͯͨΤϯδχΞͰ͢ΜͳΓೖ͍͚ͬͯΔΑ͏ͳΈʹͳ͍ͬͯΔ• ͱʹ͔͘γϯϓϧʹૉૣ͘࡞ͬͯΈΔͷ͕େࣄ• ϨΨγʔվળ·ͣ୭͔͕ϓϩμΫγϣϯίʔυʹ౿Έࠐ·ͳ͍ͱਐ·ͳ͍