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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

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

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

Avatar for Takayuki

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͸ආ͚ Δɻ อकੑΛߴΊΔʹ͸ʁ