Vue.jsのない会社にVue.jsを入れていく

Vue.jsͷͳ͍ձࣾʹVue.jsΛೖΕ͍ͯ͘ ΦϯϥΠϯ։࠵ʂʲγϡʔϚΠʳ 5FDI-FBE&OHJOFFS͔Β࠷৽ٕज़Λֶ΂ʂ7VFKTฤ

S *OUSPEVDUJPO ຊ೔ͷ͓࿩ 1. ձࣾͷ͜ͱ 2. VueΛೖΕͨܦҢɾ՝୊ɾղܾࡦ 3. ·ͱΊ

*OUSPEVDUJPO ࠓ೔࿩͢͜ͱ 1. VueΛೖΕΔࡍͷ૊৫ɾ։ൃ؍఺Ͱͷ՝୊ 2. ಋೖͷ݁Ռ

*OUSPEVDUJPO ࠓ೔࿩͞ͳ͍͜ͱ 1. ࠷৽ͷVueͷ৘ใ 2. ࡉ͔͍ίʔυͷ঺հ

Ӌా ݈ଠ࿠ 1SPpMF +VNCP!KVNCP0S/PU ٕज़ຊ෦αʔϏε։ൃ෦෦௕

גࣜձࣾϨΞδϣϒ ΦϯϥΠϯӳձ࿩͸ɺΠϯλʔωοτΛ࢖ͬͨӳձ࿩αʔϏεɻ ͍ͭͰ΋Ͳ͜Ͱ΋Ϧʔζφϒϧʹɺ֎ࠃਓߨࢣͷϨοεϯΛडߨͰ͖·͢ɻ ແྉମݧɾແྉΧ΢ϯηϦϯά࣮ࢪதʂ ͥͻࢲͨͪͷϨοεϯΛडߨͯ͠Έ͍ͯͩ͘͞ɻ 3BSF+PCJOD 13

13 ϑϩϯτΤϯυɾόοΫΤϯυɾωΠςΟϒΞϓϦɾσβΠϯͰ༷ʑͳ ٕज़Λ૯ಈһֶͯ͠शऀͷͨΊͷγεςϜͷ։ൃɾӡ༻Λ͍ͯ͠·͢

VueΛٕज़૊৫ʹ૊ΈࠐΉ

$VSSFOUTJUVBUJPO ϨοεϯϧʔϜ 4."35.FUIPE ͍͔ͭ͘ͷϓϩμΫτͰ7VFΛར༻ • -BSBWFM 7VF .1" •
7VF 41" • /VYU 41"   ಋೖ͔Β͠͹Β͘ɾɾɾ ٕज़ಋೖΛͭͭ͠૊৫΋มԽ͍ͯ͠Δɻ

1SFWJPVTTJUVBUJPO ΤϯδχΞ͸όοΫΤϯυ΋ϑϩϯτ΋ରԠ͢Δ ϑϩϯτͱݺ͹ΕΔ৔ॴ͸ੜKTɺKRVFSZ σβΠφʔͱ࿈ܞͯ͠4BTT$44Λॻ͍ͨΓ͓ئ͍ͨ͠Γɾɾɾ ౰࣌ͷٕज़૊৫ Ұݟͯ͠ྲྀಈੑ͸ߴ͘ॊೈʹݟ͑ΔҰํͰɺ ΤϯδχΞࣗ਎͕ઐ໳ੑͷߴ͍ྖҬʹूதͨ͠ΓɺϩʔϧʢڧΈʣͷ෼ղ͕͠ʹ͍͘ ·ͨ࠾༻ࢢ৔ʹ΋ဃ཭͕͋Γɺ࠾༻ཁ݅΋੔ཧ͠ʹ͍͘ NFNP

1SFWJPVTTJUVBUJPO 9 ೥લɺ৽نࣄۀͷ։ൃͷࡍʹ7VFΛਖ਼ࣜʹ ೖΕ͍ͯ͘͜ͱΛܾఆɻ Ճ͑ͯʮϑϩϯτΤϯυ૊৫ʯΛ ࡞͍ͬͯ͘͜ͱ΋ܾΊͨɻ ͭ·Γ VueΛೖΕΔ = ϑϩϯτΤϯυ
ɹ૊৫Λ࡞Δ ʹͳͬͨɻ

