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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Decks by po3rin

Featured

Transcript