ディレクトリ構成ベストプラクティス ~ Angularアプリを作り続けてわかったこと / FRONTEND CONFERENCE 2019

FRONTEND CONFERENCE 2019にて発表した資料です。

Transcript

1. σΟ
   ϨΫ
   τ
   Ϧߏ੒ϕε
   τϓϥΫςΟ
   ε
   "OHVMBSΞϓϦΛ࡞Γଓ͚ͯΘ͔ͬͨ͜ͱ
   /PW '30/5&/%$0/'&3&/$&
   !PLVOPLFOUBSP
   

   View Slide

2. ୭
   w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP
   w ΫϨε΢ΣΞ୅ද
   w ϑϩϯ
   τΤϯ
   υ
   ɾ
   όοΫΤϯ
   υ
   ɾ
   ΤϯδχΞ
   w "OHVMBS೔ຊϢʔβʔձ

   OHLZPUPΦʔΨφΠβ
   

   View Slide

3. ͜Ε·Ͱͷొஃ಺༰
   

   View Slide

4. ຊ೔ͷ಺༰
   w ϑϩϯ
   τΤϯ
   υͷϑ
   ϨʔϜϫʔΫ͕ग़ἧ͖ͬͯͨ
   w ֤ϑ
   ϨʔϜϫʔΫͷσΟ
   ϨΫ
   τ
   Ϧߏ੒͸
   ʁ
   
   w ͦΕΒͷߏ੒Λ࢖͍ଓ͚Δͷ͸Α͍͜ͱ͔
   ʁ
   
   w σΟ
   ϨΫ
   τ
   Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀Ͱ͋Δ
   w Ͳ͏΍ͬͯߏ੒Λߟ͑ΔͨΊͷ൑அྗΛ਎ʹ͚ͭΔ͔
   

   View Slide

5. 7JFXϑ
   ϨʔϜϫʔΫͷ৘ใɺ
   ग़ἧ͍࣌୅
   

   View Slide

6. ܈༤ׂڌͷ࣌୅΋མͪண͖ʜ
   w ΢ΣϒΞϓϦέʔγϣϯΛ࡞ΔʜͱͳͬͨΒબ͹ΕΔͷ͕

   3FBDU "OHVMBS 7VFKT /VYU
   
   w Χόʔൣғ͸༷ʑ͕ͩɺ
   ࠓճ͸·ͱΊ֤ͯϑ
   ϨʔϜϫʔΫͱݺͿ
   w ͍ͣΕ΋೔ຊޠυΩϡϝϯ
   τ͸ॆ࣮
   w άάͬͨΒग़ͯ͘
   Δࢿྉ΋๛෋
   w ਺೥લͱҧ͍
   ʮͲΕΛ࢖ͬͨΒ͍͍Ͱ͔͢ʜ
   ʁ
   ʯ
   ʹର͢Δ൑அࡐྉ͕ͨ͘
   ͞Μ
   

   View Slide

7. ຊ౰ʹগͳ͍ͷ͸தʙେن໛ͷϊ΢ϋ΢
   w ֤ϑ
   ϨʔϜϫʔΫͷϢʔβʔਓޱ͕૿͖͑ͯͨ
   w ֤ϑ
   ϨʔϜϫʔΫ͝ͱʹ༗໊ͳΤϯδχΞ΋ଓʑ
   ͱग़ݱ
   w ͜͜਺೥ͷ֤छେܕΧϯϑΝϨϯεͰɺ
   ࢿྉ΋৭ʑ
   ͱग़͍ͯΔ
   w ͦΕ͕ࣗ෼ͷҊ݅ɺ
   ࣗࣾͷۀ຿Ͱಉ༷ʹద༻Ͱ͖Δ͔ͱ͍͏
   ͱʜ
   ʁ
   
   w ࢀߟʹ͸Ͱ͖ͯ΋ɺ
   શ͘ಉ͡Α
   ͏ʹద༻Ͱ͖Δέʔεͷ΄͏͕ك
   

   View Slide

