Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js入門!VueCLIからSPAフロントエンド開発を学ぶ
Search
po3rin
July 02, 2018
1
1k
Vue.js入門!VueCLIからSPAフロントエンド開発を学ぶ
Vue.js入門勉強会の資料です
全サンプルソースコードはこちら
GitHub :
https://github.com/po3rin/Introduction-Vue.js
po3rin
July 02, 2018
Tweet
Share
More Decks by po3rin
See All by po3rin
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
1k
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
4
2.4k
M3におけるCI/CDパイプラインを新鮮に保つ仕組み
po3rin
0
380
Go Templateを使った フロントエンド開発を採用した 経緯と所感
po3rin
1
350
検索基盤移行時の思考
po3rin
0
4.3k
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
6.2k
Elasticsearchを負荷から守るesguard
po3rin
0
310
Sudachi×Elasticsearchへの移行と医療検索システム精度改善
po3rin
1
960
eskeeperを使ったファイル定義によるindex管理
po3rin
2
520
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
The Cult of Friendly URLs
andyhume
79
6.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Agile that works and the tools we love
rasmusluckow
330
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Statistics for Hackers
jakevdp
799
220k
Transcript
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/ ੜͷ+BWB4DSJQUK2VFSZͰཁૉΛΓସ͑ ͍ͯ͘ͱɺεύήοςΟίʔυʹͳΓɺ୯७ ʹਏ͍
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"։ൃʹಋೖ͞Ε͍ͯ Δɻ