Vue.js入門！VueCLIからSPAフロントエンド開発を学ぶ

Vue.js入門勉強会の資料です

全サンプルソースコードはこちら
GitHub : https://github.com/po3rin/Introduction-Vue.js

Transcript

1. 7VFKTೖ໳ʂ7VF$-*͔Β41"ϑϩϯτΤϯυ։ൃΛֶͿ
   OFX7VF \
   FMbBQQ
   SPVUFS
   UFNQMBUFb"QQ
   DPNQPOFOUT\"QQ^
   ^
   
   7VFKT$0634& 7&34*0/
   

   View Slide

2. !QPSJO
   'SPOUFOE%FWFMPQNFOU#BDLFOE%FWFMPQNFOU%BUBTJFODF
   +BWB4DSJQU1ZUIPO(PMBOH
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   

   View Slide

3. \8IZ7VFKT
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   

   View Slide

4. 8IBU41"
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   ैདྷͷ8FCϖʔδͰ͸ભҠ࣌ʹຖճ)551Ϧ
   ΫΤετͰ)5.-Λॴಘ͢Δ͕ɺ41"Ͱ͸
   +BWB4DSJQUΛ༻͍ͯϖʔδ಺ͷ)5.-ͷҰ
   ෦Λࠩ͠ସ͑ͯίϯςϯπΛ੾Γସ͑ͯɺ
   Ϣʔβʔମݧʢ69ʣΛେ͖͘޲্ͤ͞Δ͜
   ͱ͕Ͱ͖Δ
   3FRVFTU
   41"
   ʢ࣍ճҎ߱͸αʔόʔʹΞΫηεͤͣʹϖʔδભҠͰ͖Δʣ
   

   View Slide

5. 1SPCMFNPGNBLJOH41"
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   ੜͷ+BWB4DSJQU΍K2VFSZͰཁૉΛ੾Γସ͑
   ͍ͯ͘ͱɺεύήοςΟίʔυʹͳΓɺ୯७
   ʹਏ͍
   

   View Slide

6. 8IZ7VFKT
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   ͦ͜Ͱ+BWB4DSJQUϑϨʔϜϫʔΫͷҰͭͰ͋
   Δ 7VFKT ͷग़൪ɻ41"Λ࡞Δࡍʹศརͳػ
   ೳ͕ἧ͍ͬͯΔɻඇৗʹܰྔͳϑϨʔϜϫʔ
   ΫͰ͋Δҝɺֶशίετ΋௿͍ɻ
   

   View Slide

7. 8IZWVFDMJ
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   7VFKT ͷ։ൃ؀ڥߏஙͰ࣌ؒͷ͔͔Δ
   XFCQBDL ΍ -JOU ΍ ςετͷηοτΞοϓ
   ౳ΛίϚϯυҰͭͰ४උͰ͖ΔศརͳίϚϯ
   υ
   

   View Slide

8. \4FUVQ7VFKT
   7VFKT$PVSTF 7
   7VFKT$0634& 7&34*0/
   

   View Slide

9. 7VFKT$PVSTF 7
   *OTUBMMWVFDMJ
   /PEFKTͱOBN͕Πϯετʔ
   ϧ ͞ Εͯ ͍ Δ ͜ ͱ Λ ֬ ೝ
   ͠ɺWVFDMJΛΠϯετʔϧ
   ͠·͢ɻ
   

   View Slide

10. .BLFTUBUJPOFSZ
    7VFKT$PVSTF 7
    7VFKT ΞϓϦέʔγϣϯͷ
    ਽ܗΛͭ͘Γ·͢ɻWVFDMJ
    ͸7VFKTͷ։ൃ؀ڥͷߏங
    Λ؆୯ʹߦ͑·͢ɻ
    

    View Slide

11. 4FUVQ7VFKT
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    7VFKTͰͭ͘Δ41"͸JOEFYIUNMҰຕͰग़
    དྷ͍ͯ·͢ɻͦ͜ʹ+BWBTDSJQUͰ)5.-Λ
    ࠩ͠ସ͑·͢ɻجຊతʹɺදࣔͷࠩ͠ସ͑͸
    WVFSPVUFS ͱ͍͏ެࣜͷϞδϡʔϧΛ࢖͍·
    ͢ɻ
    JOEFYIUNM
    NBJOKT "QQWVF
    )FMMP8PSMEWVF
    path: /
    vue-roter
    

    View Slide

12. -FBSOUIFCBTJDTPG7VFKT
    GSPNUPHHMFDSFBUJPO
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    \
    

    View Slide