1SPCMFNT ϑϩϯτΤϯυΤϯδχΞͷϩʔϧJTԿʁ໰୊ ϑϩϯτΤϯυͷႈ౳ੑ໰୊ 7VF"QQͷύϑΥʔϚϯε؅ཧJT೉͍͠໰୊ 3ͭͷ໰୊ ͦ͜Ͱग़͖ͯͨ

1SPCMFN ϑϩϯτΤϯυΤϯδχΞͷϩʔϧJTԿʁ໰୊ • ٕज़͸Կ͕Ͱ͖Ε͹͍͍ͷʁ • "1*·Ͱ৮Δʁ • %PDLFS͸Ͳ͏͢Δʁ • "84͸ɾɾɾͲ͏͔
• $*$%ͷઃఆ͸୭ʹґཔ͢Δʁ

4PMVUJPO 'SPOUFOE #BDLFOE %FTJHOFS +4 54 XFCQBDL OQN ZBSOʜ
1)1 .Z42- "1* 1)17JFXʜ $44 4BTT 6*69 4UZMF )5.-ʜ ໌֬ʹ͢΂͖৔ॴ͸ ͚ͩ͜͜Ͱͳ͘͜͜ ϩʔϧࣗମͷ੔ཧ͸౰ͨΓલɺ Ճ͑ͯඞཁͩͬͨͷ͸͸ Կ͕ڠྗͯ͠޲͖߹͏΂͖͔ ͱ͍͏ϩʔϧͷ͔ͿΔ෦෼ɻ FY .1"ͳΞϓϦέʔγϣϯʹ͓͍ͯ ɹ1)1WJFXͰ6*૊Ή͔7VFͰ΍Δ͔ɺ ɹͦΕΛͲ͕ͬͪ୲౰ɾϨϏϡʔ͢Δ͔

4PMVUJPO ϩʔϧͷॏෳΛΧόʔ͢ΔͨΊʹ΍͖ͬͯͨɾ͍Δ͜ͱ • "1*.PDLΛৗʹ੔උͯ͠#&ϨεͰ։ൃΛਐΊΒΕΔΑ͏ʹ͢Δ • 4XBHHFSBQJTQSPVU΍OPEFͰγϯϓϧʹKTPOฦ͚ͩ͢ͷαʔό • ϑϩϯτΤϯυ͸ϏϧυγεςϜʹ੹೚Λ࣋ͭ • /1.ى఺ʢZBSOʣͷ։ൃΛඪ४Խ
• "1*ͷ։ൃ͸ݪଇ͠ͳ͍ʢڥքͷ෼཭ʣ • ίʔμʔ࡞ۀͷվળͱίϯϙʔωϯτ؅ཧ஌ࣝͷڞ༗ • 4BTT$TTϕʔεͷίϯϙʔωϯτ෼཭"UPNJD$PNQPOFOUTԽ • σβΠφʔ͔ΒίʔσΟϯά࡞ۀͷ෼཭

4PMVUJPO 'SPOUFOE #BDLFOE %FTJHOFS +4 54 XFCQBDL OQN ZBSOʜ
1)1 .Z42- "1* 1)17JFXʜ $44 4BTT 6*69 4UZMF )5.-ʜ ·ͨҰճߟ͑Δ͚ͩͰͳ͘ɺ ϝϯόʔͷࢥߟ΍τϨϯυͰ มಈ͍ͤͯ͘͞ඞཁ͕͋Δ ͱ͖ʹ͸ӽڥ͢Δ͜ͱ΋͋Γ ͦΕ͕ϝϯόʔͷεΩϧͷ޿͕Γ ʹ΋ͳΔ

4PMVUJPO .1" 41" "1* 'SPOU ٕज़తͳ݁߹౓૊৫తͳ݁߹౓ʹͳΔͨΊͳΔ΂͘41"ʜ • σϓϩΠύΠϓϥΠϯͷ෼཭ • %PDLFSґଘ͔Βͷ཭୤
• -BSBWFMNJY͔Βͷ཭୤ • ϑϩϯτΤϯδχΞͷؔ৺ΛݮΒ͢

1SPCMFN ϑϩϯτΤϯυͷႈ౳ੑ໰୊ ʮޙͰ͍͍΍ɾɾɾʯ͍ͬͺ͍͋Γ·͢ΑͶ • Ϗϧυ࣌ؒ • σϓϩΠͷࣗಈԽ • ൥ࡶɾ૿Ճ͢Δίϯϙʔωϯτͷ੔ཧ •
ϧʔϧͷඪ४Խ

