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

Transcript

1. Vue.jsͷͳ͍ձࣾʹVue.jsΛೖΕ͍ͯ͘ ΦϯϥΠϯ։࠵ʂʲγϡʔϚΠʳ
   5FDI
   -FBE
   &OHJOFFS͔Β࠷৽ٕज़Λֶ΂ʂ7VFKTฤ
3. S *OUSPEVDUJPO ຊ೔ͷ͓࿩ 1. ձࣾͷ͜ͱ 2. VueΛೖΕͨܦҢɾ՝୊ɾղܾࡦ 3. ·ͱΊ
4. *OUSPEVDUJPO ࠓ೔࿩͢͜ͱ 1. VueΛೖΕΔࡍͷ૊৫ɾ։ൃ؍఺Ͱͷ՝୊ 2. ಋೖͷ݁Ռ
5. *OUSPEVDUJPO ࠓ೔࿩͞ͳ͍͜ͱ 1. ࠷৽ͷVueͷ৘ใ 2. ࡉ͔͍ίʔυͷ঺հ
6. Ӌా ݈ଠ࿠ 1SPpMF +VNCP
   !KVNCP0S/PU ٕज़ຊ෦
   αʔϏε։ൃ෦
   
   ෦௕
7. גࣜձࣾϨΞδϣϒ ΦϯϥΠϯӳձ࿩͸ɺΠϯλʔωοτΛ࢖ͬͨӳձ࿩αʔϏεɻ
   ͍ͭͰ΋Ͳ͜Ͱ΋Ϧʔζφϒϧʹɺ֎ࠃਓߨࢣͷϨοεϯΛडߨͰ͖·͢ɻ
   ແྉମݧɾແྉΧ΢ϯηϦϯά࣮ࢪதʂ
   ͥͻࢲͨͪͷϨοεϯΛडߨͯ͠Έ͍ͯͩ͘͞ɻ 3BSF+PC
   JOD 13
8. 13
9. 13
10. 13 ϑϩϯτΤϯυɾόοΫΤϯυɾωΠςΟϒΞϓϦɾσβΠϯͰ༷ʑͳ
    ٕज़Λ૯ಈһֶͯ͠शऀͷͨΊͷγεςϜͷ։ൃɾӡ༻Λ͍ͯ͠·͢
11. VueΛٕज़૊৫ʹ૊ΈࠐΉ
12. $VSSFOU
    TJUVBUJPO ϨοεϯϧʔϜ 4."35
    .FUIPEš ͍͔ͭ͘ͷϓϩμΫτͰ7VFΛར༻
    • -BSBWFM
    
    7VF
    .1"
    • 7VF
    41"
    • /VYU
    41"
    
 ಋೖ͔Β͠͹Β͘ɾɾɾ
    ٕज़ಋೖΛͭͭ͠૊৫΋มԽ͍ͯ͠Δɻ
13. 1SFWJPVT
    TJUVBUJPO ΤϯδχΞ͸όοΫΤϯυ΋ϑϩϯτ΋ରԠ͢Δ
    ϑϩϯτͱݺ͹ΕΔ৔ॴ͸ੜKTɺKRVFSZ
    σβΠφʔͱ࿈ܞͯ͠4BTT$44Λॻ͍ͨΓ͓ئ͍ͨ͠Γɾɾɾ ౰࣌ͷٕज़૊৫ Ұݟͯ͠ྲྀಈੑ͸ߴ͘ॊೈʹݟ͑ΔҰํͰɺ
    ΤϯδχΞࣗ਎͕ઐ໳ੑͷߴ͍ྖҬʹूதͨ͠ΓɺϩʔϧʢڧΈʣͷ෼ղ͕͠ʹ͍͘
    ·ͨ࠾༻ࢢ৔ʹ΋ဃ཭͕͋Γɺ࠾༻ཁ݅΋੔ཧ͠ʹ͍͘ NFNP
