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
Laravel+Vue.jsで0からサービス開発してみた
Search
大塚真言
June 27, 2018
0
440
Laravel+Vue.jsで0からサービス開発してみた
大塚真言
June 27, 2018
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
280
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
95
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
280
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
7.1k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
870
PHP8をざっくり解説してみる
shingen29
0
310
最近のプロジェクトを振り返ってみる
shingen29
0
380
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
840
Stripe CLIを触ってみた!
shingen29
1
240
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Gamification - CAS2011
davidbonilla
81
5.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Rails Girls Zürich Keynote
gr2m
94
14k
Fireside Chat
paigeccino
37
3.5k
Side Projects
sachag
455
42k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
Laravel+Vue.jsͰ 0͔ΒαʔϏε։ൃͯ͠Έͨ 2018/06/26 ٶ࡚×ԭೄ JSφΠτ
<جຊใ> - େ௩ਅݴʢ໊͋ͩɿ͠Μ͛Μʣ - ϑϦʔϥϯεWebΤϯδχΞ - ౦ژੜ·Εҭͪɺ2017ΑΓٶ࡚ʹҠॅ - झຯΩϟϯϓͱϑΣε <ܦྺ>
- ৽ଔͰ࢜௨ʹೖࣾ͠3΄ͲγεςϜΤϯδχΞΛܦݧ - ΫϥυϑΝϯσΟϯάFAAVOͰWebΤϯδχΞͱͯ͠ࢀը͠ɺ PHPΛ৮Γ࢝ΊΔɻ - 3΄Ͳอकӡ༻Λܦݧ͠ɺ20183݄͔ΒϑϦʔϥϯεͱͯ͠׆ ಈத <εΩϧ> - PHP, Laravel, Vue.js, AWS ࣗݾհ
ʻରऀʼ Laravel × Vue.js × SPA (SinglePageApplication) ʹڵຯ͕͋Δਓ Vue.jsΛ࢝ΊͯΈ͍ͨਓ ʻԿΛ͢ʁʼ
SPAͷجૅɺϝϦοτ γεςϜߏͷબఆཧ༝ Vue.jsͷجૅ Laravel + Vue.js + SPA ։ൃͯ͠Έͯͷॴײ ʻΰʔϧʼ Έͳ͞Μʹ Laravel × Vue.js × SPA Ͱ։ൃͯ͠Έ͍ͨͱࢥͬͯΒ͏ ࠓ͢͜ͱ
1. ։ൃͨ͠γεςϜ 2. γεςϜߏͱͦͷબఆཧ༝ 3. Vue.js ͷׂ 4. ྑ͔ͬͨ 5.
՝/ࠓޙʹ͍ͭͯ ࣍
ڭҭܥίϯςϯπʹಛԽͨ͠ϚʔέοτϓϨΠε ػೳҰཡ ɾϢʔβཧʢϩάΠϯɺϢʔβใมߋͳͲʣ ɾίϯςϯπཧ ɾܾࡁ ɾΧʔτ ɾϨϏϡʔ ɾཧը໘ʢίϯςϯπͷঝೝɺ͓Βͤʣ ※Ӷҙ։ൃதͷͨΊ͓ݟͤ͢Δ͜ͱ͕Ͱ͖·ͤΜ… ։ൃͨͯ͠͠ΔγεςϜ
Laravel × Vue.js × SPA γεςϜߏ αʔό Vue.js Laravel ॳճϦΫΤετ
)5.- $44 +4 "1*ϦΫΤετ +40/ ॳճͷΈϨϯμϦϯάʹ͕͔͔࣌ؒΔ αʔόAPI͚ͩΛఏڙ͢Δ ಈతʹมߋ͢Δ෦ͷΈ௨৴͢ΔͷͰද͕ࣔૣ͍
1. SPAΛ࡞ͬͯΈ͔ͨͬͨ →SPAͷϢʔβϏϦςΟ৺Α͍ 2. Laravel+Vue.jsͷਓؾ →GithubͷελʔͰ ɹϥΠόϧʁΛ͑ͨ 3. Vue.jsඪ४ͷvue-router ʢϧʔςΟϯάʣΛ͑
؆୯ʹSPAʹରԠՄೳ બఆཧ༝ IUUQTUXJUUFSDPNLPUBNBUTTUBUVT
1. Viewͷඳը Vue.jsͷׂ <template>͕Viewͱͯ͠ϨϯμϦϯά͞ΕΔ
2. มͷόΠϯυ Vue.jsͷׂ contentΦϒδΣΫτͷnameϓϩύςΟΛόΠϯσΟϯά
3. ίϯϙʔωϯτ Vue.jsͷׂ ContentDetailίϯϙʔωϯτΛݺͼग़͢ ҾͷΑ͏ʹcontentΦϒδΣΫτΛ͢͜ͱՄೳ
4. σΟϨΫςΟϒ Vue.jsͷׂ v-if σΟϨΫςΟϒ όΠϯυ͕ͨ͠trueධՁͰ͋ΕDOMཁૉ͕ੜ͞Ε falseͰ͋Εഁغ͞ΕΔ
5. αʔόαΠυͷϦΫΤετ Vue.jsͷׂ axios Vue.jsͷެࣜυΩϡϝϯτͰਪ͞Ε͍ͯΔ HTTPΫϥΠΞϯτ APIϦΫΤετΛ͛ͯɺ݁ՌΛऔಘ͢Δ
ʢ͔͜͜ΒॴײͰ͢ʣ 1. σʔλऔಘ͔Βදࣔ·Ͱ͕͔Γ͍͢ 2. ίϯϙʔωϯτׂʹΑΓϝϯςφϯεੑ্ 3. Laravel×Vue.js×SPAͷςϯϓϨʔτʹΑΓ։ൃڥߏங ͕രʹͰ͖ͨ 4. ϑϩϯτͱόοΫΤϯυͰ΄΅શʹۀͰ͖ͨ
ྑ͔ͬͨ
σʔλऔಘ͔Βදࣔ·Ͱ͕͔Γ͍͢ ᶃ ϓϩύςΟΛఆٛ ᶄ VueΠϯελϯε͕ੜ͞ΕͨλΠϛϯάͰϝιουݺͼग़͠ ᶅ APIݺͼग़͠ ᶆ ϓϩύςΟʹΛηοτ ᶇ
ϓϩύςΟʹ͕ηοτ͞ΕΔલ·ͰϩʔσΟϯάදࣔ ᶈ ࢠίϯϙʔωϯτʹΛ͢ ᶉ ΛΛදࣔ ίϯϙʔωϯτʢσʔλऔಘʣ ίϯϙʔωϯτʢσʔλදࣔʣ ࢠίϯϙʔωϯτʢσʔλදࣔʣ
components ࠶ར༻Λલఏͱͨ͠ίϯϙʔωϯτ pages ϧʔςΟϯάͱରʹͳΔίϯϙʔωϯτ ↓ γϯϓϧͳσΟϨΫτϦߏͰཧղ͍͢͠ ίϯϙʔωϯτׂʹΑΓ ɹɹɹɹɹɹɹϝϯςφϯεੑ্
https://github.com/cretueusebiu/laravel-vue-spa Laravel×Vue.js×SPAͷςϯϓϨʔτ ɹɹɹɹʹΑΓ։ൃڥߏங͕രʹͰ͖ͨ Githubελʔɿ800͘Β͍ VueRouter, Vuex ಋೖࡁΈ ΧελϜϨΠΞτରԠ ձһొɺϩάΠϯ/ϩάΞτɺ ύεϫʔυΕͳͲ࣮ࡁΈ
JWT(JSON Web Token) ʹΑΔAPI ೝূઃఆࡁΈ Bootstrap4 + Font Awesomeಋ ೖࡁΈ
ϑϩϯτͱόοΫΤϯυͰ ɹɹɹɹɹɹɹ΄΅શʹۀͰ͖ͨ A͞Μɿhtml, cssͷϚʔΫΞοϓ B͞ΜɿLaravelͰAPI࣮ C͞ΜɿVue.jsͰAPIͱϑϩϯτͷܨ͗ࠐΈ A͞ΜͱB͞Μฏߦͯ͠࡞ۀ
1. publicͳϖʔδʹSPAԽ͍ͯ͠ΔͷͰSEOରࡦOGPରԠ͕Ͱ͖͍ͯ ͳ͍ʢOGP݁ߏ·͍ͣ…ʣ →Nuxt.jsͰSSRʢαʔόαΠυϨϯμϦϯάʣ͢Δ 2. ϦϑΝΫλϦϯά →ίϯϙʔωϯτͷσΟϨΫτϦߏॏෳίʔυͷίϯϙʔωϯτԽΛ ਐΊΔ 3. ԿΑΓແࣄʹϦϦʔεͰ͖ΔΑ͏ؤுΔ
→ॳ༧ఆ6݄த०ͩͬͨɻɻɻܾࡁ·ΘΓ͕ෆ҆Ͱ͋Δ ՝/ࠓޙऔΓΈ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