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
94
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
270
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
7k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
860
PHP8をざっくり解説してみる
shingen29
0
310
最近のプロジェクトを振り返ってみる
shingen29
0
380
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
840
Stripe CLIを触ってみた!
shingen29
1
230
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.4k
Designing Experiences People Love
moore
142
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Scaling GitHub
holman
459
140k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Fireside Chat
paigeccino
37
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Invisible Side of Design
smashingmag
299
50k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Speed Design
sergeychernyshev
30
980
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݄த०ͩͬͨɻɻɻܾࡁ·ΘΓ͕ෆ҆Ͱ͋Δ ՝/ࠓޙऔΓΈ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