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

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

Avatar for OKUNOKENTARO OKUNOKENTARO
November 02, 2019
13k

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

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

Avatar for OKUNOKENTARO

OKUNOKENTARO

November 02, 2019
Tweet

More Decks by OKUNOKENTARO

Transcript

  1. ୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅ද w ϑϩϯ τΤϯ υ ɾ

    όοΫΤϯ υ ɾ ΤϯδχΞ w "OHVMBS೔ຊϢʔβʔձ
 OHLZPUPΦʔΨφΠβ
  2. ຊ೔ͷ಺༰ w ϑϩϯ τΤϯ υͷϑ ϨʔϜϫʔΫ͕ग़ἧ͖ͬͯͨ w ֤ϑ ϨʔϜϫʔΫͷσΟ ϨΫ

    τ Ϧߏ੒͸ ʁ  w ͦΕΒͷߏ੒Λ࢖͍ଓ͚Δͷ͸Α͍͜ͱ͔ ʁ  w σΟ ϨΫ τ Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀Ͱ͋Δ w Ͳ͏΍ͬͯߏ੒Λߟ͑ΔͨΊͷ൑அྗΛ਎ʹ͚ͭΔ͔
  3. ܈༤ׂڌͷ࣌୅΋མͪண͖ʜ w ΢ΣϒΞϓϦέʔγϣϯΛ࡞ΔʜͱͳͬͨΒબ͹ΕΔͷ͕
 3FBDU "OHVMBS 7VFKT /VYU  w Χόʔൣғ͸༷ʑ͕ͩɺ

    ࠓճ͸·ͱΊ֤ͯϑ ϨʔϜϫʔΫͱݺͿ w ͍ͣΕ΋೔ຊޠυΩϡϝϯ τ͸ॆ࣮ w άάͬͨΒग़ͯ͘ Δࢿྉ΋๛෋ w ਺೥લͱҧ͍ ʮͲΕΛ࢖ͬͨΒ͍͍Ͱ͔͢ʜ ʁ ʯ ʹର͢Δ൑அࡐྉ͕ͨ͘ ͞Μ
  4. ຊ౰ʹগͳ͍ͷ͸தʙେن໛ͷϊ΢ϋ΢ w ֤ϑ ϨʔϜϫʔΫͷϢʔβʔਓޱ͕૿͖͑ͯͨ w ֤ϑ ϨʔϜϫʔΫ͝ͱʹ༗໊ͳΤϯδχΞ΋ଓʑ ͱग़ݱ w ͜͜਺೥ͷ֤छେܕΧϯϑΝϨϯεͰɺ

    ࢿྉ΋৭ʑ ͱग़͍ͯΔ w ͦΕ͕ࣗ෼ͷҊ݅ɺ ࣗࣾͷۀ຿Ͱಉ༷ʹద༻Ͱ͖Δ͔ͱ͍͏ ͱʜ ʁ  w ࢀߟʹ͸Ͱ͖ͯ΋ɺ શ͘ಉ͡Α ͏ʹద༻Ͱ͖Δέʔεͷ΄͏͕ك
  5. ԿΛ৴͡Δࢦඪͱ͢Δ͔ ʁ w ొஃࢿྉɺ ϒϩάهࣄɺ 2JJUB 4UBDL0WFSqPXʜ w ړͬͯ΋ͦΕ͕ࣗ෼ͷ։ൃ͍ͯ͠ΔҊ݅ͱϚον͢Δ͔͕Θ͔Βͳ͍ w

    ͦΕ͕৴͡Δʹ଍Γ Δ৘ใͳͷ͔Ͳ͏͔൑அ͕Ͱ͖ͳ͍ w ެࣜͷ υΩϡϝϯ τ͸ʜ w ެ͔ࣜͩΒؒҧͬͨ͜ͱ͸ॻ͍ͯͳ͍͸ͣ w ຊ౰ʹͦ͏͔ ʁ
  6. ެࣜυΩϡϝϯ τͦ͜ϊ΢ϋ΢͸গͳ͍ w ֤ϑ ϨʔϜϫʔΫͷ υΩϡϝϯ τ͸ɺ 
 ͋͘ ·Ͱ΋ͦͷϑ

    ϨʔϜϫʔΫͷ࢖͍ํΛதཱతʹड़΂ͨ಺༰ w ͔ͨ͠ʹؒҧͬͨ͜ͱ͸ॻ͍ͯͳ͍ w ࣗ෼ͷ૊৫ʹϚονͨ͠ݱঢ়΁ͷଧ։ࡦ͕
 υϯϐγϟʹॻ͔Ε͍ͯΔέʔε͸গͳ͍ w ࠷ऴతʹ υΩϡϝϯ τΛཔΓʹख୳Γʹؕͬͯ͠· ͏
  7. ͍͍ײ͡ͷϓϩ τλΠ ϓ͕Ͱ͖·ͨ͠ w Α ͘ݟ͔͚Δྫ w νϡʔ τ ϦΞϧΛ΍ͬͯΈͨ

    w νϡʔ τ ϦΞϧͷ୊ࡐΛࣗࣾͷϏδωεޠኮʹஔ͖׵͑ͯΈͨ w ػೳΛ଍ͯ͠Έͨ w ͍͍ײ͡ʹͳͬͨ w ͍ͭͷؒʹ͔ӡ༻ʹ৐ͬͯ͠·͍อक͢Δඞཁ͕Ͱͨ w νϡʔ τ ϦΞϧߏ੒͔Βม͑ΒΕͳ͍··ͲΜͲΜࣾ಺Ͱ࿩͕େ͖ ͘ ͳ͍ͬͯͬͨ
  8. ୼ͼ͸Ϟϊ Ϧ ε͔Β w ࢒೦ͳ͕Βνϡʔ τ ϦΞϧ͸ϕε τͳߏ੒Ͱ͸ͳ͍ wʮ·ͣ͸࢖ͬͯΈͯಈ͔ͯ͠ΈΑ ͏ʯ

    ͱ
 ʮ਺೥ؒ҆ఆͯ͠อकՄೳͳΞϓϦΛ࡞Ζ͏ʯ ͱ͸ผจ຺ w νϡʔ τ ϦΞϧ௨Γʹ࡞Γɺ νϡʔ τ ϦΞϧ௨Γͷػೳ֦ுΛ܁Γฦ͢ͱ
 Ϟϊ Ϧε ʢҰຕؠɺ ڊେͳటஂࢠͳͲͱ΋ʣ ͕஀ੜ͢Δ
  9. ֤ϑ ϨʔϜϫʔΫͷಋೖ 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
  10. ֤ϑ ϨʔϜϫʔΫͷಋೖ 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
  11. 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
  12. 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 ͦΕͧΕͲ͏ͳ͍ͬͯΔ͔
  13. σΟ ϨΫ τ Ϧߏ଄େ೿ൊ 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 υϝΠϯ୯Ґ λΠ ϓ୯Ґ
  14. λΠ ϓ೿͕ͭΒ͞ΛݟΔ৔໘ • containers • usersContainer, issuesContainer, requestsContainer... • components

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

    • buttonComponent, userCardComponent, issueListComponent... • reducers • usersReducer, issuesReducer, requestsReducer... • actions • usersActions, issuesActions, requestsActions...
  16. %VDLTύλʔϯ • users • usersContainer, usersActions, usersReducer, userCardComponent • issues

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

    • issuesContainer, issuesActions, issuesReducer, issueListComponent • requests • requestsContainer, requestsActions, requestsReducer • components • buttonComponent, modalComponent...
  18. େن໛ͰͭΒ͍ͷ͸ѹ౗తϑΝΠϧ਺ w ສߦɺ ը໘ɺ UTϑΝΠϧͷΞϓϦΛ։ൃ࣮ͯ͠ײͨ͜͠ͱ w ίʔ υͷԚ͞Α Γ ϑΝΠϧπϦʔͷࢹೝੑͷѱ͕͞ੜ࢈ੑΛඇৗʹԼ͛Δ

    wʮΤσΟ λͷγϣʔ τΧο τͰඈͿ͔ΒϑΝΠϧπϦʔΛݟΔ͜ͱ͸ͳ͍ʯ ʁ ʁ  w ύεΛҰ੾ҙࣝͤͣ(JU)VCͷૢ࡞΍5ZQF4DSJQUͷϩά௥͍͕շదʹͰ͖Δ͔ ʁ  w ϑΝΠϧπϦʔ(6*ΛݟΔݟͳ͍Ͱ͸ͳ͘ɺ ߏ੒ͷԚ͕͞ੜ࢈ੑʹޮ͍ͯ ͘ Δ w ͜ͷ਺ʹͳΔͱ ʮ%VDLTύλʔϯΛ΍Ε͹εοΩ Ϧ ·ͱ·Δʯ ͱ͍͏࣍ݩΛ௒͑Δ
  19. ֤ϑ ϨʔϜϫʔΫͷ܏޲ w 3FBDU͸ࣗ༝͗͢ΔͷͰɺ ͦ΋ͦ΋ํ਑ΛઃܭΛ͠ͳ͍ͱഁ୼͠΍͍͢ w "OHVMBS͸ελΠϧΨΠ υ͕੔͍ͬͯΔ͕ສਓ޲͚ͳͷͰɺ 
 ܝࡌ಺༰͸૊৫୯Ґͷνϡʔχϯά݁ՌͰ͸ͳ͍

    w /VYU͸ݫ͍͠ϧʔϧʹΑͬͯQBHFTͷϑΝΠϧߏ੒ͱϧʔςΟ ϯάΛ
 ରͱ͍ͯ͠Δ͕ɺ ίΞ υϝΠϯʹ૬౰͢Δ෦෼ͷ؅ཧʹ͍ͭͯ͸৮Εͯͳ͍
  20. ڧݻͰεέʔϧ͢ΔσΟ ϨΫ τ Ϧࢦ਑͕ඞཁ w ϑ ϨʔϜϫʔΫͷࣄ৘Ͱ͸ͳࠜ͘ຊతͳΞϓϦέʔγϣϯͷઃܭ఩ֶʹཱͪฦΔ w ϑ ϨʔϜϫʔΫ஀ੜΑ

    Γݹ͔͘Βଘࡏ͢Δઃܭ఩ֶ͸ɺ બఆͷ൑அج४ͱͳΔ w Ͳ͜Λࣗ෼ͰΞϨϯδ͠ɺ Ͳ͜Λม͑ͣʹै͏΂͖͔ͷ൑அྗͱͳΔ w "OHVMBSͷελΠϧΨΠ υ͸"OHVMBSͷ࣮૷্ͷࣄ৘Λؚ·ͳ͍
 ൺֱత఩ֶʹدͬͨ಺༰ͱͳ͍ͬͯΔͷͰ͝঺հ
  21. "OHVMBSϑΝΠϧߏ੒ΨΠ υൈਮ w ͙͢ʹίʔ υΛݟ͚ͭΒΕΔΑ ͏ʹ͢Δ w ؔ࿈ϑΝΠϧΛ௚ײతͳ৔ॴͰۙ͘ʹஔ͍͓ͯ͘ w Ұ໨Ͱίʔ

    υΛࣝผͰ͖ΔΑ ͏ʹ͢Δ w ௕͍આ໌తͳϑΝΠϧ໊͸ɺ ୹͘ ͯᐆດͳ୹ॖ໊Α Γ༏Ε͍ͯΔ w Ͱ͖ΔݶΓ ϑϥ ο τͳߏ଄Λҡ࣋͢Δ w ৺ཧֶʹج͖߲ͮ໨͕ͭҎ্ʹୡͨ͠ͱ͖ʹαϒσΟ ϨΫ τ ϦΛ࡞੒͢Δ w %3: ʢॏෳͱ৑௕͞ΛऔΓআ͘ʣ Λ໨ඪͱ͢Δ w ௕͘આ໌తͳϑΝΠϧ໊͸༗ӹ͕ͩɺ ͦΕ͕৑௕ʹͳΔͳΒ͹ɺ ͔͑ͬͯγϯϓϧʹͨ͠΄͏͕Α͍
  22. ϕε τϓϥΫςΟ ε ʁ w ࠓճͷϕε τϓϥΫςΟ εͷޠ͸ɺ 
 ੈքதͷਓʹड͚ೖΕΒΕΔ͜ͱΛ໨ࢦͨ͠΋ͷɺ

    ͱ͍͏χϡΞϯεͰ͸ͳ͍ w ࣗ਎ͷɺ ܁Γฦ͠େن໛ΞϓϦέʔγϣϯΛ࡞Γଓ͚͖ͯͨܦݧʹج͍ͮͯ
 ࢼߦࡨޡͷճ਺͕ݮ͖ͬͯͨ҆ఆͨ͠σβΠϯύλʔϯͰ͋Δͱ͍͏ҙ w 3FBDU "OHVMBSͰ͸ɺ ૒ํͰར༻Մೳ w /VYU͸ϑ ϨʔϜϫʔΫࣗମͷ੍໿͕ݫ͍ͨ͠Ίࢀߟఔ౓ʹ
  23. σΟ ϨΫ τ Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀ w ϨΠϠʔ υΞʔΩςΫνϟ͸
 ʮࠓணख͍ͯ͠ΔϑΝΠϧ͸ԿΛ͢Δ΋ͷ͔ʯ Λఆٛ͢Δई౓ͱͳΔ w

    σΟ ϨΫ τ Ϧߏ੒ͱ͜ͷΞʔΩςΫνϟ͕ဃ཭͍ͯ͠Δͱɺ ͦͷར఺͕ऑ·Δ w σΟ ϨΫ τ Ϧߏ੒΋ɺ ϨΠϠʔΛҙࣝͨ͠΋ͷͱ͢Δ
  24. 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ͳͲ
  25. 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/ͳͲ͸ڐ༰
  26. 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%#΋͜ΕΒʹ֘౰
  27. VUJMT w Ұ൪ةݥͳ೏͍͕͕ͪ͠ͳͷͰ஫ҙ͢΂͖utils/ w ࣗࣾҎ֎ͷ୭͔͕࢖͍ͬͯͯ΋ҧ࿨ײͷͳ͍ॲཧ͕֘౰ w ͨͱ͑͹array-flat.ts to-promise.tsͳͲ w গ͠Ͱ΋ࣗࣾυϝΠϯͷ೏ؚ͍͕·ΕͨΒmodels/͔pages/shared/ߦ͖

    w MPEBTIΛΠϯε τʔϧ͢Δ΄ͲͰ͸ͳ͍͚Ͳɺ ͪΐͬͱ࢖͍͍ͨؔ਺ͱ͔͕ೖΔ w ͕͜͜ͲΜͲΜ૿͑Δঢ়گ͸ෆ݈શͳͷͰɺ ࠷ऴखஈͱͯ͠ଊ͑Δ
  28. େσΟ ϨΫ τ Ϧ ͱαϒσΟ ϨΫ τ Ϧͷؔ܎ w pages

    w ֤ϖʔδ໊͝ͱʹ੾Δ w ֤ϖʔδ໊͝ͱͷαϒσΟ ϨΫ τ ϦͷԼ͸λΠ ϓผ w pages/shared/ҎԼ͸%VDLTύλʔϯ w models w %VDLTύλʔϯ w lib w %VDLTύλʔϯ w utils w λΠ ϓผ ΞϓϦશମΛ%VDLTύλʔϯʹἧ͑Δ͔ɺ λΠ ϓผʹ͢Δ͔
 Ͱ͸ͳ͘ɺ  େผͨ͠λΠ ϓ͝ͱͷू໿ͷͦΕͧΕʹ
 υϝΠϯ୯ҐͰ·ͱΊΔ%VDLTύλʔϯద༻͢Δɻ
  29. ଞਓͷൃද಺༰ΛऔΓೖΕΔ w ࠓճͷ಺༰͸ ʮࣗ෼ͷḷΓண͍ͨ࠷ྑͷύλʔϯʯ ͷ঺հ w ͜ΕΛଈ࠲ʹ֤͕ࣗಋೖͰ͖Δ΋ͷͰ͸ͳ͍ͱࢥΘΕΔ w ͋·ͨͷൃදࢿྉ͕ ʮԿΛࠜڌʹͦͷબ୒Λͨ͠ͷ͔ʯ

    ͱ͍͏
 എܠΛ஌͓͚ͬͯ͹ɺ ಉ͡ঢ়گͱͳͬͨͱ͖ͷ൑அྗͱͳΔ w ࠓճͷ಺༰͸ϨΠϠʔ υΞʔΩςΫνϟɺ Ϋ ϦʔϯΞʔΩςΫνϟͱ͍͏
 ઃܭख๏Λ౿·͑ɺ "OHVMBSͷελΠϧΨΠ υ΋ߟྀͨ͠৔߹ʹ
 Ͳ͏൑அ͔ͨ͠ ʁ ͱ͍͏ܦݧஊ
  30. ͨ͘ ͞ΜͷࣄྫΛ஌Ζ͏ ʂ w νϡʔ τ ϦΞϧߏ੒ͷԆ௕ͰͳͥऴΘͬͯ͠· ͏ͷ͔ w ϑ

    ϨʔϜϫʔΫͷ υΩϡϝϯ τΛख़ಡ͢Δ͚ͩͰͳ͘ɺ ࢹ໺Λ޿͛ͯΈΔͷ͕Α͍ wʮ͔ͭͯ+BWB͸Ͳ͏΍͍ͬͯͨ ʁ ʯ ʮ࠷ۙͷJ04։ൃͬͯͲ͏ͳͬͯΔͷ ʁ ʯ ͳͲ w ϑ ϨʔϜϫʔΫ͕ఏڙ͢Δ৘ใ͕ࠓͷࣗ෼ ɾ ૊৫ʹ
 Ϛον͍ͯ͠Δ͔Ͳ͏͔ͷ൑அྗΛཆ͏ w ελΠϧΨΠ υͷΞϨϯδྗͱͳΓɺ νʔϜ͕໰୊Λ๊͑ͨͱ͖ʹ
 ৐Γӽ͑ΒΕΔΑ ͏ʹͳΔ