8. ԿΛ৴͡Δࢦඪͱ͢Δ͔
   ʁ
   w ొஃࢿྉɺ
   ϒϩάهࣄɺ
   2JJUB 4UBDL0WFSqPXʜ
   w ړͬͯ΋ͦΕ͕ࣗ෼ͷ։ൃ͍ͯ͠ΔҊ݅ͱϚον͢Δ͔͕Θ͔Βͳ͍
   w ͦΕ͕৴͡Δʹ଍Γ
   Δ৘ใͳͷ͔Ͳ͏͔൑அ͕Ͱ͖ͳ͍
   w ެࣜͷ
   υΩϡϝϯ
   τ͸ʜ
   w ެ͔ࣜͩΒؒҧͬͨ͜ͱ͸ॻ͍ͯͳ͍͸ͣ
   w ຊ౰ʹͦ͏͔
   ʁ
   

   View Slide

9. ެࣜυΩϡϝϯ
   τͦ͜ϊ΢ϋ΢͸গͳ͍
   w ֤ϑ
   ϨʔϜϫʔΫͷ
   υΩϡϝϯ
   τ͸ɺ
   

   ͋͘
   ·Ͱ΋ͦͷϑ
   ϨʔϜϫʔΫͷ࢖͍ํΛதཱతʹड़΂ͨ಺༰
   w ͔ͨ͠ʹؒҧͬͨ͜ͱ͸ॻ͍ͯͳ͍
   w ࣗ෼ͷ૊৫ʹϚονͨ͠ݱঢ়΁ͷଧ։ࡦ͕

   υϯϐγϟʹॻ͔Ε͍ͯΔέʔε͸গͳ͍
   w ࠷ऴతʹ
   υΩϡϝϯ
   τΛཔΓʹख୳Γʹؕͬͯ͠·
   ͏
   

   View Slide

10. ͍͍ײ͡ͷϓϩ
    τλΠ
    ϓ͕Ͱ͖·ͨ͠
    w Α
    ͘ݟ͔͚Δྫ
    w νϡʔ
    τ
    ϦΞϧΛ΍ͬͯΈͨ
    w νϡʔ
    τ
    ϦΞϧͷ୊ࡐΛࣗࣾͷϏδωεޠኮʹஔ͖׵͑ͯΈͨ
    w ػೳΛ଍ͯ͠Έͨ
    w ͍͍ײ͡ʹͳͬͨ
    w ͍ͭͷؒʹ͔ӡ༻ʹ৐ͬͯ͠·͍อक͢Δඞཁ͕Ͱͨ
    w νϡʔ
    τ
    ϦΞϧߏ੒͔Βม͑ΒΕͳ͍··ͲΜͲΜࣾ಺Ͱ࿩͕େ͖
    ͘
    ͳ͍ͬͯͬͨ
    

    View Slide

11. ୼ͼ͸Ϟϊ
    Ϧ
    ε͔Β
    w ࢒೦ͳ͕Βνϡʔ
    τ
    ϦΞϧ͸ϕε
    τͳߏ੒Ͱ͸ͳ͍
    wʮ·ͣ͸࢖ͬͯΈͯಈ͔ͯ͠ΈΑ
    ͏ʯ
    ͱ

    ʮ਺೥ؒ҆ఆͯ͠อकՄೳͳΞϓϦΛ࡞Ζ͏ʯ
    ͱ͸ผจ຺
    w νϡʔ
    τ
    ϦΞϧ௨Γʹ࡞Γɺ
    νϡʔ
    τ
    ϦΞϧ௨Γͷػೳ֦ுΛ܁Γฦ͢ͱ

    Ϟϊ
    Ϧε
    ʢҰຕؠɺ
    ڊେͳటஂࢠͳͲͱ΋ʣ
    ͕஀ੜ͢Δ
    

    View Slide

12. Ͳ͏͢Δ͔
    ʁ
    

    View Slide

13. ൑அྗΛ਎ʹ͚ͭΔ
    

    View Slide

14. ֤ϑ
    ϨʔϜϫʔΫͷಋೖ
    w 3FBDU
    w ެࣜυΩϡϝϯ
    τ্Ͱ͸
    ʮࡾ໨ฒ΂ήʔϜʯ
    ։ൃͷνϡʔ
    τ
    ϦΞϧΛఏڙ
    w ΞϓϦͷ։ൃணखʹ͸

    ·ͣ͸$SFBUF3FBDU"QQ͕ਪ঑͞ΕΔ
    w 8FCQBDLͳΓ#BCFMͳΓΛ૊Έ߹ΘͤΔ

    Ϣʔβʔ͕ଟ͘ɺ
    3FEVYͷબఆ΍3PVUFSͷ

    બఆͳͲࣗ༝౓͕͔ͳΓߴ͍
    src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    

    View Slide