14. 1SFWJPVT
    TJUVBUJPO 9 ೥લɺ৽نࣄۀͷ։ൃͷࡍʹ7VFΛਖ਼ࣜʹ
    ೖΕ͍ͯ͘͜ͱΛܾఆɻ
    Ճ͑ͯʮϑϩϯτΤϯυ
    ૊৫ʯΛ
    ࡞͍ͬͯ͘͜ͱ΋ܾΊͨɻ
    ͭ·Γ VueΛೖΕΔ = ϑϩϯτΤϯυ ɹ૊৫Λ࡞Δ ʹͳͬͨɻ
15. 1SPCMFNT
     ϑϩϯτΤϯυ
    ΤϯδχΞͷϩʔϧ
    JT
    Կʁ໰୊
     ϑϩϯτΤϯυ
    ͷႈ౳ੑ
    ໰୊
     7VF
    "QQ
    ͷύϑΥʔϚϯε؅ཧ
    JT
    ೉͍͠
    ໰୊
    3ͭͷ໰୊ ͦ͜Ͱग़͖ͯͨ
16. 1SPCMFN
     ϑϩϯτΤϯυ
    ΤϯδχΞͷϩʔϧ
    JT
    Կʁ໰୊
    • ٕज़͸Կ͕Ͱ͖Ε͹͍͍ͷʁ
    • "1*·Ͱ৮Δʁ
    • %PDLFS͸Ͳ͏͢Δʁ
    • "84͸ɾɾɾͲ͏͔
    • $*$%ͷઃఆ͸୭ʹґཔ͢Δʁ
17. 4PMVUJPO 'SPOUFOE #BDLFOE %FTJHOFS +4
    54
    XFCQBDL
    OQN
    ZBSO
    ʜ 1)1
    .Z42-
    "1*
    1)1
    7JFX
    ʜ $44
    4BTT
    6*69
    4UZMF
    )5.-
    ʜ ໌֬ʹ͢΂͖৔ॴ͸
    ͜͜
    ͚ͩͰͳ͘
    ͜͜ ϩʔϧࣗମͷ੔ཧ͸౰ͨΓલɺ
    Ճ͑ͯඞཁͩͬͨͷ͸͸
    Կ͕ڠྗͯ͠޲͖߹͏΂͖͔
    ͱ͍͏ϩʔϧͷ͔ͿΔ෦෼ɻ
    FY
    .1"ͳΞϓϦέʔγϣϯʹ͓͍ͯ
    ɹ
    
    1)1
    WJFXͰ6*૊Ή͔7VFͰ΍Δ͔ɺ
    ɹ
    
    ͦΕΛͲ͕ͬͪ୲౰ɾϨϏϡʔ͢Δ͔
18. 4PMVUJPO ϩʔϧͷॏෳΛΧόʔ͢ΔͨΊʹ΍͖ͬͯͨɾ͍Δ͜ͱ
    • "1*
    .PDLΛৗʹ੔උͯ͠#&ϨεͰ։ൃΛਐΊΒΕΔΑ͏ʹ͢Δ
    • 4XBHHFSBQJTQSPVU
    ΍
    OPEFͰγϯϓϧʹKTPOฦ͚ͩ͢ͷαʔό
    • ϑϩϯτΤϯυ
    ͸ϏϧυγεςϜʹ੹೚Λ࣋ͭ
    • /1.ى఺ʢZBSOʣͷ։ൃΛඪ४Խ
    • "1*ͷ։ൃ͸ݪଇ͠ͳ͍ʢڥքͷ෼཭ʣ
    • ίʔμʔ࡞ۀͷվળͱίϯϙʔωϯτ؅ཧ஌ࣝͷڞ༗
    • 4BTT$TTϕʔεͷίϯϙʔωϯτ෼཭
    
    "UPNJD
    $PNQPOFOUTԽ
    • σβΠφʔ͔ΒίʔσΟϯά࡞ۀͷ෼཭
