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
430
Laravel+Vue.jsで0からサービス開発してみた
大塚真言
June 27, 2018
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
260
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
85
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
250
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
6.6k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
840
PHP8をざっくり解説してみる
shingen29
0
300
最近のプロジェクトを振り返ってみる
shingen29
0
360
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
800
Stripe CLIを触ってみた!
shingen29
1
220
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Optimizing for Happiness
mojombo
376
70k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Invisible Side of Design
smashingmag
299
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Cult of Friendly URLs
andyhume
78
6.2k
Embracing the Ebb and Flow
colly
84
4.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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݄த०ͩͬͨɻɻɻܾࡁ·ΘΓ͕ෆ҆Ͱ͋Δ ՝/ࠓޙऔΓΈ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