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

Transcript

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

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

9. View Slide

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

    View Slide

11. VueΛٕज़૊৫ʹ૊ΈࠐΉ
    

    View Slide

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

    ಋೖ͔Β͠͹Β͘ɾɾɾ
    ٕज़ಋೖΛͭͭ͠૊৫΋มԽ͍ͯ͠Δɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. 4PMVUJPO
    9997VFͷγνϡΤʔγϣϯͰى͖Δ͜ͱͷҰͭʹ

    ႈ౳ੑ୲อɺ࿙Ε͕ͪ໰୊͕͋Γ·͢ɻ
    ॾʑɺ։ൃͷ༏ઌ౓తʹͲ͏͠Α΋ͳ͍͜ͱ΋͋Γ·͕͢

    ๨Εͳ͍Ͱཉ͍͠ͷ͕
    ʮ൴ΒʢϏϧυγεςϜɾλεΫϥϯφʔʣͷ͝ػݏΛଛͶͳ͍Α͏ʹͯ͠ɺ

    ͍ͭͰ΋ಉ݁͡ՌΛಘΒΕΔঢ়گΛ࡞Δʯ͜ͱͰ͢ɻ
    

    View Slide

23. 4PMVUJPO
    9997VFͷγνϡΤʔγϣϯͰى͖Δ͜ͱͷҰͭʹ

    ϑΝΠϧ਺ΊͬͪΌ૿͑Δ໰୊͕͋Γ·͢ɻ
    ॾʑɺ։ൃͷ༏ઌ౓తʹͲ͏͠Α΋ͳ͍͜ͱ΋͋Γ·͕͢

    ఺͚ͩ๨Εͳ͍Ͱཉ͍͠ͷ͕
    ʮ൴ΒʢϏϧυγεςϜɾλεΫϥϯφʔʣͷ͝ػݏΛଛͶͳ͍Α͏ʹͯ͠ɺ

    ͍ͭͰ΋ಉ݁͡ՌΛಘΒΕΔঢ়گΛ࡞Δʯ͜ͱͰ͢ɻ
    ΏΔ͘΍ΔͳΒʮͱΓ͋͑ͣ$*Ͱςετ͸ճΔʯঢ়گΛ
    ࡞͓͚ͬͯͩ͘Ͱ΋ɺ͋ͱ͔Β୭͔͕։ൃ͢Δͱ͖ʹ
    ؀ڥ࠶ݱੑ͕ߴ·Γ·͢˕
    

    View Slide

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

    View Slide

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

    View Slide

26. 4PMVUJPO
    ϩΪϯάʹΑΔՄࢹԽͱϞχλϦϯά

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

    View Slide

27. $PODMVTJPO
    • 7VFΛ৽͘͠૊৫ʹೖΕ͍ͯ͘͜ͱ

    ϑϩϯτΤϯυ૊৫Λ࡞Δͱ͍͏͜ͱ
    • ϑϩϯτΤϯυ૊৫Λ࡞Δͱ͖͸ϩʔϧͷ͔ͿΔͱ͜ΖΛߟ͑ͯΈͯͶ
    • ϑϩϯτΤϯυ͸ҟৗ͕ݟ͑ʹ͍͘ͷͰࢦඪΛ࡞Ζ͏Ͷ
    IUUQTSBSFKPCUFDIEFQUIBUFOBCMPHDPN
    ςοΫϒϩά΋ΑΖ͓͘͠ئ͍͠·͢ʂ
    7VFࣗମ͸΋ͪΖΜٕज़తʹϝϦοτ͕ͨ͘͞Μ͋ΓɺڗडͰ͖͍ͯΔ

    ͨͩͦΕ͚ͩͰͳͯ͘Ұॹʹ૊৫΋มΘ͍͚͍ͬͯͯΔͷ͕˕
    

    View Slide