13. DSFBUFUPHHMF
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    EBUBϝιου
    WTIPXσΟϨΫςΟϒ
    ৚݅෇͖ϨϯμϦϯά
    
    7VFKTͰ͸σʔλͱ%0.͸ؔ
    ࿈෇͚ΒΕɺͦͯ͠શ͕ͯϦΞ
    ΫςΟϒʹͳΓ·͢ɻཁૉͷද
    ࣔ PS ඇදࣔΛ੾Γସ͑Δ͜ͱ
    ΋؆୯ʹʹͰ͖·͢
    

    View Slide

14. EBUBNFUIPE
    7VFKT$PVSTF 7
    )FMMPX8PSMEWVFΛฤू
    ͠·͠ΐ͏ɻ7VFKT ͷڧ
    ྗͳػೳͰ͋Δσʔλό
    ΠϯσΟϯάʹΑΓςϯ
    ϓϨʔτʹσʔλΛόΠ
    ϯ υ Ͱ ͖ Δ ɻ E B U B Λ
    +BWB4DSJQU͔Βॻ͖׵͑
    Δ͚ͩͰςϯϓϨʔτʹ
    ΋൓ө͞ΕΔɻ
    

    View Slide

15. WTIPXEJSFDUJWF
    7VFKT$PVSTF 7
    WTIPXΛએݴ͠ɺΠίʔ
    ϧͰࢦ͢஋͕ USVF ͳΒ
    දࣔɺGBMTF ͳΒඇදࣔ
    ʹ͢ΔɻTIPX5FYU͕ॻ
    ͖มΘΕ͹ࣗಈͰද͕ࣔ
    มΘΔɻ
    

    View Slide

16. DSFBUFUPHHMF
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    WPOσΟϨΫςΟϒ
    NFUIPETΦϒδΣΫτ
    ΠϕϯτϋϯυϦϯά
    
    WPO σΟϨΫςΟϒΛ࢖͏͜ͱ
    Ͱ ɺ Π ϕ ϯ τ ౳ ͷ ൃ Ր ࣌ ʹ
    +BWB4DSJQUͷ࣮ߦ͕ՄೳʹͳΓ
    ·͢ɻ
    

    View Slide

17. WTIPXEJSFDUJWF
    7VFKT$PVSTF 7
    WTIPXΛએݴ͠ɺΠίʔ
    ϧͰࢦ͢஋͕ USVF ͳΒ
    දࣔɺGBMTF ͳΒඇදࣔ
    ʹ͢ΔɻTIPX5FYU͕ॻ
    ͖มΘΕ͹ࣗಈͰද͕ࣔ
    มΘΔɻ
    

    View Slide

18. \1MBZXJUIDPNQPOFOUT
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    

    View Slide

19. 6TFDPNQPOFOUT
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    ΞϓϦέʔγϣϯΛωετ͞Εͨίϯϙʔω
    ϯτͷπϦʔʹฤ੒͢Δͷ͕ҰൠతͰ͢ɻ࠶
    ར༻Մೳͳ7VFΠϯελϯεͷ࡞੒͕ՄೳͰ
    ͢ɻ
    "QQWVF
    )FMMP8PSMEWVF
    path: /
    vue-roter
    $IJMESFOWVF
    

    View Slide

20. 7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    QSPQT ΦϓγϣϯʹΑΓίϯϙʔωϯτؒͷ
    σʔλͷड͚౉͕͠ՄೳͰ͢ɻQSPQT ͷσʔ
    λͷड͚౉͠͸ৗʹ਌͔Βࢠ΁ͷҰํ޲Ͱ͢ɻ
    )FMMP8PSMEWVF
    path: /
    vue-roter
    $IJMESFOWVF
    6TFDPNQPOFOUT
    QSPQTʹΑΔσʔλͷड͚౉͠
    

    View Slide

21. VTFDPNQPOFOU
    7VFKT$PVSTF 7
    T S D D P N Q P O F O U T
    $IJMESFOWVFͱ͍͏WVF
    ϑΝΠϧΛ࡞ΓɺͦΕΛ
    ࢠίϯϙʔωϯτͱ͠·
    ͢
    

    View Slide

22. 7VFKT$PVSTF 7
    ࢠ ί ϯ ϙ ʔ ω ϯ τ Λ
    )FMMP8PSMEWVFʹΠϯ
    ϙʔτ͠ɺςϯϓϨʔτ
    ʹຒΊࠐΉɻ͜ΕʹͱΓ
    ίϯϙʔωϯτ͕ػೳ͕
    ͱʹ෼ׂͰ͖ɺ࢖͍ճͤ
    Δɻ
    VTFDPNQPOFOU
    

    View Slide

23. 7VFKT$PVSTF 7
    QSPQT ΦϓγϣϯͰɺ਌
    ίϯϙʔωϯτ͔Βࢠί
    ϯϙʔωϯτ΁σʔλΛ
    ड౉͠Մೳɻ
    VTFQSPQT
    

    View Slide