4PMVUJPO 9997VFͷγνϡΤʔγϣϯͰى͖Δ͜ͱͷҰͭʹ  ႈ౳ੑ୲อɺ࿙Ε͕ͪ໰୊͕͋Γ·͢ɻ ॾʑɺ։ൃͷ༏ઌ౓తʹͲ͏͠Α΋ͳ͍͜ͱ΋͋Γ·͕͢  ๨Εͳ͍Ͱཉ͍͠ͷ͕ ʮ൴ΒʢϏϧυγεςϜɾλεΫϥϯφʔʣͷ͝ػݏΛଛͶͳ͍Α͏ʹͯ͠ɺ  ͍ͭͰ΋ಉ݁͡ՌΛಘΒΕΔঢ়گΛ࡞Δʯ͜ͱͰ͢ɻ

4PMVUJPO 9997VFͷγνϡΤʔγϣϯͰى͖Δ͜ͱͷҰͭʹ  ϑΝΠϧ਺ΊͬͪΌ૿͑Δ໰୊͕͋Γ·͢ɻ ॾʑɺ։ൃͷ༏ઌ౓తʹͲ͏͠Α΋ͳ͍͜ͱ΋͋Γ·͕͢  ఺͚ͩ๨Εͳ͍Ͱཉ͍͠ͷ͕ ʮ൴ΒʢϏϧυγεςϜɾλεΫϥϯφʔʣͷ͝ػݏΛଛͶͳ͍Α͏ʹͯ͠ɺ  ͍ͭͰ΋ಉ݁͡ՌΛಘΒΕΔঢ়گΛ࡞Δʯ͜ͱͰ͢ɻ ΏΔ͘΍ΔͳΒʮͱΓ͋͑ͣ$*Ͱςετ͸ճΔʯঢ়گΛ ࡞͓͚ͬͯͩ͘Ͱ΋ɺ͋ͱ͔Β୭͔͕։ൃ͢Δͱ͖ʹ ؀ڥ࠶ݱੑ͕ߴ·Γ·͢˕

1SPCMFN 7VF"QQͷύϑΥʔϚϯε؅ཧJT೉͍͠໰୊ • 4&0͸ʁ • ϩΪϯά͸Ͳ͏͢Δͷʁ • -JHIU)PVTFͷείΞ͸্͛Δͷʁͦ΋ͦ΋਺ࣈ͸୭࣋ͭʁ • ϦϦʔε͍ͯ͠Δ41"͕໰୊ͳ͍͔Ͳ͏͔ΛͲ͏ܭଌ͢Δͷ
FY ฐࣾͷϨοεϯϧʔϜͷ৔߹ • Ի੠͕ฉ͑͜ͳ͍ͱ͍͏໰͍߹Θͤ૿Ճ • ϨοεϯͰ͖ͳ͍ͱԹ౓ײߴ͘໰͍߹ΘͤདྷͪΌ͏ • ஞ࣍ରԠ͸ΩϦ͕ͳ͍ʜ • ਖ਼ৗՔಇΛ୲อ͢ΔࢦඪΛ࡞Δඞཁ͕͋ͬͨ

4PMVUJPO ϩΪϯάʹΑΔՄࢹԽͱϞχλϦϯά "QQ4ZOD %ZOBNP%# "VSPSB ϩά΍σʔλͷूੵ ϓϩμΫτ σʔλͷ4ZOD ౰ॳɺ%ZOBNP%#Λ௚઀SFEBTIʹͭͳ͍Ͱ͍͕ͨɺ ूܭ͢Δʹ΋%2-
%ZOBNP%#2VFSZ-BOHVBHF ͸42-ϥΠΫͳ͚ͩͰ දݱྗʹ͚ܽΔͨΊɺσʔλΛTZODͯ͠SFEBTIͰՄࢹԽɻ %BTICPSBE"MFSU౳Λ׆༻ͯ͠։ൃɾ$4Ͱͷӡ༻ʹ׆༻

4PMVUJPO ϩΪϯάʹΑΔՄࢹԽͱϞχλϦϯά  8FC35$ͷෳࡶͳσόοάɾ4UBUT৘ใΛू໿͢ΔͨΊʹผ్ߏங ౰ॳɺ%ZOBNP%#Λ௚઀SFEBTIʹͭͳ͍Ͱ͍͕ͨɺ ूܭ͢Δʹ΋%2- %ZOBNP%#2VFSZ-BOHVBHF ͸42-ϥΠΫͳ͚ͩͰ දݱྗʹ͚ܽΔͨΊɺσʔλΛTZODͯ͠SFEBTIͰՄࢹԽɻ %BTICPSBE"MFSU౳Λ׆༻ͯ͠։ൃɾ$4Ͱͷӡ༻ʹ׆༻

