Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

po3rin
July 02, 2018
970

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

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

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

po3rin

July 02, 2018
Tweet

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