Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

9eedb2b6ddfdfccf6cc347225ab1deda?s=47 simezi9
May 23, 2017

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

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

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

9eedb2b6ddfdfccf6cc347225ab1deda?s=128

simezi9

May 23, 2017
Tweet

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౳ɺ αʔόαΠυ͹ ͔Γ΍͍ͬͯͨΤϯδχΞͰ΋͢ΜͳΓೖ͍͚ͬͯΔΑ͏ͳ࢓ ૊Έʹͳ͍ͬͯΔ • ͱʹ͔͘γϯϓϧʹૉૣ͘࡞ͬͯΈΔͷ͕େࣄ

    • ϨΨγʔվળ͸·ͣ୭͔͕ϓϩμΫγϣϯίʔυʹ౿Έࠐ·ͳ ͍ͱਐ·ͳ͍