$PODMVTJPO • 7VFΛ৽͘͠૊৫ʹೖΕ͍ͯ͘͜ͱ  ϑϩϯτΤϯυ૊৫Λ࡞Δͱ͍͏͜ͱ • ϑϩϯτΤϯυ૊৫Λ࡞Δͱ͖͸ϩʔϧͷ͔ͿΔͱ͜ΖΛߟ͑ͯΈͯͶ • ϑϩϯτΤϯυ͸ҟৗ͕ݟ͑ʹ͍͘ͷͰࢦඪΛ࡞Ζ͏Ͷ IUUQTSBSFKPCUFDIEFQUIBUFOBCMPHDPN ςοΫϒϩά΋ΑΖ͓͘͠ئ͍͠·͢ʂ
7VFࣗମ͸΋ͪΖΜٕज़తʹϝϦοτ͕ͨ͘͞Μ͋ΓɺڗडͰ͖͍ͯΔ  ͨͩͦΕ͚ͩͰͳͯ͘Ұॹʹ૊৫΋มΘ͍͚͍ͬͯͯΔͷ͕˕

Vue.jsのない会社にVue.jsを入れていく

Vue.jsのない会社にVue.jsを入れていく

Ken Jumbo Haneda

More Decks by Ken Jumbo Haneda

Other Decks in Programming

Featured

Transcript

Vue.jsͷͳ͍ձࣾʹVue.jsΛೖΕ͍ͯ͘ ΦϯϥΠϯ։࠵ʂʲγϡʔϚΠʳ 5FDI-FBE&OHJOFFS͔Β࠷৽ٕज़Λֶ΂ʂ7VFKTฤ

S *OUSPEVDUJPO ຊ೔ͷ͓࿩ 1. ձࣾͷ͜ͱ 2. VueΛೖΕͨܦҢɾ՝୊ɾղܾࡦ 3. ·ͱΊ

*OUSPEVDUJPO ࠓ೔࿩͢͜ͱ 1. VueΛೖΕΔࡍͷ૊৫ɾ։ൃ؍఺Ͱͷ՝୊ 2. ಋೖͷ݁Ռ

*OUSPEVDUJPO ࠓ೔࿩͞ͳ͍͜ͱ 1. ࠷৽ͷVueͷ৘ใ 2. ࡉ͔͍ίʔυͷ঺հ

Ӌా ݈ଠ࿠ 1SPpMF +VNCP!KVNCP0S/PU ٕज़ຊ෦αʔϏε։ൃ෦෦௕

גࣜձࣾϨΞδϣϒ ΦϯϥΠϯӳձ࿩͸ɺΠϯλʔωοτΛ࢖ͬͨӳձ࿩αʔϏεɻ ͍ͭͰ΋Ͳ͜Ͱ΋Ϧʔζφϒϧʹɺ֎ࠃਓߨࢣͷϨοεϯΛडߨͰ͖·͢ɻ ແྉମݧɾແྉΧ΢ϯηϦϯά࣮ࢪதʂ ͥͻࢲͨͪͷϨοεϯΛडߨͯ͠Έ͍ͯͩ͘͞ɻ 3BSF+PCJOD 13

13

13

13 ϑϩϯτΤϯυɾόοΫΤϯυɾωΠςΟϒΞϓϦɾσβΠϯͰ༷ʑͳ ٕज़Λ૯ಈһֶͯ͠शऀͷͨΊͷγεςϜͷ։ൃɾӡ༻Λ͍ͯ͠·͢

VueΛٕज़૊৫ʹ૊ΈࠐΉ

$VSSFOUTJUVBUJPO ϨοεϯϧʔϜ 4."35.FUIPE ͍͔ͭ͘ͷϓϩμΫτͰ7VFΛར༻ • -BSBWFM 7VF .1" •

