Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

උ඼ߪೖ΍Γա͗Δਓ

Slide 4

Slide 4 text

͓͖ͯ͞

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Ͱ͸Ͳ͏͢Δͷ͔ʁ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Vue.js

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

࣮ࡍͷҊ݅

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ϑϩϯτΤϯυ

Slide 21

Slide 21 text

ߏ੒ • 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΋ར༻Ͱ͖Δ

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

݁Ռ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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