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

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

simezi9
May 23, 2017

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

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

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

simezi9

May 23, 2017
Tweet

More Decks by simezi9

Other Decks in Technology

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