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
850
Stripe CLIを触ってみた!
shingen29
1
240
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Side Projects
sachag
455
42k
GitHub's CSS Performance
jonrohan
1031
460k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
BBQ
matthewcrist
89
9.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
4 Signs Your Business is Dying
shpigford
184
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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݄த०ͩͬͨɻɻɻܾࡁ·ΘΓ͕ෆ҆Ͱ͋Δ ՝/ࠓޙऔΓΈ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