19. 4PMVUJPO 'SPOUFOE #BDLFOE %FTJHOFS +4
    54
    XFCQBDL
    OQN
    ZBSO
    ʜ 1)1
    .Z42-
    "1*
    1)1
    7JFX
    ʜ $44
    4BTT
    6*69
    4UZMF
    )5.-
    ʜ ·ͨҰճߟ͑Δ͚ͩͰͳ͘ɺ
    ϝϯόʔͷࢥߟ΍τϨϯυͰ
    มಈ͍ͤͯ͘͞ඞཁ͕͋Δ
    ͱ͖ʹ͸ӽڥ͢Δ͜ͱ΋͋Γ
    ͦΕ͕ϝϯόʔͷεΩϧͷ޿͕Γ
    ʹ΋ͳΔ
20. 4PMVUJPO .1" 41" "1* 'SPOU ٕज़తͳ݁߹౓
    
    ૊৫తͳ݁߹౓
    ʹͳΔͨΊͳΔ΂͘41"ʜ
    • σϓϩΠύΠϓϥΠϯͷ෼཭
    • %PDLFSґଘ͔Βͷ཭୤
    • -BSBWFMNJY͔Βͷ཭୤
    • ϑϩϯτΤϯδχΞͷؔ৺ΛݮΒ͢
21. 1SPCMFN
     ϑϩϯτΤϯυ
    ͷႈ౳ੑ
    ໰୊
    ʮޙͰ͍͍΍ɾɾɾʯ͍ͬͺ͍͋Γ·͢ΑͶ
    • Ϗϧυ࣌ؒ
    • σϓϩΠͷࣗಈԽ
    • ൥ࡶɾ૿Ճ͢Δίϯϙʔωϯτͷ੔ཧ
    • ϧʔϧͷඪ४Խ
    
22. 4PMVUJPO 999
    
    7VF
    ͷγνϡΤʔγϣϯͰى͖Δ͜ͱͷҰͭʹ
 ႈ౳ੑ୲อɺ࿙Ε͕ͪ໰୊͕͋Γ·͢ɻ
    ॾʑɺ։ൃͷ༏ઌ౓తʹͲ͏͠Α΋ͳ͍͜ͱ΋͋Γ·͕͢
 ๨Εͳ͍Ͱཉ͍͠ͷ͕
    ʮ൴ΒʢϏϧυγεςϜɾλεΫϥϯφʔʣͷ͝ػݏΛଛͶͳ͍Α͏ʹͯ͠ɺ
 ͍ͭͰ΋ಉ݁͡ՌΛಘΒΕΔঢ়گΛ࡞Δʯ͜ͱͰ͢ɻ
23. 4PMVUJPO 999
    
    7VF
    ͷγνϡΤʔγϣϯͰى͖Δ͜ͱͷҰͭʹ
 ϑΝΠϧ਺ΊͬͪΌ૿͑Δ໰୊͕͋Γ·͢ɻ
    ॾʑɺ։ൃͷ༏ઌ౓తʹͲ͏͠Α΋ͳ͍͜ͱ΋͋Γ·͕͢
 ఺͚ͩ๨Εͳ͍Ͱཉ͍͠ͷ͕
    ʮ൴ΒʢϏϧυγεςϜɾλεΫϥϯφʔʣͷ͝ػݏΛଛͶͳ͍Α͏ʹͯ͠ɺ
 ͍ͭͰ΋ಉ݁͡ՌΛಘΒΕΔঢ়گΛ࡞Δʯ͜ͱͰ͢ɻ ΏΔ͘΍ΔͳΒʮͱΓ͋͑ͣ$*Ͱςετ͸ճΔʯঢ়گΛ
    ࡞͓͚ͬͯͩ͘Ͱ΋ɺ͋ͱ͔Β୭͔͕։ൃ͢Δͱ͖ʹ
    ؀ڥ࠶ݱੑ͕ߴ·Γ·͢˕
