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
270
Go Templateを使った フロントエンド開発を採用した 経緯と所感
po3rin
0
280
検索基盤移行時の思考
po3rin
0
4.2k
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
5.4k
Elasticsearchを負荷から守るesguard
po3rin
0
230
Sudachi×Elasticsearchへの移行と医療検索システム精度改善
po3rin
1
800
eskeeperを使ったファイル定義によるindex管理
po3rin
2
440
M3 情報検索/推薦論文輪読会 ~SIGIR祭~ (SIGIR2021: Session 6D – IR Models)
po3rin
0
73
Handling Temporal Query for Health Search with ja-timex
po3rin
3
300
Featured
See All Featured
How GitHub (no longer) Works
holman
311
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
31
1.7k
Speed Design
sergeychernyshev
23
550
Git: the NoSQL Database
bkeepers
PRO
425
64k
Rails Girls Zürich Keynote
gr2m
93
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
Facilitating Awesome Meetings
lara
49
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
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"։ൃʹಋೖ͞Ε͍ͯ Δɻ