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

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

OKUNOKENTARO
November 02, 2019
12k

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

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

OKUNOKENTARO

November 02, 2019
Tweet

More Decks by OKUNOKENTARO

Transcript

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

    View full-size slide


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

    OHLZPUPΦʔΨφΠβ

    View full-size slide

  3. ͜Ε·Ͱͷొஃ಺༰

    View full-size slide

  4. ຊ೔ͷ಺༰
    w ϑϩϯ
    τΤϯ
    υͷϑ
    ϨʔϜϫʔΫ͕ग़ἧ͖ͬͯͨ
    w ֤ϑ
    ϨʔϜϫʔΫͷσΟ
    ϨΫ
    τ
    Ϧߏ੒͸
    ʁ

    w ͦΕΒͷߏ੒Λ࢖͍ଓ͚Δͷ͸Α͍͜ͱ͔
    ʁ

    w σΟ
    ϨΫ
    τ
    Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀Ͱ͋Δ
    w Ͳ͏΍ͬͯߏ੒Λߟ͑ΔͨΊͷ൑அྗΛ਎ʹ͚ͭΔ͔

    View full-size slide

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

    View full-size slide

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

    3FBDU "OHVMBS 7VFKT /VYU

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

    View full-size slide

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

    w ࢀߟʹ͸Ͱ͖ͯ΋ɺ
    શ͘ಉ͡Α
    ͏ʹద༻Ͱ͖Δέʔεͷ΄͏͕ك

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  12. Ͳ͏͢Δ͔
    ʁ

    View full-size slide

  13. ൑அྗΛ਎ʹ͚ͭΔ

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. େن໛ͰͭΒ͍ͷ͸ѹ౗తϑΝΠϧ਺
    w ສߦɺ
    ը໘ɺ
    UTϑΝΠϧͷΞϓϦΛ։ൃ࣮ͯ͠ײͨ͜͠ͱ
    w ίʔ
    υͷԚ͞Α
    Γ
    ϑΝΠϧπϦʔͷࢹೝੑͷѱ͕͞ੜ࢈ੑΛඇৗʹԼ͛Δ
    wʮΤσΟ
    λͷγϣʔ
    τΧο
    τͰඈͿ͔ΒϑΝΠϧπϦʔΛݟΔ͜ͱ͸ͳ͍ʯ
    ʁ
    ʁ

    w ύεΛҰ੾ҙࣝͤͣ(JU)VCͷૢ࡞΍5ZQF4DSJQUͷϩά௥͍͕շదʹͰ͖Δ͔
    ʁ

    w ϑΝΠϧπϦʔ(6*ΛݟΔݟͳ͍Ͱ͸ͳ͘ɺ
    ߏ੒ͷԚ͕͞ੜ࢈ੑʹޮ͍ͯ
    ͘
    Δ
    w ͜ͷ਺ʹͳΔͱ
    ʮ%VDLTύλʔϯΛ΍Ε͹εοΩ
    Ϧ
    ·ͱ·Δʯ
    ͱ͍͏࣍ݩΛ௒͑Δ

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    Ͱ͸ͳ͘ɺ

    େผͨ͠λΠ
    ϓ͝ͱͷू໿ͷͦΕͧΕʹ

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

    View full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

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

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

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

    View full-size slide