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

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

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

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

Takayuki

May 29, 2021
Tweet

More Decks by Takayuki

Other Decks in Technology

Transcript

  1. Copyright Re:Build.inc All Rights Reserved. ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ 0 -BSBWFMத৺ͷઃܭʹ͍ͭͯ 7VFKT/VYUKTͷઃܭʹ͍ͭͯ গ͠

     σΟϨΫτϦߏ੒ͳͲ ࿩͢͜ͱ ࿩͞ͳ͍͜ͱ ΠϯϑϥपΓͷৄ͍͠࿩ ϚωδϝϯτɾνʔϜମ੍ ͳͲ
  2. Copyright Re:Build.inc All Rights Reserved. ࣗݾ঺հ 1 ◆໊લ ླ໦ ޹೭(Suzuki

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

    ԭೄݝಹ೼ࢢٱໜ஍2-2-2 λΠϜεϏϧ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ɾϓϩάϥϛϯάεΫʔϧ ◆ࣾһ 11໊ ΤϯδχΞืूͯ͠·͢ʂʂʂ
  4. Copyright Re:Build.inc All Rights Reserved. 1 3 ɾαʔϏε໊ Tadoru
 https://tadoru.work/


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


    ɾγεςϜ֓ཁ ༷ʑͳΩϟϦΞͷΤϯδχΞʹ ΩϟϦΞ૬ஊͰ͖ΔαʔϏε 1 ձࣾ঺հ
  6. Copyright Re:Build.inc All Rights Reserved. อकੑͱ͸ - อक࡞ۀΛ࣮ࢪ͢Δ͜ͱͰɺػೳ΍ঢ়ଶ͕ҡ࣋͞ΕΔੑ࣭ɻ ·ͨɺͦͷ༰қ͞ɻ -

    ιϑτ΢ΣΞͷ৔߹ʹ͸ɺޡΓ΍ෆ۩߹ͷൃݟɾमਖ਼ͷ͠΍ ͢͞΍ɺࣄલʹ༧ఆ͞Ε͍ͯͳ͔ͬͨ࢓༷มߋ΍ػೳ௥Ճͳ Ͳͷߦ͍΍͢͞ɺιʔείʔυͷಡΈ΍͢͞ͱ͍ͬͨ఺͕த ৺ͱͳΔɻ https://e-words.jp/w/%E4%BF%9D%E5%AE%88%E6%80%A7.html
  7. Copyright Re:Build.inc All Rights Reserved. αϚϦ - ܕ΍ϦΫΤετɾϨεϙϯεΛՄࢹԽͯ͠ɺΤϥʔͷ੾Γ෼͚Λ͠΍͘͢͢ Δɻ
 -

    LintΛ͔ͬ͠Γಋೖ͢Δ͜ͱͰɺେਓ਺΍ΦϑγϣΞ։ൃͳͲͷϓϩδΣΫτ Ͱ΋ॻ͖ํΛ౷Ұ͢Δɻ
 - ֤૚ͷ໾ׂΛϋοΩϦͤͯ͞ɺίʔυΛಡΈ΍͘͢͢ΔɻFat Controller͸ආ͚ Δɻ อकੑΛߴΊΔʹ͸ʁ
  8. Copyright Re:Build.inc All Rights Reserved. 2 SPA։ൃͷ՝୊ ϑϩϯτΤϯυͱόοΫ ΤϯυͰܕͷ੔߹ੑΛ୲ อ͍ͨ͠

    SPAͷσΟϨΫτϦ ߏ੒ͬͯϕετϓϥΫςΟ εΛݟ͚ͭΔͷ͕೉͍͠ Laravel/Vue.js͸ࣗ༝ʹॻ͚Δ ෼ɺͪΌΜͱϧʔϧΛܾΊͳ͍ͱ ͙ͪΌ͙ͪΌʹͳΓ͕ͪ
  9. 2 2 બఆٕͨ͠ज़ ▪ٕज़ཁ݅ ɾαʔόαΠυ PHP(Laravel) ɾϑϩϯτΤϯυ Vue.js,Nuxt.js TypeScript ɾςετ

    PHPUnit ɾ੩తղੳ ESlint,Stylelint PHPStan,phpcs,phpmd ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7,nginx,mariadb,docker,webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳͲ)
  10. ϑϩϯτΤϯυ શମߏ੒(ৄࡉ) αʔόαΠυ(API) ϒϥ΢β͔ΒΞΫηε 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 Enum ਵ࣌࢖༻
  11. Laravelߏ੒(ৄࡉ) αʔόαΠυ ϒϥ΢β͔Β ΞΫηε HTML CSS JS View Resouce.php APIϦΫΤετ

    APIϨεϙϯε Request.php router controller Model Database όϦσʔγϣϯ Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ Enum ਵ࣌࢖༻
  12. αʔόαΠυ Resouce.php APIϦΫΤετ APIϨεϙϯε Request.php router controller Model Database όϦσʔγϣϯ

    Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ ControllerͰग़͖ͯ ͨϩδοΫΛmodel ʹدͤΔ ϒϥ΢β͔Β ΞΫηε HTML CSS JS View Laravelߏ੒(ৄࡉ) Enum ਵ࣌࢖༻
  13. αʔόαΠυ Resouce.php APIϦΫΤετ APIϨεϙϯε Request.php router controller Model Database όϦσʔγϣϯ

    Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ ֎෦αʔϏεΛୟ͘ Α͏ͳॲཧ͸Service ʹॻ͘ ϒϥ΢β͔Β ΞΫηε HTML CSS JS View Laravelߏ੒(ৄࡉ) Enum ਵ࣌࢖༻
  14. αʔόαΠυ Resouce.php APIϦΫΤετ APIϨεϙϯε Request.php router controller Model Database όϦσʔγϣϯ

    Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ ϒϥ΢β͔Β ΞΫηε HTML CSS JS View Laravelߏ੒(ৄࡉ) Enum ਵ࣌࢖༻ DBͰఆٛ͢Δ΄ͲͰ ͸ͳ͍Α͏ͳఆ਺ܥ ͸Enumʹॻ͘
  15. αʔόαΠυ Resouce.php APIϦΫΤετ APIϨεϙϯε Request.php router controller Model Database όϦσʔγϣϯ

    Ϩεϙϯε஋Λ ఆٛ Service αʔυύʔςΟ Enum ਵ࣌࢖༻ ό Ϧ σ ʔ γ ϣ ϯ ͸ RequestΫϥεʹॻ͘ ϒϥ΢β͔Β ΞΫηε HTML CSS JS View Laravelߏ੒(ৄࡉ)
  16. αʔόαΠυ Resouce.php APIϦΫΤετ APIϨεϙϯε Request.php router controller Model όϦσʔγϣϯ Ϩεϙϯε஋Λ

    ఆٛ Service αʔυύʔςΟ Repository Logic Ϗδωεɾ ϩδοΫ σʔλɾ ΞΫηε Database ϒϥ΢β͔Β ΞΫηε HTML CSS JS View Laravelߏ੒(΋ͬͱɺେن໛ʹͳ͖ͬͯͨΒ) Enum ਵ࣌࢖༻
  17. ϑϩϯτΤϯυ શମߏ੒ αʔόαΠυ(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
  18. Tips - Open APIΛ࢖ͬͯɺAPI࢓༷ॻ݉ Swaggerͱͯ͠࢖͏ͱศརɻ - ϑϩϯτΤϯυͱόοΫΤϯυଆͰ ϦΫΤετɾϨεϙϯεͷڞ௨ೝࣝΛ࣋ ͯΔɻ -

    ࠷ѱɺόοΫΤϯυ͕஗Ԇ͍ͯ͠Δ࣌ ͸͜ͷAPI࢓༷Λࢀߟʹϑϩϯτͷ։ൃ ΛਐΊͨΓͯͨ͠ɻ https://swagger.io/resources/articles/documenting-apis-with-swagger/
  19. ϑϩϯτΤϯυ શମߏ੒ αʔόαΠυ(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
  20. ΞτϛοΫσβΠϯͬͯͲ͏ͳͷʁ ΞτϛοΫσβΠϯͱ͸ʁ 5ͭͷ֊૚ʹ෼͚ɺ࠷ऴతͳUIͱUIͷجૅͱͳΔ σβΠϯγεςϜΛಉ࣌ʹ࡞੒͢Δઃܭํ๏ɻ - ݪࢠʢAtomʣ: ࠷΋খཻ͍͞౓ͷཁૉ - ෼ࢠʢmoleculeʣ: 2ͭҎ্ͷݪࢠΛ૊Έ߹Θͤͨγϯ

    ϓϧͳUIཁૉ - ༗ػମʢorganismʣ: ੾Γ཭ͯ͠୯ମͰ΋ػೳ͢Δ෼ ࢠͷू·Γ - ςϯϓϨʔτʢTemplatesʣ: ͍͔ͭ͘ͷ༗ػମɾ෼ ࢠɾݪࢠ͔Β੒Γཱ͍ͬͯΔࠎ૊Έ - ϖʔδʢPagesʣ: ςϯϓϨʔτʹ࣮ࡍͷίϯςϯπ Λద༻ͨ͠΋ͷ https://uxdaystokyo.com/articles/glossary/atomic-design/
  21. ɾControllerͷ੹຿ͷൣғ֎ͷॲཧ΋ೖ͖ͬͯͯ͠·͏ɻ ɹɹControllerͷ੹຿͸ ɹɹ- ೖྗʢHTTPϦΫΤετʣΛड͚औΓɺνΣοΫ͢Δ ɹɹ- ద੾ͳॲཧܥ΁஋Λ౉͢ ɹɹ- ϨεϙϯεΛฦ͢ ɹɹͷ̏ͭͱݴΘΕ͍ͯ·͢ɻ ɾҰͭҰͭͷॲཧ͕௕ͯ͘ɺॲཧΛ௥͏ͷ͕೉͍͠ɻ

    ɾॲཧͷॏෳ͕ଟ͍ͷͰɺ࢓༷มߋ͕͋ͬͨ࣌ʹमਖ਼͕೉͍͠ɻ Fat Controller͸ԿͰྑ͘ͳ͍ͷ͔ʁ https://eh-career.com/engineerhub/entry/2021/05/28/160000#Laravel%E3%81%AE%E4%BE%8B%E3%81%AB%E8%A6%8B%E3%82%8BFatModel
  22. Copyright Re:Build.inc All Rights Reserved. ·ͱΊ - ܕ΍ϦΫΤετɾϨεϙϯεΛՄࢹԽͯ͠ɺΤϥʔͷ੾Γ෼͚Λ͠΍͘͢͢ Δɻ
 -

    LintΛ͔ͬ͠Γಋೖ͢Δ͜ͱͰɺେਓ਺΍ΦϑγϣΞ։ൃͳͲͷϓϩδΣΫτ Ͱ΋ॻ͖ํΛ౷Ұ͢Δɻ
 - ֤૚ͷ໾ׂΛϋοΩϦͤͯ͞ɺίʔυΛಡΈ΍͘͢͢ΔɻFat Controller͸ආ͚ Δɻ อकੑΛߴΊΔʹ͸ʁ