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
M3におけるCI/CDパイプラインを新鮮に保つ仕組み
po3rin
0
360
Go Templateを使った フロントエンド開発を採用した 経緯と所感
po3rin
1
340
検索基盤移行時の思考
po3rin
0
4.3k
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
6.1k
Elasticsearchを負荷から守るesguard
po3rin
0
300
Sudachi×Elasticsearchへの移行と医療検索システム精度改善
po3rin
1
930
eskeeperを使ったファイル定義によるindex管理
po3rin
2
510
M3 情報検索/推薦論文輪読会 ~SIGIR祭~ (SIGIR2021: Session 6D – IR Models)
po3rin
0
130
Handling Temporal Query for Health Search with ja-timex
po3rin
3
350
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Making Projects Easy
brettharned
116
6.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Invisible Side of Design
smashingmag
301
51k
Code Reviewing Like a Champion
maltzj
524
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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"։ൃʹಋೖ͞Ε͍ͯ Δɻ