15. ֤ϑ
    ϨʔϜϫʔΫͷಋೖ
    w "OHVMBS
    w 5PVSPG)FSPFTͱ͍͏
    ʮਓࡐ೿ݣձ͕ࣾώʔϩʔΛ؅ཧ͢Δʯ
    ΞϓϦΛ࡞Δ
    w ΞϓϦͷ৽ن։ൃʹ͸"OHVMBS$-*

    $ ng newΛ࢖͏
    w $ ng generateίϚϯ
    υͰϑΝΠϧΛ

    ࣗಈੜ੒͢Δ͕σΟ
    ϨΫ
    τ
    Ϧ͸೚ҙ
    app
    ├── app-routing.module.ts
    ├── app.component.html
    ├── app.component.scss
    ├── app.component.spec.ts
    ├── app.component.ts
    └── app.module.ts
    

    View Slide

16. w /VYU
    w ๛෋ͳ
    υΩϡϝϯ
    τͱ)FMMP8PSME
    w νϡʔ
    τ
    ϦΞϧࣗମ͸7VFKTଆͰ΍Δ
    w ΞϓϦͷ৽ن։ൃʹ͸$-*πʔϧ

    $ create-nuxt-app [app-name]Λ࢖͏
    ֤ϑ
    ϨʔϜϫʔΫͷಋೖ
    root
    ├── assets
    ├── components
    │ └── Logo.vue
    ├── layouts
    │ └── default.vue
    ├── middleware
    ├── nuxt.config.js
    ├── package.json
    ├── pages
    │ └── index.vue
    ├── plugins
    ├── static
    ├── store
    └── test
    

    View Slide

17. w 3FBDU͔ͳΓࣗ༝ɺ
    ͱ
    Γ͋͑ͣTSDҎԼʹஔ͘
    w https://ja.reactjs.org/docs/faq-structure.html
    w "OHVMBSٕज़తʹ͸ࣗ༝͕ͩɺ
    ެࣜʹελΠϧΨΠ
    υΛఏڙ
    w https://angular.jp/guide/styleguide
    w /VYU໋໊΋ؚΊߏ଄Λڧ੍͘ݶ
    w https://ja.nuxtjs.org/guide/directory-structure
    ͦΕͧΕͲ͏ͳ͍ͬͯΔ͔
    

    View Slide

18. σΟ
    ϨΫ
    τ
    Ϧߏ଄େ೿ൊ
    common/
    Avatar.js
    Avatar.css
    APIUtils.js
    APIUtils.test.js
    feed/
    index.js
    Feed.js
    Feed.css
    FeedStory.js
    FeedStory.test.js
    FeedAPI.js
    profile/
    index.js
    Profile.js
    ProfileHeader.js
    ProfileHeader.css
    ProfileAPI.js
    api/
    APIUtils.js
    APIUtils.test.js
    ProfileAPI.js
    UserAPI.js
    components/
    Avatar.js
    Avatar.css
    Feed.js
    Feed.css
    FeedStory.js
    FeedStory.test.js
    Profile.js
    ProfileHeader.js
    ProfileHeader.css
    υϝΠϯ୯Ґ λΠ
    ϓ୯Ґ
    

    View Slide

19. λΠ
    ϓ೿͕ͭΒ͞ΛݟΔ৔໘
    • containers
    • usersContainer, issuesContainer, requestsContainer...
    • components
    • buttonComponent, userCardComponent, issueListComponent...
    • reducers
    • usersReducer, issuesReducer, requestsReducer...
    • actions
    • usersActions, issuesActions, requestsActions...
    

    View Slide

20. λΠ
    ϓ೿͕ͭΒ͞ΛݟΔ৔໘
    • containers
    • usersContainer, issuesContainer, requestsContainer...
    • components
    • buttonComponent, userCardComponent, issueListComponent...
    • reducers
    • usersReducer, issuesReducer, requestsReducer...
    • actions
    • usersActions, issuesActions, requestsActions...
    

    View Slide

