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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