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

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. ·ͱΊ ͜ΕͳΒɺ෭ۀɺϑϦʔϥϯεɺΦϑγϣΞ ͍ΖΜͳਓ͕ೖͬͯ΋҆৺ʂʂʂʂ