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
980
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
240
Go Templateを使った フロントエンド開発を採用した 経緯と所感
po3rin
0
210
検索基盤移行時の思考
po3rin
0
4.1k
Go1.19で採用された Pattern-defeating Quicksort の紹介
po3rin
7
4.7k
Elasticsearchを負荷から守るesguard
po3rin
0
200
Sudachi×Elasticsearchへの移行と医療検索システム精度改善
po3rin
1
700
eskeeperを使ったファイル定義によるindex管理
po3rin
2
390
M3 情報検索/推薦論文輪読会 ~SIGIR祭~ (SIGIR2021: Session 6D – IR Models)
po3rin
0
61
Handling Temporal Query for Health Search with ja-timex
po3rin
3
240
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
The Cult of Friendly URLs
andyhume
74
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
How GitHub (no longer) Works
holman
304
140k
Scaling GitHub
holman
457
140k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
A Tale of Four Properties
chriscoyier
151
22k
For a Future-Friendly Web
brad_frost
172
9k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
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"։ൃʹಋೖ͞Ε͍ͯ Δɻ