24. 1SPCMFN
     7VF
    "QQ
    ͷύϑΥʔϚϯε؅ཧ
    JT
    ೉͍͠
    ໰୊
    • 4&0͸ʁ
    • ϩΪϯά͸Ͳ͏͢Δͷʁ
    • -JHIU)PVTFͷείΞ͸্͛Δͷʁͦ΋ͦ΋਺ࣈ͸୭࣋ͭʁ
    • ϦϦʔε͍ͯ͠Δ41"͕໰୊ͳ͍͔Ͳ͏͔ΛͲ͏ܭଌ͢Δͷ
    FY
    ฐࣾͷϨοεϯϧʔϜͷ৔߹
    • Ի੠͕ฉ͑͜ͳ͍ͱ͍͏໰͍߹Θͤ૿Ճ
    • ϨοεϯͰ͖ͳ͍ͱԹ౓ײߴ͘໰͍߹ΘͤདྷͪΌ͏
    • ஞ࣍ରԠ͸ΩϦ͕ͳ͍ʜ
    • ਖ਼ৗՔಇΛ୲อ͢ΔࢦඪΛ࡞Δඞཁ͕͋ͬͨ
    
25. 4PMVUJPO ϩΪϯάʹΑΔՄࢹԽͱϞχλϦϯά
     "QQ4ZOD %ZOBNP%# "VSPSB ϩά΍σʔλͷूੵ ϓϩμΫτ σʔλͷ4ZOD ౰ॳɺ%ZOBNP%#Λ௚઀SFEBTIʹͭͳ͍Ͱ͍͕ͨɺ
    ूܭ͢Δʹ΋
    %2-
    %ZOBNP%#
    2VFSZ
    -BOHVBHF ͸42-ϥΠΫͳ͚ͩͰ
    දݱྗʹ͚ܽΔͨΊɺσʔλΛTZODͯ͠SFEBTIͰՄࢹԽɻ
    %BTICPSBE
    
    "MFSU
    ౳Λ׆༻ͯ͠։ൃɾ$4Ͱͷӡ༻ʹ׆༻
26. 4PMVUJPO ϩΪϯάʹΑΔՄࢹԽͱϞχλϦϯά
    
 8FC35$ͷෳࡶͳσόοάɾ4UBUT৘ใΛू໿͢ΔͨΊʹผ్ߏங ౰ॳɺ%ZOBNP%#Λ௚઀SFEBTIʹͭͳ͍Ͱ͍͕ͨɺ
    ूܭ͢Δʹ΋
    %2-
    %ZOBNP%#
    2VFSZ
    -BOHVBHF ͸42-ϥΠΫͳ͚ͩͰ
    දݱྗʹ͚ܽΔͨΊɺσʔλΛTZODͯ͠SFEBTIͰՄࢹԽɻ
    %BTICPSBE
    
    "MFSU
    ౳Λ׆༻ͯ͠։ൃɾ$4Ͱͷӡ༻ʹ׆༻
27. $PODMVTJPO • 7VF
    Λ৽͘͠૊৫ʹೖΕ͍ͯ͘͜ͱ
    
 
    ϑϩϯτΤϯυ
    ૊৫Λ࡞Δͱ͍͏͜ͱ
    • ϑϩϯτΤϯυ
    ૊৫Λ࡞Δͱ͖͸
    ϩʔϧͷ͔ͿΔͱ͜Ζ
    Λߟ͑ͯΈͯͶ
    • ϑϩϯτΤϯυ
    ͸ҟৗ͕ݟ͑ʹ͍͘ͷͰࢦඪΛ࡞Ζ͏Ͷ IUUQTSBSFKPCUFDIEFQUIBUFOBCMPHDPN ςοΫϒϩά΋ΑΖ͓͘͠ئ͍͠·͢ʂ 7VF
    ࣗମ͸΋ͪΖΜٕज़తʹϝϦοτ͕ͨ͘͞Μ͋ΓɺڗडͰ͖͍ͯΔ
 ͨͩͦΕ͚ͩͰͳͯ͘Ұॹʹ૊৫΋มΘ͍͚͍ͬͯͯΔͷ͕˕