Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LaravelとNuxt.jsで保守性を高める構成を考えてみた

 LaravelとNuxt.jsで保守性を高める構成を考えてみた

LaravelとNuxt.jsで保守性を高める構成を考えてみた

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

May 29, 2021
Tweet

Transcript

  1. 鈴木孝之 LaravelͱNuxt.jsͰอकੑΛ ߴΊΔߏ੒Λߟ͑ͯΈͨ

  2. "HFOEB ࣗݾ঺հ 41"։ൃͷ՝୊ ߟ͑ͯΈͨϓϩδΣΫτߏ੒ ಘΒΕΔϝϦοτ

  3. Copyright Re:Build.inc All Rights Reserved. ର৅ऀʹ͍ͭͯ 0 -BSBWFMͱ7VFKT/VYUKTΛ࢖͍ͬͯΔ σΟϨΫτϦߏ੒ͳͲΛ໛ࡧத ՄಡੑɾอकੑΛ্͍͛ͨ

  4. ࣗݾ঺հɾձࣾ঺հ

  5. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1 ◆໊લ ླ໦ ޹೭(Suzuki

    Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ੜ·Εɻ ɾԭೄͰىۀͯ͠໿2೥൒ɻ ɾPHPΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕ɺ ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ࣮ߦҕһ௕ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ BDD(Ϗʔνۦಈ։ൃ)
  6. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  7. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  8. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  9. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  10. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  11. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  12. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1

  13. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ 1 ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ

    ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 10໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
  14. Copyright Re:Build.inc All Rights Reserved. 1 4 ɾαʔϏε໊ Tadoru
 https://tadoru.work/


    
 ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥ΢υιʔγϯά 1 ձࣾ঺հ
  15. Copyright Re:Build.inc All Rights Reserved. 1 5 ɾαʔϏε໊ Re:Build Boot

    Camp
 https://rebuild-bootcamp.jp/
 
 ɾ֓ཁ ԭೄͱٶ࡚Ͱʮ࣮຿ϨϕϧʯΛ໨ ࢦ͢ํ޲͚ͷϓϩάϥϛϯάε Ϋʔϧ ɾ࢖͏ٕज़ LaravelɺVue.jsͳͲ 1 ձࣾ঺հ
  16. Copyright Re:Build.inc All Rights Reserved. 1 6 ࣮຿Ϩϕϧ ॳ৺ऀ ॳڃऀ

    ஍ํͷॳ৺ऀ޲͚ͷϓϩάϥ ϛϯάεΫʔϧΛଔۀͨ͠ޙ ͷॳڃऀ͔Β࣮຿Ϩϕϧ·Ͱ ͷؒΛຒΊΔεΫʔϧ 1 ձࣾ঺հ
  17. 41"։ൃͷ՝୊

  18. Copyright Re:Build.inc All Rights Reserved. 2 SPA։ൃͷ՝୊ ϑϩϯτΤϯυͱόοΫ ΤϯυͰܕͷ੔߹ੑΛ୲ อ͍ͨ͠

    SPAͷߏ੒ͬͯϕετϓ ϥΫςΟεΛݟ͚ͭΔͷ ͕೉͍͠
  19. Copyright Re:Build.inc All Rights Reserved. ෭ۀɺϑϦʔϥϯεɺΦϑγϣΞɺ৽ਓͳͲ ͍ΖΜͳਓ͕ϓϩδΣΫτʹࢀը͍ͯ͠Δͱ ಛʹεύήςΟʹͳΓ͕ͪʂʂʂ 2 SPA։ൃͷ՝୊(ͱ͍͏͔େن໛ϓϩδΣΫτͷ՝୊)

  20. ߟ͑ͯΈͨϓϩδΣΫτߏ੒

  21. 2 1 બఆٕͨ͠ज़ ▪ٕज़ཁ݅ ɾαʔόαΠυ PHP(Laravel6) ɾϑϩϯτΤϯυ JavaScript(Vue.js,Nuxt.js) TypeScript ɾςετ

    PHPUnit ɾ੩తղੳ ESlint,Stylelint PHPStan,phpcs,phpmd ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7,nginx,mariadb,docker,webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳ Ͳ),Slack,phpStorm
  22. ϑϩϯτΤϯυ αʔόαΠυ શମߏ੒(ࣗࣾαʔϏεOREIO) Gitlab CI ςετɾLintͳͲ ςετɾLintͳͲ ֤lint

  23. ϑϩϯτΤϯυ શମߏ੒ αʔόαΠυ(API) ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ Component HTML CSS JS Pages

    request.ts response.ts Types Resouce.php APIϦΫΤετ APIϨεϙϯε ϦΫΤετɾϨεϙϯεͷ ܕΛఆٛ Request.php router controller Model Database router όϦσʔγϣϯ Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ Libs/api/index.ts
  24. (1)PUSH (2)GitlabCI࣮ߦ (3)ίϯςφىಈ Gitlab (6)Envoy࣮ߦ ςετ࣮ߦ ίϯςφ σϓϩΠ࣮ߦ ίϯςφ (5)ίϯςφىಈ

    (4)UnitTest࣮ߦ (7)Pull εςʔδϯά؀ڥ ϦϙδτϦ Gitlab CI
  25. ੩తղੳͷઃఆ phpcs.xml - PSR12ͷνΣο ΫͳͲ

  26. ੩తղੳͷઃఆ phpmd.xml - ίʔυαΠζͷνΣοΫ - ࢖ΘΕ͍ͯͳ͍ίʔυͷ νΣοΫ - ม਺໊ͳͲͷνΣοΫ

  27. ੩తղੳͷઃఆ eslint - AirbnbͷJavaScript Style GuideΛίʔσΟϯάن໿ͱ ͢Δɻ - Prettier ͳͲ

    https://www.wantedly.com/companies/askul/post_articles/155377
  28. ੩తղੳͷઃఆ stylelint - CSSͷߏจΤϥʔ - ϑΥʔϚοτͱҰ؏ੑ - ελΠϧͷॏෳΛݮΒ͢ ͳͲ https://www.webprofessional.jp/taking-css-linting-next-level-stylelint/

  29. ϑϩϯτΤϯυ શମߏ੒ αʔόαΠυ(API) ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ Component HTML CSS JS Pages

    request.ts response.ts Types Resouce.php APIϦΫΤετ APIϨεϙϯε ϦΫΤετɾϨεϙϯεͷ ܕΛఆٛ Request.php router controller Model Database router όϦσʔγϣϯ Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ Libs/api/index.ts
  30. ϑϩϯτΤϯυ σΟϨΫτϦߏ੒ APIͷϦΫΤετɾϨε ϙϯεͷఆٛ ϛυϧ΢ΣΞ APIϦΫΤετ constͳͲ Axios΍ϥΠϒ ϥϦͳͲ

  31. ϑϩϯτΤϯυ request.ts ܕΛinterfaceͰఆٛ

  32. ϑϩϯτΤϯυ index.ts APIΛϦΫΤετ

  33. ϑϩϯτΤϯυ શମߏ੒ αʔόαΠυ(API) ϒϥ΢β͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ Component HTML CSS JS Pages

    request.ts response.ts Types Resouce.php APIϦΫΤετ APIϨεϙϯε ϦΫΤετɾϨεϙϯεͷ ܕΛఆٛ Request.php router controller Model Database router όϦσʔγϣϯ Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ Libs/api/index.ts
  34. όοΫΤϯυΤϯυ σΟϨΫτϦߏ੒ ϦΫΤετɾ Ϩεϙϯε αʔυύʔςΟ Λୟ͘ͳͲ

  35. όοΫΤϯυ Request.php όϦσʔγϣϯϧʔϧΛ ఆٛ͢Δ

  36. όοΫΤϯυ Resource.php Ϩεϙϯε͕ՄࢹԽ͞Ε͍ͯΔɻ ඞཁͳ஋͚ͩฦͬͯ͘Δ

  37. ಘΒΕΔϝϦοτ

  38. Copyright Re:Build.inc All Rights Reserved. ·ͱΊ - ΦϑγϣΞ։ൃͳͲจԽ͕ҧ͏ΤϯδχΞʹ΋ҰఆͷίʔσΟϯάن໿Ͱ౷Ұ Ͱ͖Δ
 -

    ೖΕସΘΓ͕ܹ͍͠׌ͭɺେਓ਺ͷϓϩδΣΫτͰ΋ॻ͖ํΛ౷ҰͰ͖Δ
 - ܕ΍ϦΫΤετϨεϙϯε͕ՄࢹԽ͞Ε͍ͯΔͷͰɺΤϥʔͷ੾Γ෼͚͕͠΍ ͍͢
  39. Copyright Re:Build.inc All Rights Reserved. ·ͱΊ ͜ΕͳΒɺ෭ۀɺϑϦʔϥϯεɺΦϑγϣΞ ͍ΖΜͳਓ͕ೖͬͯ΋҆৺ʂʂʂʂ