Laravel+Vue.jsで0からサービス開発してみた

Transcript

1. Laravel+Vue.jsͰ 0͔ΒαʔϏε։ൃͯ͠Έͨ 2018/06/26 ٶ࡚×ԭೄ JSφΠτ
2. <جຊ৘ใ> - େ௩ਅݴʢ໊͋ͩɿ͠Μ͛Μʣ - ϑϦʔϥϯεWebΤϯδχΞ - ౦ژੜ·Εҭͪɺ2017೥ΑΓٶ࡚ʹҠॅ - झຯ͸ΩϟϯϓͱϑΣε <ܦྺ> - ৽ଔͰ෋࢜௨ʹೖࣾ͠3೥΄ͲγεςϜΤϯδχΞΛܦݧ - Ϋϥ΢υϑΝϯσΟϯάFAAVOͰWebΤϯδχΞͱͯ͠ࢀը͠ɺ PHPΛ৮Γ࢝ΊΔɻ - 3೥΄Ͳอकӡ༻Λܦݧ͠ɺ2018೥3݄͔ΒϑϦʔϥϯεͱͯ͠׆ ಈத <εΩϧ> - PHP, Laravel, Vue.js, AWS ࣗݾ঺հ
3. ʻର৅ऀʼ Laravel × Vue.js × SPA (SinglePageApplication) ʹڵຯ͕͋Δਓ Vue.jsΛ࢝ΊͯΈ͍ͨਓ ʻԿΛ࿩͢ʁʼ SPAͷجૅɺϝϦοτ γεςϜߏ੒ͷબఆཧ༝ Vue.jsͷجૅ Laravel + Vue.js + SPA ։ൃͯ͠Έͯͷॴײ ʻΰʔϧʼ Έͳ͞Μʹ Laravel × Vue.js × SPA Ͱ։ൃͯ͠Έ͍ͨͱࢥͬͯ΋Β͏ ࠓ೔࿩͢͜ͱ
4. 1. ։ൃͨ͠γεςϜ 2. γεςϜߏ੒ͱͦͷબఆཧ༝ 3. Vue.js ͷ໾ׂ 4. ྑ͔ͬͨ఺ 5. ՝୊/ࠓޙʹ͍ͭͯ ໨࣍
5. ڭҭܥίϯςϯπʹಛԽͨ͠ϚʔέοτϓϨΠε ػೳҰཡ ɾϢʔβ؅ཧʢϩάΠϯɺϢʔβ৘ใมߋͳͲʣ ɾίϯςϯπ؅ཧ ɾܾࡁ ɾΧʔτ ɾϨϏϡʔ ɾ؅ཧը໘ʢίϯςϯπͷঝೝɺ͓஌Βͤʣ ※Ӷҙ։ൃதͷͨΊ͓ݟͤ͢Δ͜ͱ͕Ͱ͖·ͤΜ… ։ൃͨͯ͠͠ΔγεςϜ
6. Laravel × Vue.js × SPA γεςϜߏ੒ αʔό Vue.js Laravel ॳճϦΫΤετ )5.- $44 +4 "1*ϦΫΤετ +40/ ॳճͷΈϨϯμϦϯάʹ͕͔͔࣌ؒΔ αʔό͸API͚ͩΛఏڙ͢Δ ಈతʹมߋ͢Δ෦෼ͷΈ௨৴͢ΔͷͰදࣔ଎౓͕ૣ͍
7. 1. SPAΛ࡞ͬͯΈ͔ͨͬͨ →SPAͷϢʔβϏϦςΟ͸৺஍Α͍ 2. Laravel+Vue.jsͷਓؾ →Githubͷελʔ਺Ͱ ɹϥΠόϧʁΛ௒͑ͨ 3. Vue.jsඪ४ͷvue-router ʢϧʔςΟϯάʣΛ࢖͑͹ ؆୯ʹSPAʹରԠՄೳ બఆཧ༝ IUUQTUXJUUFSDPNLPUBNBUTTUBUVT
8. 1. Viewͷඳը Vue.jsͷ໾ׂ <template>಺͕Viewͱͯ͠ϨϯμϦϯά͞ΕΔ
9. 2. ม਺ͷόΠϯυ Vue.jsͷ໾ׂ contentΦϒδΣΫτͷnameϓϩύςΟΛόΠϯσΟϯά
10. 3. ίϯϙʔωϯτ Vue.jsͷ໾ׂ ContentDetailίϯϙʔωϯτΛݺͼग़͢ Ҿ਺ͷΑ͏ʹcontentΦϒδΣΫτΛ౉͢͜ͱ΋Մೳ
11. 4. σΟϨΫςΟϒ Vue.jsͷ໾ׂ v-if σΟϨΫςΟϒ όΠϯυͨ͠஋͕trueධՁͰ͋Ε͹DOMཁૉ͕ੜ੒͞Ε falseͰ͋Ε͹ഁغ͞ΕΔ
12. 5. αʔόαΠυ΁ͷϦΫΤετ Vue.jsͷ໾ׂ axios Vue.jsͷެࣜυΩϡϝϯτͰਪ঑͞Ε͍ͯΔ HTTPΫϥΠΞϯτ API΁ϦΫΤετΛ౤͛ͯɺ݁ՌΛऔಘ͢Δ
13. ʢ͔͜͜Β͸ॴײͰ͢ʣ 1. σʔλऔಘ͔Βදࣔ·Ͱ͕෼͔Γ΍͍͢ 2. ίϯϙʔωϯτ෼ׂʹΑΓϝϯςφϯεੑ޲্ 3. Laravel×Vue.js×SPAͷςϯϓϨʔτʹΑΓ։ൃ؀ڥߏங ͕ര଎ʹͰ͖ͨ 4. ϑϩϯτͱόοΫΤϯυͰ΄΅׬શʹ෼ۀͰ͖ͨ ྑ͔ͬͨ఺
14. σʔλऔಘ͔Βදࣔ·Ͱ͕෼͔Γ΍͍͢ ᶃ ϓϩύςΟΛఆٛ ᶄ VueΠϯελϯε͕ੜ੒͞ΕͨλΠϛϯάͰϝιουݺͼग़͠ ᶅ APIݺͼग़͠ ᶆ ϓϩύςΟʹ஋Ληοτ ᶇ ϓϩύςΟʹ஋͕ηοτ͞ΕΔ௚લ·ͰϩʔσΟϯάදࣔ ᶈ ࢠίϯϙʔωϯτʹ஋Λ౉͢ ᶉ ஋ΛΛදࣔ ਌ίϯϙʔωϯτʢσʔλऔಘʣ ਌ίϯϙʔωϯτʢσʔλදࣔʣ ࢠίϯϙʔωϯτʢσʔλදࣔʣ
15. components ࠶ར༻Λલఏͱͨ͠ίϯϙʔωϯτ pages ϧʔςΟϯάͱରʹͳΔ਌ίϯϙʔωϯτ ↓ γϯϓϧͳσΟϨΫτϦߏ੒Ͱཧղ͠΍͍͢ ίϯϙʔωϯτ෼ׂʹΑΓ ɹɹɹɹɹɹɹϝϯςφϯεੑ޲্
16. https://github.com/cretueusebiu/laravel-vue-spa Laravel×Vue.js×SPAͷςϯϓϨʔτ ɹɹɹɹʹΑΓ։ൃ؀ڥߏங͕ര଎ʹͰ͖ͨ Githubελʔ਺ɿ800͘Β͍ VueRouter, Vuex ಋೖࡁΈ ΧελϜϨΠΞ΢τରԠ ձһొ࿥ɺϩάΠϯ/ϩάΞ΢τɺ ύεϫʔυ๨ΕͳͲ࣮૷ࡁΈ JWT(JSON Web Token) ʹΑΔAPI ೝূઃఆࡁΈ Bootstrap4 + Font Awesome΋ಋ ೖࡁΈ
17. ϑϩϯτͱόοΫΤϯυͰ ɹɹɹɹɹɹɹ΄΅׬શʹ෼ۀͰ͖ͨ A͞Μɿhtml, cssͷϚʔΫΞοϓ B͞ΜɿLaravelͰAPI࣮૷ C͞ΜɿVue.jsͰAPIͱϑϩϯτͷܨ͗ࠐΈ A͞ΜͱB͞Μ͸ฏߦͯ͠࡞ۀ
18. 1. publicͳϖʔδʹ΋SPAԽ͍ͯ͠ΔͷͰSEOରࡦ΍OGPରԠ͕Ͱ͖͍ͯ ͳ͍ʢOGP͸݁ߏ·͍ͣ…ʣ →Nuxt.jsͰSSRʢαʔόαΠυϨϯμϦϯάʣ͢Δ 2. ϦϑΝΫλϦϯά →ίϯϙʔωϯτͷσΟϨΫτϦߏ੒΍ॏෳίʔυͷίϯϙʔωϯτԽΛ ਐΊΔ 3. ԿΑΓແࣄʹϦϦʔεͰ͖ΔΑ͏ؤுΔ →౰ॳ༧ఆ͸6݄த०ͩͬͨɻɻɻܾࡁ·ΘΓ͕ෆ҆Ͱ͋Δ ՝୊/ࠓޙऔΓ૊Έ
19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