$30 off During Our Annual Pro Sale. View Details »

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

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

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

Takayuki
PRO

May 29, 2021
Tweet

More Decks by Takayuki

Other Decks in Technology

Transcript

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

    View Slide

  2. "HFOEB
    ࣗݾ঺հ
    -BSBWFM7VFKTͰͷ41"։ൃͷ՝୊ײ
    ߟ͑ͯΈͨϓϩδΣΫτߏ੒
    'BU$POUSPMMFSΛ๷͙

    View Slide

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

    View Slide

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

    σΟϨΫτϦߏ੒ͳͲ
    ࿩͢͜ͱ
    ࿩͞ͳ͍͜ͱ
    ΠϯϑϥपΓͷৄ͍͠࿩
    ϚωδϝϯτɾνʔϜମ੍
    ͳͲ

    View Slide

  5. ࣗݾ঺հɾձࣾ঺հ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Copyright Re:Build.inc All Rights Reserved.
    ധ̏೔Ͱ։࠵ʂࣾ֎ͷํ΋
    ߹ಉͰ։ൃͯ͠·͢ʂ
    ϦϏϧυԭೄ։ൃ߹॓
    1

    View Slide

  10. Copyright Re:Build.inc All Rights Reserved.
    ϦϏϧυԭೄ։ൃ߹॓
    1

    View Slide

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

    View Slide

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

    View Slide

  13. Copyright Re:Build.inc All Rights Reserved.
    1 3
    ɾαʔϏε໊
    Tadoru

    https://tadoru.work/


    ɾγεςϜ֓ཁ
    ΤϯδχΞಛԽܕͷ
    ϦϑΝϥϧ
    Ϋϥ΢υιʔγϯά
    1 ձࣾ঺հ

    View Slide

  14. Copyright Re:Build.inc All Rights Reserved.
    1 4
    ɾαʔϏε໊
    ROLEMO

    https://rolemo.net/

    ɾγεςϜ֓ཁ
    ༷ʑͳΩϟϦΞͷΤϯδχΞʹ
    ΩϟϦΞ૬ஊͰ͖ΔαʔϏε
    1 ձࣾ঺հ

    View Slide

  15. Copyright Re:Build.inc All Rights Reserved.
    อकੑͱ͸
    - อक࡞ۀΛ࣮ࢪ͢Δ͜ͱͰɺػೳ΍ঢ়ଶ͕ҡ࣋͞ΕΔੑ࣭ɻ
    ·ͨɺͦͷ༰қ͞ɻ
    - ιϑτ΢ΣΞͷ৔߹ʹ͸ɺޡΓ΍ෆ۩߹ͷൃݟɾमਖ਼ͷ͠΍
    ͢͞΍ɺࣄલʹ༧ఆ͞Ε͍ͯͳ͔ͬͨ࢓༷มߋ΍ػೳ௥Ճͳ
    Ͳͷߦ͍΍͢͞ɺιʔείʔυͷಡΈ΍͢͞ͱ͍ͬͨ఺͕த
    ৺ͱͳΔɻ
    https://e-words.jp/w/%E4%BF%9D%E5%AE%88%E6%80%A7.html

    View Slide

  16. Copyright Re:Build.inc All Rights Reserved.
    αϚϦ
    - ܕ΍ϦΫΤετɾϨεϙϯεΛՄࢹԽͯ͠ɺΤϥʔͷ੾Γ෼͚Λ͠΍͘͢͢
    Δɻ

    - LintΛ͔ͬ͠Γಋೖ͢Δ͜ͱͰɺେਓ਺΍ΦϑγϣΞ։ൃͳͲͷϓϩδΣΫτ
    Ͱ΋ॻ͖ํΛ౷Ұ͢Δɻ

    - ֤૚ͷ໾ׂΛϋοΩϦͤͯ͞ɺίʔυΛಡΈ΍͘͢͢ΔɻFat Controller͸ආ͚
    Δɻ
    อकੑΛߴΊΔʹ͸ʁ

    View Slide

  17. Copyright Re:Build.inc All Rights Reserved.
    ࿩্͢Ͱͷલఏ
    - ։ൃن໛͸த͘Β͍͕ଟ͍ɻ
    - ̏ʙ̒ਓͰ൒೥ʙ1೥։ൃϓϩδΣΫτ͕ଟ͍ɻ
    - େن໛ϓϩδΣΫτ͸গͳ͍ɻ
    ฐࣾʹ͓͚Δ։ൃϓϩδΣΫτͷಛ௃

    View Slide

  18. -BSBWFM7VFKTͰͷ41"։ൃͷ՝୊ײ

    View Slide

  19. Copyright Re:Build.inc All Rights Reserved.
    2 SPA։ൃͷ՝୊
    ϑϩϯτΤϯυͱόοΫ
    ΤϯυͰܕͷ੔߹ੑΛ୲
    อ͍ͨ͠
    SPAͷσΟϨΫτϦ
    ߏ੒ͬͯϕετϓϥΫςΟ
    εΛݟ͚ͭΔͷ͕೉͍͠
    Laravel/Vue.js͸ࣗ༝ʹॻ͚Δ
    ෼ɺͪΌΜͱϧʔϧΛܾΊͳ͍ͱ
    ͙ͪΌ͙ͪΌʹͳΓ͕ͪ

    View Slide

  20. Copyright Re:Build.inc All Rights Reserved.
    ෭ۀɺϑϦʔϥϯεɺΦϑγϣΞɺ৽ਓͳͲ
    ͍ΖΜͳਓ͕ϓϩδΣΫτʹࢀը͍ͯ͠Δ৔߹ɺ
    ϧʔϧ͕͔ͬ͠Γ͍ͯ͠ͳ͍ͱɺ
    ίʔυ͕εύήςΟʹͳΓ͕ͪʂʂʂ
    2
    ෳ਺ਓ։ൃϓϩδΣΫτͷ՝୊

    View Slide

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

    View Slide

  22. 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(ࣗಈσϓϩΠͳͲ)

    View Slide

  23. ϑϩϯτΤϯυ αʔόαΠυ
    શମߏ੒(ࣗࣾαʔϏε OREIO)
    Gitlab CI
    ςετɾLintͳͲ
    ςετɾLintͳͲ
    ֤lint

    View Slide

  24. (1)PUSH
    (2)GitlabCI࣮ߦ (3)ίϯςφىಈ
    Gitlab
    (6)Envoy࣮ߦ
    ςετ࣮ߦ
    ίϯςφ
    σϓϩΠ࣮ߦ
    ίϯςφ
    (5)ίϯςφىಈ
    (4)UnitTest࣮ߦ
    (7)Pull
    εςʔδϯά؀ڥ
    ϦϙδτϦ
    Gitlab CI

    View Slide

  25. ϑϩϯτΤϯυ
    શମߏ੒(ৄࡉ)
    αʔόαΠυ(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
    ਵ࣌࢖༻

    View Slide

  26. Laravelͷߏ੒ʹ͍ͭͯ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. αʔόαΠυ
    Resouce.php
    APIϦΫΤετ
    APIϨεϙϯε
    Request.php
    router
    controller
    Model
    όϦσʔγϣϯ
    Ϩεϙϯε஋Λ
    ఆٛ
    Service
    αʔυύʔςΟ
    Repository
    Logic
    Ϗδωεɾ
    ϩδοΫ
    σʔλɾ
    ΞΫηε
    Database
    ϒϥ΢β͔Β
    ΞΫηε
    HTML
    CSS
    JS
    View
    Laravelߏ੒(΋ͬͱɺେن໛ʹͳ͖ͬͯͨΒ)
    Enum
    ਵ࣌࢖༻

    View Slide

  33. LaravelͷσΟϨΫτϦߏ੒

    View Slide

  34. LaravelͷσΟϨΫτϦߏ੒(֤σΟϨΫτϦͷղઆ)
    ※ؾʹͳΔਓ͸ޙͰಡΜͰ͓͍͍ͯͩ͘͞ɻ

    View Slide

  35. LaravelͷσΟϨΫτϦߏ੒(֤σΟϨΫτϦͷղઆ)
    ※ؾʹͳΔਓ͸ޙͰಡΜͰ͓͍͍ͯͩ͘͞ɻ

    View Slide

  36. ϦϙδτϦύλʔϯͬͯͲ͏ͳͷʁ
    ϦϙδτϦύλʔϯͱ͸(Ҿ༻)
    υϝΠϯۦಈܕઃܭͷҰͭͱͯ͠ಋೖ͞Εͨ
    ΋ͷͰɺσʔλιʔε΁ͷΞΫηεͷந৅Խ
    Λఏڙ͢Δ΋ͷͰ͢ɻ
    ͦΕͧΕҟͳΔੑ࣭Λ࣋ͭσʔλιʔεʹର
    ͯ͠ڞ௨ͷΠϯλʔϑΣΠεΛఆٛͦ͠ΕΛ
    ϦϙδτϦͱ࣮ͯ͠૷͢ΔࣄͰɺ Ϗδωεϩ
    δοΫ͔ΒσʔλΞΫηεΛ෼཭ʢૄ݁߹ʣ
    ͤ͞ɺػೳͱͯ͠ͷ֦ுੑɾอकੑΛ޲্͞
    ͤΔࣄ͕Ͱ͖·͢ɻ
    https://deha.co.jp/magazine/introducing-laravel-repository/

    View Slide

  37. ϦϙδτϦύλʔϯͷ࢖͍ॴ
    User UserRepositoryInterface
    UserMysqlRepository
    UserSqliteRepository
    ɾσʔλιʔε΁ͷΞΫηεɾૢ࡞ʹؔͯ͠ʮSELECTʯʮINSERTʯʮUPDATEʯʮDELETEʯͳͲ͕͋Γ·
    ͕͢ɺͦΕΒͷૢ࡞͸ྫ͑͹RDBMSͱNoSQLͰจ๏ͷҧ͍͕͋ΔͷͰɺ͜ΕΒͷૢ࡞ͷҝʹࢲୡ͕ॻ͘ίʔ
    υʹ͸ͦΕͧΕҧ͍͕͋Γ·͢ɻ ͜ΕΒΛڞ௨ͷΠϯλʔϑΣΠεΛ࣋ͨͤΔࣄͰɺϏδωεଆͰ͸Ͳͷσʔ
    λιʔε͔ΛҙࣝͤͣʹσʔλଆΛѻ͏ࣄ͕Ͱ͖ΔΑ͏ʹͳΔɻ
    https://www.ritolab.com/entry/165

    View Slide

  38. ϦϙδτϦύλʔϯͷ࢖͍ॴ̎
    Report
    ϓϩδΣΫτڞ௨Ͱ࢖͏Α͏ͳܭࢉॲཧΛ·ͱΊͯɺఆ͓ٛͯ͘͠ɻ
    ɾCalculationImpression()
    ɾCalculationCvr()
    ɾCalculationCtr()
    AdDataRepositoryInterface
    AdDataRepository

    View Slide

  39. ϦϙδτϦύλʔϯͷϝϦοτɾσϝϦοτ
    RepositoryύλʔϯͷϝϦοτ
    - νʔϜͰιʔεͷ։ൃɾอक͕͠қ͍
    - σʔλͷߏஙɺσʔλιʔεɺϏδωεϩδοΫʹมߋ͕ൃੜ͢Δ৔߹ɺιʔεͷมߋ͕গͳ
    ͘ࡁΉ
    - ϏδωεϩδοΫͱσʔλιʔεΛ෼͚ͯɺςετ͢Δࣄ͕Ͱ͖Δ
    RepositoryύλʔϯͷσϝϦοτ
    - ίʔυྔ͕ଟ͘ͳΔ
    - খن໛ͷҊ݅ͩͱɺٯʹϝϯςφϯείετ͕ߴ͘ͳΔɻ

    View Slide

  40. ϦϙδτϦύλʔϯΛ࣮ࡍɺ࢖ͬͯΈͯͲ͏͔ͩͬͨʁ
    - ॳظஈ֊ͰෳࡶͳΫΤϦ͕গͳ͍৔߹ɺۭͬΆʹ͍ۙΫϥε͕ͨ͘͞Μ૿͑
    ͯ͠·ͬͨɻ
    - ݁ہɺ໘౗ʹͳͬͨͷͰɺഇࢭ

    View Slide

  41. αʔϏεΫϥεͬͯͲ͏ͳͷʁ
    αʔϏεΫϥεͱ͸ʁ
    UI ͔Β͚ͩͰͳ͘ɺCUIͷϓϩάϥϜͱ͔
    ଞγεςϜͱͷ࿈ܞ෦෼ͱ͔Ͱɺڞ௨ͷϩ
    δοΫΛݺͿඞཁ͕͋Δͱ͖ʹɺService
    ϨΠϠʔӽ͠ʹυϝΠϯϩδοΫΛॲཧ͢
    Δͱɺڞ௨ͷΠϯλϑΣʔεͰૢ࡞Ͱ͖Δ
    Α͏ʹͳΔ
    https://martinfowler.com/eaaCatalog/serviceLayer.html

    View Slide

  42. αʔϏεΫϥεͷ࢖͍ํ
    ྫ͑͹ɺStripe APIΛ࢖ͬͨ
    ߪೖɾΩϟϯηϧॲཧͳͲΛ
    ॻ͍͍ͯ͘
    https://martinfowler.com/eaaCatalog/serviceLayer.html

    View Slide

  43. αʔϏεΫϥεΛ࣮ࡍɺ࢖ͬͯΈͯͲ͏͔ͩͬͨʁ
    - ֎෦αʔϏε(API)ͳͲΛୟ͘ॲཧ͚ͩ·ͱΊΔͷͰɺϩδοΫͷৼΓ෼͚
    ͸͠΍͍͢ɻ
    - Model΍ϦϙδτϦΫϥεͰॻ͘Α͏ͳॲཧͱ͸ඃΒͳ͍ͷͰɺΘ͔Γ΍͢
    ͍ɻ
    - தن໛ϓϩδΣΫτͰ΋ಋೖͯ͠΋த਎͕ബ͘ͳΒແͦ͞͏ɻ

    View Slide

  44. ϑϩϯτΤϯυ
    શମߏ੒
    αʔόαΠυ(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

    View Slide

  45. όοΫΤϯυΤϯυ σΟϨΫτϦߏ੒
    ϦΫΤετɾ
    Ϩεϙϯε

    View Slide

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

    View Slide

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

    View Slide

  48. Tips
    - Open APIΛ࢖ͬͯɺAPI࢓༷ॻ݉
    Swaggerͱͯ͠࢖͏ͱศརɻ
    - ϑϩϯτΤϯυͱόοΫΤϯυଆͰ
    ϦΫΤετɾϨεϙϯεͷڞ௨ೝࣝΛ࣋
    ͯΔɻ
    - ࠷ѱɺόοΫΤϯυ͕஗Ԇ͍ͯ͠Δ࣌
    ͸͜ͷAPI࢓༷Λࢀߟʹϑϩϯτͷ։ൃ
    ΛਐΊͨΓͯͨ͠ɻ
    https://swagger.io/resources/articles/documenting-apis-with-swagger/

    View Slide

  49. Vue.js/Nuxt.jsͷߏ੒ʹ͍ͭͯ

    View Slide

  50. NuxtͷσΟϨΫτϦߏ੒

    View Slide

  51. ϑϩϯτΤϯυ
    શମߏ੒
    αʔόαΠυ(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

    View Slide

  52. ϑϩϯτΤϯυ σΟϨΫτϦߏ੒
    APIͷϦΫΤετɾϨε
    ϙϯεͷఆٛ
    ϛυϧ΢ΣΞ
    APIϦΫΤετ
    constͳͲ
    Axios΍ϥΠϒ
    ϥϦͳͲ

    View Slide

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

    View Slide

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

    View Slide

  55. ΞτϛοΫσβΠϯͬͯͲ͏ͳͷʁ
    ΞτϛοΫσβΠϯͱ͸ʁ
    5ͭͷ֊૚ʹ෼͚ɺ࠷ऴతͳUIͱUIͷجૅͱͳΔ
    σβΠϯγεςϜΛಉ࣌ʹ࡞੒͢Δઃܭํ๏ɻ
    - ݪࢠʢAtomʣ: ࠷΋খཻ͍͞౓ͷཁૉ
    - ෼ࢠʢmoleculeʣ: 2ͭҎ্ͷݪࢠΛ૊Έ߹Θͤͨγϯ
    ϓϧͳUIཁૉ
    - ༗ػମʢorganismʣ: ੾Γ཭ͯ͠୯ମͰ΋ػೳ͢Δ෼
    ࢠͷू·Γ
    - ςϯϓϨʔτʢTemplatesʣ: ͍͔ͭ͘ͷ༗ػମɾ෼
    ࢠɾݪࢠ͔Β੒Γཱ͍ͬͯΔࠎ૊Έ
    - ϖʔδʢPagesʣ: ςϯϓϨʔτʹ࣮ࡍͷίϯςϯπ
    Λద༻ͨ͠΋ͷ
    https://uxdaystokyo.com/articles/glossary/atomic-design/

    View Slide

  56. ΞτϛοΫσβΠϯͬͯͲ͏ͳͷʁ
    ࢖ͬͯΈͨײ૝
    - ࡉ͔͘ͲͷίʔυΛ5૚ʹৼΓ෼͚Δ͔ͷ൑அ͕೉͍͠ɻ
    - ্ख͘ৼΓ෼͚ΒΕͳ͍ͱ͔͑ͬͯɺΑ͘Θ͔Βͳ͘ͳͬͯ
    ͠·ͬͨɻ
    - զʑʹ͸·ͩΞτϛοΫσβΠϯ͸ૣ͔ͬͨɻϓϩδΣΫτ
    ಺ʹ༗ࣝऀ͕͍ͳ͍ͱ೉͍͠ɻ

    View Slide

  57. ΞτϛοΫσβΠϯͬͯͲ͏ͳͷʁ
    ࠷ऴతʹͲ͏͔ͨ͠ʁ

    - σβΠϯγεςϜͷ୯ҐͰίϯ
    ϙʔωϯτΛ੾͍ͬͯ͘ͱ੔ཧ͕
    Ͱ͖ͨɻ
    - ͳͷͰɺॳظஈ֊ͰσβΠφʔ͞
    ΜʹͪΌΜͱσβΠϯγεςϜΛ
    ࡞ͬͯ΋Β͏͜ͱΛ͓નΊ͠·
    ͢ɻ

    View Slide

  58. LintͷઃఆͳͲ

    View Slide

  59. ϑϩϯτΤϯυ αʔόαΠυ
    ֤lintͷઃఆ
    Gitlab CI
    ςετɾLintͳͲ
    ςετɾLintͳͲ
    ֤lint

    View Slide

  60. ੩తղੳͷઃఆ
    phpcs.xml
    - PSR12ͷνΣο
    ΫͳͲ

    View Slide

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

    View Slide

  62. ੩తղੳͷઃఆ
    eslint
    - AirbnbͷJavaScript Style
    GuideΛίʔσΟϯάن໿ͱ
    ͢Δɻ
    - Prettier
    ͳͲ
    https://www.wantedly.com/companies/askul/post_articles/155377

    View Slide

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

    View Slide

  64. 'BU$POUSPMMFSΛ๷͙

    View Slide

  65. ɾFatControllerʢଠͬͨίϯτϩʔϥʣͷ͜ͱͰ͢ɻͳΜͰଠΔ͔ͱݴ͏ͱ୲͏੹຿͕ଟ͍
    ͔ΒͰ͢ɻྫ͑͹ɺԼهͷΑ͏ͳཧ༝͕ߟ͑ΒΕ·͢ɻ
    ɾෳ਺ͷϝιουͰॲཧ͕ॏෳ͍ͯ͠Δɻ
    ɾ୯७ʹΞΫγϣϯϝιου͕ଟ͍ɻ
    ɾϩδοΫ͕ଟ͗͢Δɻ
    ɾͻͱͭͷมߋ͕ଞͷ෦෼ʹٴ΅͢ӨڹΛݕ஌ͮ͠Β͍ঢ়ଶʹ͋Δ
    Fat Controller ͱ͸ʁ

    View Slide

  66. ɾ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

    View Slide

  67. ϦϑΝΫλ಺༰

    View Slide

  68. privateϝιουʹ੾Γ෼͚Δ
    Ұͭͷϝιου͕50ߦΛ௒͑ͦ͏ͳ
    Βɺॲཧ͝ͱʹprivateϝιουʹ෼
    ͚Δ

    View Slide

  69. modelΫϥεʹϩδοΫΛ෼͚Δ
    ControllerʹϩδοΫ͕૿͖͑ͯͨ
    ΒɺmodelʹॲཧΛ෼͚Δ

    View Slide

  70. όϦσʔγϣϯ͸RequestΫϥεʹॻ͘
    ControllerʹόϦσʔγϣϯΛ௚ॻ
    ͖͠ͳ͍ͰRequestΫϥεͰॲཧ͢
    Δ

    View Slide

  71. ෳ਺ͷ Controller ʹ෼཭͢Δ
    ҰͭͷControllerͰΞΫγϣϯϝ
    ι ο υ ͕ ૿ ͑ ͢ ͗ Δ ৔ ߹ ͸ ɺ
    ControllerϑΝΠϧ͝ͱ෼͚Δ

    View Slide

  72. ϨεϙϯεͷσʔλΛResource ʹॻ͘
    Ϩεϙϯεσʔλ͕ෳࡶԽ͖ͯͨ͠
    ΓɺՃ޻͕ඞཁͳ৔߹͸ResouceΫ
    ϥεʹ෼͚Δ

    View Slide

  73. ϦϑΝΫλ·ͱΊ
    ɾControllerͷ੹຿ͷൣғ֎ͷॲཧ͸ೖΕͳ͍ɻ
    ɾඞཁʹԠͯ͡ɺϩδοΫͷ૚Λ૿΍͢ɻ
    ɾॲཧΛࡉ෼Խͯ͠ɺॏෳ͢Δॲཧ͸·ͱΊΔɻ

    View Slide

  74. Copyright Re:Build.inc All Rights Reserved.
    ·ͱΊ
    - ܕ΍ϦΫΤετɾϨεϙϯεΛՄࢹԽͯ͠ɺΤϥʔͷ੾Γ෼͚Λ͠΍͘͢͢
    Δɻ

    - LintΛ͔ͬ͠Γಋೖ͢Δ͜ͱͰɺେਓ਺΍ΦϑγϣΞ։ൃͳͲͷϓϩδΣΫτ
    Ͱ΋ॻ͖ํΛ౷Ұ͢Δɻ

    - ֤૚ͷ໾ׂΛϋοΩϦͤͯ͞ɺίʔυΛಡΈ΍͘͢͢ΔɻFat Controller͸ආ͚
    Δɻ
    อकੑΛߴΊΔʹ͸ʁ

    View Slide

  75. Copyright Re:Build.inc All Rights Reserved.
    ·ͱΊ
    ͜ΕͳΒɺ෭ۀɺϑϦʔϥϯεɺΦϑγϣΞ
    ͍ΖΜͳਓ͕ೖͬͯ΋҆৺ʂʂʂʂ

    View Slide