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

Ca1357a6e793898d30cec23068c3cb36?s=47 大塚真言
June 27, 2018
310

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

Ca1357a6e793898d30cec23068c3cb36?s=128

大塚真言

June 27, 2018
Tweet

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