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

2bedb1eb8f841cd3c3ae584600b016e0?s=47 OKUNOKENTARO
November 02, 2019
4.7k

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

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

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

November 02, 2019
Tweet

Transcript

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

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

    όοΫΤϯ υ ɾ ΤϯδχΞ w "OHVMBS೔ຊϢʔβʔձ
 OHLZPUPΦʔΨφΠβ
  3. ͜Ε·Ͱͷొஃ಺༰

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

    τ Ϧߏ੒͸ ʁ  w ͦΕΒͷߏ੒Λ࢖͍ଓ͚Δͷ͸Α͍͜ͱ͔ ʁ  w σΟ ϨΫ τ Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀Ͱ͋Δ w Ͳ͏΍ͬͯߏ੒Λߟ͑ΔͨΊͷ൑அྗΛ਎ʹ͚ͭΔ͔
  5. 7JFXϑ ϨʔϜϫʔΫͷ৘ใɺ ग़ἧ͍࣌୅

  6. ܈༤ׂڌͷ࣌୅΋མͪண͖ʜ w ΢ΣϒΞϓϦέʔγϣϯΛ࡞ΔʜͱͳͬͨΒબ͹ΕΔͷ͕
 3FBDU "OHVMBS 7VFKT /VYU  w Χόʔൣғ͸༷ʑ͕ͩɺ

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

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

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

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

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

    ͱ
 ʮ਺೥ؒ҆ఆͯ͠อकՄೳͳΞϓϦΛ࡞Ζ͏ʯ ͱ͸ผจ຺ w νϡʔ τ ϦΞϧ௨Γʹ࡞Γɺ νϡʔ τ ϦΞϧ௨Γͷػೳ֦ுΛ܁Γฦ͢ͱ
 Ϟϊ Ϧε ʢҰຕؠɺ ڊେͳటஂࢠͳͲͱ΋ʣ ͕஀ੜ͢Δ
  12. Ͳ͏͢Δ͔ ʁ

  13. ൑அྗΛ਎ʹ͚ͭΔ

  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
  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
  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
  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 ͦΕͧΕͲ͏ͳ͍ͬͯΔ͔
  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 υϝΠϯ୯Ґ λΠ ϓ୯Ґ
  19. λΠ ϓ೿͕ͭΒ͞ΛݟΔ৔໘ • containers • usersContainer, issuesContainer, requestsContainer... • components

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

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

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

    • issuesContainer, issuesActions, issuesReducer, issueListComponent • requests • requestsContainer, requestsActions, requestsReducer • components • buttonComponent, modalComponent...
  23. ͡Ό͋%VDLTύλʔϯʹ͢Ε͹͍͍ ʂ

  24. None
  25. େن໛ͰͭΒ͍ͷ͸ѹ౗తϑΝΠϧ਺ w ສߦɺ ը໘ɺ UTϑΝΠϧͷΞϓϦΛ։ൃ࣮ͯ͠ײͨ͜͠ͱ w ίʔ υͷԚ͞Α Γ ϑΝΠϧπϦʔͷࢹೝੑͷѱ͕͞ੜ࢈ੑΛඇৗʹԼ͛Δ

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

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

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

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

  30. ϕε τϓϥΫςΟ ε ʁ w ࠓճͷϕε τϓϥΫςΟ εͷޠ͸ɺ 
 ੈքதͷਓʹड͚ೖΕΒΕΔ͜ͱΛ໨ࢦͨ͠΋ͷɺ

    ͱ͍͏χϡΞϯεͰ͸ͳ͍ w ࣗ਎ͷɺ ܁Γฦ͠େن໛ΞϓϦέʔγϣϯΛ࡞Γଓ͚͖ͯͨܦݧʹج͍ͮͯ
 ࢼߦࡨޡͷճ਺͕ݮ͖ͬͯͨ҆ఆͨ͠σβΠϯύλʔϯͰ͋Δͱ͍͏ҙ w 3FBDU "OHVMBSͰ͸ɺ ૒ํͰར༻Մೳ w /VYU͸ϑ ϨʔϜϫʔΫࣗମͷ੍໿͕ݫ͍ͨ͠Ίࢀߟఔ౓ʹ
  31. ϨΠϠʔ υΞʔΩςΫνϟ https://speakerdeck.com/okunokentaro/ngrx-architecture?slide=17 Կ΋࣮૷͞Ε͍ͯͳ͍ΞϓϦέʔγϣϯ։ൃͱ͍͏େւݪͰ
 ࣗ෼ͨͪ͸Ͳ͜Λߤւ͍ͯ͠Δͷ͔஌ΔͨΊͷ΋ͷ

  32. σΟ ϨΫ τ Ϧߏ੒ͱΞϓϦέʔγϣϯઃܭ͸ີ઀ w ϨΠϠʔ υΞʔΩςΫνϟ͸
 ʮࠓணख͍ͯ͠ΔϑΝΠϧ͸ԿΛ͢Δ΋ͷ͔ʯ Λఆٛ͢Δई౓ͱͳΔ w

    σΟ ϨΫ τ Ϧߏ੒ͱ͜ͷΞʔΩςΫνϟ͕ဃ཭͍ͯ͠Δͱɺ ͦͷར఺͕ऑ·Δ w σΟ ϨΫ τ Ϧߏ੒΋ɺ ϨΠϠʔΛҙࣝͨ͠΋ͷͱ͢Δ
  33. େσΟ ϨΫ τ Ϧ w QBHFT w NPEFMT w MJC

    w VUJMT
  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ͳͲ
  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/ͳͲ͸ڐ༰
  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%#΋͜ΕΒʹ֘౰
  37. VUJMT w Ұ൪ةݥͳ೏͍͕͕ͪ͠ͳͷͰ஫ҙ͢΂͖utils/ w ࣗࣾҎ֎ͷ୭͔͕࢖͍ͬͯͯ΋ҧ࿨ײͷͳ͍ॲཧ͕֘౰ w ͨͱ͑͹array-flat.ts to-promise.tsͳͲ w গ͠Ͱ΋ࣗࣾυϝΠϯͷ೏ؚ͍͕·ΕͨΒmodels/͔pages/shared/ߦ͖

    w MPEBTIΛΠϯε τʔϧ͢Δ΄ͲͰ͸ͳ͍͚Ͳɺ ͪΐͬͱ࢖͍͍ͨؔ਺ͱ͔͕ೖΔ w ͕͜͜ͲΜͲΜ૿͑Δঢ়گ͸ෆ݈શͳͷͰɺ ࠷ऴखஈͱͯ͠ଊ͑Δ
  38. ϨΠϠʔ υΞʔΩςΫνϟͱͷରԠ pages/

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

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

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

  42. Ϋ ϦʔϯΞʔΩςΫνϟ σΟ ϨΫ τ Ϧ ͝ͱͷ໾ׂΛ໌֬ʹ͢Δͱɺ 
 ґଘํ޲΋ࣗવͱἧ͍Ϋ ϦʔϯΞʔΩςΫνϟͷ࣮ݱͱͳΔ

  43. Ϋ ϦʔϯΞʔΩςΫνϟ σΟ ϨΫ τ Ϧ ͝ͱͷ໾ׂΛ໌֬ʹ͢Δͱɺ 
 ґଘํ޲΋ࣗવͱἧ͍Ϋ ϦʔϯΞʔΩςΫνϟͷ࣮ݱͱͳΔ

    models/ pages/shared/ pages/ lib/
  44. େσΟ ϨΫ τ Ϧ ͱαϒσΟ ϨΫ τ Ϧͷؔ܎ w pages

    w ֤ϖʔδ໊͝ͱʹ੾Δ w ֤ϖʔδ໊͝ͱͷαϒσΟ ϨΫ τ ϦͷԼ͸λΠ ϓผ w pages/shared/ҎԼ͸%VDLTύλʔϯ w models w %VDLTύλʔϯ w lib w %VDLTύλʔϯ w utils w λΠ ϓผ ΞϓϦશମΛ%VDLTύλʔϯʹἧ͑Δ͔ɺ λΠ ϓผʹ͢Δ͔
 Ͱ͸ͳ͘ɺ  େผͨ͠λΠ ϓ͝ͱͷू໿ͷͦΕͧΕʹ
 υϝΠϯ୯ҐͰ·ͱΊΔ%VDLTύλʔϯద༻͢Δɻ
  45. ͜ΕΒΛऔΓೖΕΔʹ͸ ʁ

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

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

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