24. 7VFKT$PVSTF 7
    ࢠίϯϙʔωϯτͰQSPQT
    Ͱ౉͖ͬͯͨσʔλΛςϯ
    ϓϨʔτʹඳࣸ
    VTFQSPQT
    

    View Slide

25. \4UBUJDBOE%ZOBNJD3PVUJOH
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    

    View Slide

26. 6TFSPVUFS
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    WVFSPVUFS ͷػೳʹΑΓϖʔδͷ੾Γସ͑Λ
    ؆୯ʹߦ͑·͢ɻϖʔδʹಈతͳཁૉΛ౉͠
    ͍ͨ৔߹͸ಈతͳϧʔςΟϯά΋ՄೳͰ͢ɻ
    "QQWVF
    )FMMP8PSMEWVF
    path: /
    vue-roter
    1BHFTWVF
    path: / pages
    1BHFTWVF
    path: / pages/:id
    

    View Slide

27. 7VFKT$PVSTF 7
    ΞΫηε͢ΔύεͰදࣔ
    ͢ΔίϯϙʔωϯτΛ੾
    Γସ͑ΔɻJE͸ಈతͳύ
    ϥϝʔλͰ͋Γɺίϯϙʔ
    ωϯτʹύϥϝʔλΛ౉
    ͤΔ
    VTFWVFSPVUFS
    

    View Slide

28. 7VFKT$PVSTF 7
    1BHFTWVFͰSPVUFQBSBNT
    ͔ΒύεͷJEͰࢦఆ͞Εͨύ
    ϥϝʔλΛड͚औΕΔ
    VTFWVFSPVUFS
    

    View Slide

29. \"DDFTT"1*WJBBYJT
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    

    View Slide

30. "DDFTT"1*WJBBYJPTNPEVMF
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    αʔόʔͱ௨৴Λߦ͏ҝʹศརͳ )551Ϋϥ
    ΠΞϯτͰ͋Δ BYJPT Ϟδϡʔϧ͕࢖͏ͱ؆
    ୯ʹ"1*ʹඇಉظʹΞΫηε͕Ͱ͖·͢ɻ
    3FRVFTU
    3FTQPOTF
    

    View Slide

31. 7VFKT$PVSTF 7
    BYJPTͳͲͷϞδϡʔϧ͸
    OQN JOTUBMM ίϚϯυͰ
    ΠϯετʔϧͰ͖Δɻ͋
    ͱ͸͜ΕΛ+BWB4DSJQUଆ
    ͰಡΈ͜Ή͚ͩͰ࢖͑Δ
    *OTUBMMBYJPT
    

    View Slide

32. 7VFKT$PVSTF 7
    BYJPTͰ"1*ʹΞΫηε͠ɺ
    ؼͬͯདྷͨ+40/σʔλ
    ΛςϯϓϨʔτʹόΠϯ
    σΟϯά
    VTFBYJPT
    

    View Slide

33. 7VFKT$PVSTF 7
    OPEFKTͰ࡞ͬͨ"1*αʔ
    όʔΛ্ཱͪ͛Δ
    MJTUFO"1*TFSWFS
    

    View Slide

34. \8IBUUPMFBSOOFYU
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    

    View Slide

35. 8IBUUPMFBSOOFYU
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    7VFͷ༷ʑͳػೳʹ;ΕͯΈΔ
    
    ࠓճ࢖ͬͨػೳҎ֎ʹ΋ศརͳσΟϨΫςΟ
    ϒ΍ΦϒδΣΫτ͕͋Δɻ7VFKTͷ೔ຊޠυ
    Ωϡϝϯτ͸͔ͳΓॆ࣮͍ͯ͠Δҝɺͬ͟ͱ
    ໨Λ௨͢ͱྑ͍ɻWGPS WNPEFM WJG ͋ͨΓ
    ͸࠷௿ݶ཈͍͑ͨ
    

    View Slide

36. 8IBUUPMFBSOOFYU
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    7VFY
    
    7VFKT ʹ͓͚Δঢ়ଶ؅ཧύλʔ
    ϯϥΠϒϥϦͰ͢ɻ͜Ε͸σʔ
    λʹର͢ΔϧʔϧΛอূ͠ɺݟ
    ௨͠ͷྑ͍σʔλͷѻ͍ΛՄೳ
    ʹ͠·͢ɻ
    

    View Slide

37. 8IBUUPMFBSOOFYU
    7VFKT$PVSTF 7
    7VFKT$0634& 7&34*0/
    /VYU
    
    7VFKT ʹ͓͚Δ։ൃʹ͓͍ͯɺ
    ίʔυΛߋʹॻ͖΍͘͢͢Δ؀
    ڥ΍αʔόʔαΠυϨϯμϦϯ
    ά͕؆୯ʹߦ͑Δɻ੩తαΠτ
    ΍18"։ൃʹ΋ಋೖ͞Ε͍ͯ
    Δɻ
    

    View Slide