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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

VueΛٕज़૊৫ʹ૊ΈࠐΉ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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Ͱ΍Δ͔ɺ ɹͦΕΛͲ͕ͬͪ୲౰ɾϨϏϡʔ͢Δ͔

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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