21. %VDLTύλʔϯ
    • users
    • usersContainer, usersActions, usersReducer, userCardComponent
    • issues
    • issuesContainer, issuesActions, issuesReducer, issueListComponent
    • requests
    • requestsContainer, requestsActions, requestsReducer
    • components
    • buttonComponent, modalComponent...
    

    View Slide

22. %VDLTύλʔϯ
    • users
    • usersContainer, usersActions, usersReducer, userCardComponent
    • issues
    • issuesContainer, issuesActions, issuesReducer, issueListComponent
    • requests
    • requestsContainer, requestsActions, requestsReducer
    • components
    • buttonComponent, modalComponent...
    

    View Slide

23. ͡Ό͋%VDLTύλʔϯʹ͢Ε͹͍͍
    ʂ
    

    View Slide

24. View Slide

25. େن໛ͰͭΒ͍ͷ͸ѹ౗తϑΝΠϧ਺
    w ສߦɺ
    ը໘ɺ
    UTϑΝΠϧͷΞϓϦΛ։ൃ࣮ͯ͠ײͨ͜͠ͱ
    w ίʔ
    υͷԚ͞Α
    Γ
    ϑΝΠϧπϦʔͷࢹೝੑͷѱ͕͞ੜ࢈ੑΛඇৗʹԼ͛Δ
    wʮΤσΟ
    λͷγϣʔ
    τΧο
    τͰඈͿ͔ΒϑΝΠϧπϦʔΛݟΔ͜ͱ͸ͳ͍ʯ
    ʁ
    ʁ
    
    w ύεΛҰ੾ҙࣝͤͣ(JU)VCͷૢ࡞΍5ZQF4DSJQUͷϩά௥͍͕շదʹͰ͖Δ͔
    ʁ
    
    w ϑΝΠϧπϦʔ(6*ΛݟΔݟͳ͍Ͱ͸ͳ͘ɺ
    ߏ੒ͷԚ͕͞ੜ࢈ੑʹޮ͍ͯ
    ͘
    Δ
    w ͜ͷ਺ʹͳΔͱ
    ʮ%VDLTύλʔϯΛ΍Ε͹εοΩ
    Ϧ
    ·ͱ·Δʯ
    ͱ͍͏࣍ݩΛ௒͑Δ
    

    View Slide

26. ֤ϑ
    ϨʔϜϫʔΫͷ܏޲
    w 3FBDU͸ࣗ༝͗͢ΔͷͰɺ
    ͦ΋ͦ΋ํ਑ΛઃܭΛ͠ͳ͍ͱഁ୼͠΍͍͢
    w "OHVMBS͸ελΠϧΨΠ
    υ͕੔͍ͬͯΔ͕ສਓ޲͚ͳͷͰɺ
    

    ܝࡌ಺༰͸૊৫୯Ґͷνϡʔχϯά݁ՌͰ͸ͳ͍
    w /VYU͸ݫ͍͠ϧʔϧʹΑͬͯQBHFTͷϑΝΠϧߏ੒ͱϧʔςΟ
    ϯάΛ

    ରͱ͍ͯ͠Δ͕ɺ
    ίΞ
    υϝΠϯʹ૬౰͢Δ෦෼ͷ؅ཧʹ͍ͭͯ͸৮Εͯͳ͍
    

    View Slide

27. ڧݻͰεέʔϧ͢ΔσΟ
    ϨΫ
    τ
    Ϧࢦ਑͕ඞཁ
    w ϑ
    ϨʔϜϫʔΫͷࣄ৘Ͱ͸ͳࠜ͘ຊతͳΞϓϦέʔγϣϯͷઃܭ఩ֶʹཱͪฦΔ
    w ϑ
    ϨʔϜϫʔΫ஀ੜΑ
    Γݹ͔͘Βଘࡏ͢Δઃܭ఩ֶ͸ɺ
    બఆͷ൑அج४ͱͳΔ
    w Ͳ͜Λࣗ෼ͰΞϨϯδ͠ɺ
    Ͳ͜Λม͑ͣʹै͏΂͖͔ͷ൑அྗͱͳΔ
    w "OHVMBSͷελΠϧΨΠ
    υ͸"OHVMBSͷ࣮૷্ͷࣄ৘Λؚ·ͳ͍

    ൺֱత఩ֶʹدͬͨ಺༰ͱͳ͍ͬͯΔͷͰ͝঺հ
    

    View Slide

28. "OHVMBSϑΝΠϧߏ੒ΨΠ
    υൈਮ
    w ͙͢ʹίʔ
    υΛݟ͚ͭΒΕΔΑ
    ͏ʹ͢Δ
    w ؔ࿈ϑΝΠϧΛ௚ײతͳ৔ॴͰۙ͘ʹஔ͍͓ͯ͘
    w Ұ໨Ͱίʔ
    υΛࣝผͰ͖ΔΑ
    ͏ʹ͢Δ
    w ௕͍આ໌తͳϑΝΠϧ໊͸ɺ
    ୹͘
    ͯᐆດͳ୹ॖ໊Α
    Γ༏Ε͍ͯΔ
    w Ͱ͖ΔݶΓ
    ϑϥ
    ο
    τͳߏ଄Λҡ࣋͢Δ
    w ৺ཧֶʹج͖߲ͮ໨͕ͭҎ্ʹୡͨ͠ͱ͖ʹαϒσΟ
    ϨΫ
    τ
    ϦΛ࡞੒͢Δ
    w %3:
    ʢॏෳͱ৑௕͞ΛऔΓআ͘ʣ
    Λ໨ඪͱ͢Δ
    w ௕͘આ໌తͳϑΝΠϧ໊͸༗ӹ͕ͩɺ
    ͦΕ͕৑௕ʹͳΔͳΒ͹ɺ
    ͔͑ͬͯγϯϓϧʹͨ͠΄͏͕Α͍
    

    View Slide

29. σΟ
    ϨΫ
    τ
    Ϧߏ੒ϕε
    τϓϥΫςΟ
    ε
    

    View Slide

30. ϕε
    τϓϥΫςΟ
    ε
    ʁ
    w ࠓճͷϕε
    τϓϥΫςΟ
    εͷޠ͸ɺ
    

    ੈքதͷਓʹड͚ೖΕΒΕΔ͜ͱΛ໨ࢦͨ͠΋ͷɺ
    ͱ͍͏χϡΞϯεͰ͸ͳ͍
    w ࣗ਎ͷɺ
    ܁Γฦ͠େن໛ΞϓϦέʔγϣϯΛ࡞Γଓ͚͖ͯͨܦݧʹج͍ͮͯ

    ࢼߦࡨޡͷճ਺͕ݮ͖ͬͯͨ҆ఆͨ͠σβΠϯύλʔϯͰ͋Δͱ͍͏ҙ
    w 3FBDU "OHVMBSͰ͸ɺ
    ૒ํͰར༻Մೳ
    w /VYU͸ϑ
    ϨʔϜϫʔΫࣗମͷ੍໿͕ݫ͍ͨ͠Ίࢀߟఔ౓ʹ
    

    View Slide

31. ϨΠϠʔ
    υΞʔΩςΫνϟ
    https://speakerdeck.com/okunokentaro/ngrx-architecture?slide=17
    Կ΋࣮૷͞Ε͍ͯͳ͍ΞϓϦέʔγϣϯ։ൃͱ͍͏େւݪͰ

    ࣗ෼ͨͪ͸Ͳ͜Λߤւ͍ͯ͠Δͷ͔஌ΔͨΊͷ΋ͷ
    

    View Slide

32. σΟ
    ϨΫ
    τ
    Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀
    w ϨΠϠʔ
    υΞʔΩςΫνϟ͸

    ʮࠓணख͍ͯ͠ΔϑΝΠϧ͸ԿΛ͢Δ΋ͷ͔ʯ
    Λఆٛ͢Δई౓ͱͳΔ
    w σΟ
    ϨΫ
    τ
    Ϧߏ੒ͱ͜ͷΞʔΩςΫνϟ͕ဃ཭͍ͯ͠Δͱɺ
    ͦͷར఺͕ऑ·Δ
    w σΟ
    ϨΫ
    τ
    Ϧߏ੒΋ɺ
    ϨΠϠʔΛҙࣝͨ͠΋ͷͱ͢Δ
    

    View Slide

33. େσΟ
    ϨΫ
    τ
    Ϧ
    w QBHFT
    w NPEFMT
    w MJC
    w VUJMT
    

    View Slide

34. QBHFT
    w ͦͷΞϓϦέʔγϣϯʹొ৔͢Δը໘͕͢΂ؚͯ·ΕΔ
    w pages/home/ pages/users-list/ pages/user-detail/ͳͲ
    w ෳ਺ͷը໘Ͱ࢖ΘΕΔཁૉ͸pages/shared/ʹஔ͔ΕΔ
    w pages/shared/user/user-card 

    pages/shared/gui/drop-down-list

    ͳͲ
    w ಛఆͷը໘Ͱ͔͠࢖ΘΕͳ͍ඍࡉͳίϯϙʔωϯ
    τ͸λΠ
    ϓผͱ
    ͯ͠·ͱΊΔ
    w pages/user-registration/components/serial-number-field.tsͳͲ
    

    View Slide

35. NPEFMT
    w ͍ΘΏΔ
    υϝΠϯϞσϧ͕ஔ͔ΕΔ
    w models/user/ models/issue/ models/article/ͳͲ
    w pages/shared/user/ pages/shared/issue/ͱ͸໌֬ʹ۠ผ͞ΕΔ
    w ج४͸ϑ
    ϨʔϜϫʔΫʹؔ͢ΔJNQPSUจؚ͕·ΕΔ͔ɺ
    ؚ·Εͳ͍͔
    w ؚ·ΕΔ৔߹͸Ұ཯Ͱpages/shared/ߦ͖
    w MVYPOͷ࣌ؒܭࢉͳͲΛ಺แ͢Δmodels/date-time/ͳͲ͸ڐ༰
    

    View Slide

36. MJC
    w ΞϓϦࣗ਎ͱ֎෦ͷԿΒ͔ͷ࿈ܞ͕ඞཁͳ৔߹͸ɺ
    ͢΂ͯlib/
    w lib/apis/users.api.ts lib/google-map/provider.ts 

    lib/bugsnag.ts lib/firebase/notifications.tsͳͲ
    w ͔ࣗࣾଞ͔ࣾ͸ؔ܎ͳ͘ɺ
    ΞϓϦࣗ਎ͱ֎෦͕࿈ܞ͢Δ΋ͷ͸͢΂ͯMJC
    w -PDBM4UPSBHF $PPLJF *OEFYFE%#΋͜ΕΒʹ֘౰
    

    View Slide

37. VUJMT
    w Ұ൪ةݥͳ೏͍͕͕ͪ͠ͳͷͰ஫ҙ͢΂͖utils/
    w ࣗࣾҎ֎ͷ୭͔͕࢖͍ͬͯͯ΋ҧ࿨ײͷͳ͍ॲཧ͕֘౰
    w ͨͱ͑͹array-flat.ts to-promise.tsͳͲ
    w গ͠Ͱ΋ࣗࣾυϝΠϯͷ೏ؚ͍͕·ΕͨΒmodels/͔pages/shared/ߦ͖
    w MPEBTIΛΠϯε
    τʔϧ͢Δ΄ͲͰ͸ͳ͍͚Ͳɺ
    ͪΐͬͱ࢖͍͍ͨؔ਺ͱ͔͕ೖΔ
    w ͕͜͜ͲΜͲΜ૿͑Δঢ়گ͸ෆ݈શͳͷͰɺ
    ࠷ऴखஈͱͯ͠ଊ͑Δ
    

    View Slide

38. ϨΠϠʔ
    υΞʔΩςΫνϟͱͷରԠ
    pages/
    

    View Slide

39. ϨΠϠʔ
    υΞʔΩςΫνϟͱͷରԠ
    pages/
    pages/shared/
    

    View Slide

40. ϨΠϠʔ
    υΞʔΩςΫνϟͱͷରԠ
    pages/
    pages/shared/
    lib/
    

    View Slide

41. ϨΠϠʔ
    υΞʔΩςΫνϟͱͷରԠ
    pages/
    pages/shared/
    lib/
    models/
    

    View Slide

42. Ϋ
    ϦʔϯΞʔΩςΫνϟ
    σΟ
    ϨΫ
    τ
    Ϧ
    ͝ͱͷ໾ׂΛ໌֬ʹ͢Δͱɺ
    

    ґଘํ޲΋ࣗવͱἧ͍Ϋ
    ϦʔϯΞʔΩςΫνϟͷ࣮ݱͱͳΔ
    

    View Slide

43. Ϋ
    ϦʔϯΞʔΩςΫνϟ
    σΟ
    ϨΫ
    τ
    Ϧ
    ͝ͱͷ໾ׂΛ໌֬ʹ͢Δͱɺ
    

    ґଘํ޲΋ࣗવͱἧ͍Ϋ
    ϦʔϯΞʔΩςΫνϟͷ࣮ݱͱͳΔ
    models/
    pages/shared/
    pages/
    lib/
    

    View Slide

44. େσΟ
    ϨΫ
    τ
    Ϧ
    ͱαϒσΟ
    ϨΫ
    τ
    Ϧͷؔ܎
    w pages
    w ֤ϖʔδ໊͝ͱʹ੾Δ
    w ֤ϖʔδ໊͝ͱͷαϒσΟ
    ϨΫ
    τ
    ϦͷԼ͸λΠ
    ϓผ
    w pages/shared/ҎԼ͸%VDLTύλʔϯ
    w models
    w %VDLTύλʔϯ
    w lib
    w %VDLTύλʔϯ
    w utils
    w λΠ
    ϓผ
    ΞϓϦશମΛ%VDLTύλʔϯʹἧ͑Δ͔ɺ
    λΠ
    ϓผʹ͢Δ͔

    Ͱ͸ͳ͘ɺ
    
    େผͨ͠λΠ
    ϓ͝ͱͷू໿ͷͦΕͧΕʹ

    υϝΠϯ୯ҐͰ·ͱΊΔ%VDLTύλʔϯద༻͢Δɻ
    

    View Slide

45. ͜ΕΒΛऔΓೖΕΔʹ͸
    ʁ
    

    View Slide

46. ଞਓͷൃද಺༰ΛऔΓೖΕΔ
    w ࠓճͷ಺༰͸
    ʮࣗ෼ͷḷΓண͍ͨ࠷ྑͷύλʔϯʯ
    ͷ঺հ
    w ͜ΕΛଈ࠲ʹ֤͕ࣗಋೖͰ͖Δ΋ͷͰ͸ͳ͍ͱࢥΘΕΔ
    w ͋·ͨͷൃදࢿྉ͕
    ʮԿΛࠜڌʹͦͷબ୒Λͨ͠ͷ͔ʯ
    ͱ͍͏

    എܠΛ஌͓͚ͬͯ͹ɺ
    ಉ͡ঢ়گͱͳͬͨͱ͖ͷ൑அྗͱͳΔ
    w ࠓճͷ಺༰͸ϨΠϠʔ
    υΞʔΩςΫνϟɺ
    Ϋ
    ϦʔϯΞʔΩςΫνϟͱ͍͏

    ઃܭख๏Λ౿·͑ɺ
    "OHVMBSͷελΠϧΨΠ
    υ΋ߟྀͨ͠৔߹ʹ

    Ͳ͏൑அ͔ͨ͠
    ʁ
    ͱ͍͏ܦݧஊ
    

    View Slide

47. ͨ͘
    ͞ΜͷࣄྫΛ஌Ζ͏
    ʂ
    w νϡʔ
    τ
    ϦΞϧߏ੒ͷԆ௕ͰͳͥऴΘͬͯ͠·
    ͏ͷ͔
    w ϑ
    ϨʔϜϫʔΫͷ
    υΩϡϝϯ
    τΛख़ಡ͢Δ͚ͩͰͳ͘ɺ
    ࢹ໺Λ޿͛ͯΈΔͷ͕Α͍
    wʮ͔ͭͯ+BWB͸Ͳ͏΍͍ͬͯͨ
    ʁ
    ʯ
    ʮ࠷ۙͷJ04։ൃͬͯͲ͏ͳͬͯΔͷ
    ʁ
    ʯ
    ͳͲ
    w ϑ
    ϨʔϜϫʔΫ͕ఏڙ͢Δ৘ใ͕ࠓͷࣗ෼
    ɾ
    ૊৫ʹ

    Ϛον͍ͯ͠Δ͔Ͳ͏͔ͷ൑அྗΛཆ͏
    w ελΠϧΨΠ
    υͷΞϨϯδྗͱͳΓɺ
    νʔϜ͕໰୊Λ๊͑ͨͱ͖ʹ

    ৐Γӽ͑ΒΕΔΑ
    ͏ʹͳΔ
    

    View Slide

48. 5IBOLZPV
    

    View Slide