1SFWJPVTTJUVBUJPO 9 ೥લɺ৽نࣄۀͷ։ൃͷࡍʹ7VFΛਖ਼ࣜʹ ೖΕ͍ͯ͘͜ͱΛܾఆɻ Ճ͑ͯʮϑϩϯτΤϯυ૊৫ʯΛ ࡞͍ͬͯ͘͜ͱ΋ܾΊͨɻ ͭ·Γ VueΛೖΕΔ = ϑϩϯτΤϯυ

1SPCMFNT ϑϩϯτΤϯυΤϯδχΞͷϩʔϧJTԿʁ໰୊ ϑϩϯτΤϯυͷႈ౳ੑ໰୊ 7VF"QQͷύϑΥʔϚϯε؅ཧJT೉͍͠໰୊ 3ͭͷ໰୊ ͦ͜Ͱग़͖ͯͨ

1SPCMFN ϑϩϯτΤϯυΤϯδχΞͷϩʔϧJTԿʁ໰୊ • ٕज़͸Կ͕Ͱ͖Ε͹͍͍ͷʁ • "1*·Ͱ৮Δʁ • %PDLFS͸Ͳ͏͢Δʁ • "84͸ɾɾɾͲ͏͔

4PMVUJPO 'SPOUFOE #BDLFOE %FTJHOFS +4 54 XFCQBDL OQN ZBSOʜ

4PMVUJPO ϩʔϧͷॏෳΛΧόʔ͢ΔͨΊʹ΍͖ͬͯͨɾ͍Δ͜ͱ • "1*.PDLΛৗʹ੔උͯ͠#&ϨεͰ։ൃΛਐΊΒΕΔΑ͏ʹ͢Δ • 4XBHHFSBQJTQSPVU΍OPEFͰγϯϓϧʹKTPOฦ͚ͩ͢ͷαʔό • ϑϩϯτΤϯυ͸ϏϧυγεςϜʹ੹೚Λ࣋ͭ • /1.ى఺ʢZBSOʣͷ։ൃΛඪ४Խ

4PMVUJPO 'SPOUFOE #BDLFOE %FTJHOFS +4 54 XFCQBDL OQN ZBSOʜ

4PMVUJPO .1" 41" "1* 'SPOU ٕज़తͳ݁߹౓૊৫తͳ݁߹౓ʹͳΔͨΊͳΔ΂͘41"ʜ • σϓϩΠύΠϓϥΠϯͷ෼཭ • %PDLFSґଘ͔Βͷ཭୤

1SPCMFN ϑϩϯτΤϯυͷႈ౳ੑ໰୊ ʮޙͰ͍͍΍ɾɾɾʯ͍ͬͺ͍͋Γ·͢ΑͶ • Ϗϧυ࣌ؒ • σϓϩΠͷࣗಈԽ • ൥ࡶɾ૿Ճ͢Δίϯϙʔωϯτͷ੔ཧ •

1SPCMFN 7VF"QQͷύϑΥʔϚϯε؅ཧJT೉͍͠໰୊ • 4&0͸ʁ • ϩΪϯά͸Ͳ͏͢Δͷʁ • -JHIU)PVTFͷείΞ͸্͛Δͷʁͦ΋ͦ΋਺ࣈ͸୭࣋ͭʁ • ϦϦʔε͍ͯ͠Δ41"͕໰୊ͳ͍͔Ͳ͏͔ΛͲ͏ܭଌ͢Δͷ

4PMVUJPO ϩΪϯάʹΑΔՄࢹԽͱϞχλϦϯά "QQ4ZOD %ZOBNP%# "VSPSB ϩά΍σʔλͷूੵ ϓϩμΫτ σʔλͷ4ZOD ౰ॳɺ%ZOBNP%#Λ௚઀SFEBTIʹͭͳ͍Ͱ͍͕ͨɺ ूܭ͢Δʹ΋%2-

$PODMVTJPO • 7VFΛ৽͘͠૊৫ʹೖΕ͍ͯ͘͜ͱ  ϑϩϯτΤϯυ૊৫Λ࡞Δͱ͍͏͜ͱ • ϑϩϯτΤϯυ૊৫Λ࡞Δͱ͖͸ϩʔϧͷ͔ͿΔͱ͜ΖΛߟ͑ͯΈͯͶ • ϑϩϯτΤϯυ͸ҟৗ͕ݟ͑ʹ͍͘ͷͰࢦඪΛ࡞Ζ͏Ͷ IUUQTSBSFKPCUFDIEFQUIBUFOBCMPHDPN ςοΫϒϩά΋ΑΖ͓͘͠ئ͍͠·͢ʂ