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

The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か ...

The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend

2025/02/28(金)
JSConf.jp おかわり Node学園46時限目

Takuto Wada

February 28, 2025
Tweet

More Decks by Takuto Wada

Other Decks in Programming

Transcript

  1. Agenda  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿ 

    8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔ 👉
  2. Agenda  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿ 

    8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔ 👉
  3. Agenda  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿ 

    8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔ 👉
  4. Agenda  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿ 

    8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔ 👉
  5. w σόΠεͱϒϥ΢βͷ੍໿ w ༷ʑͳσόΠεʢεϚʔτϑΥϯɺλϒϨοτɺ1$ͳͲʣ΍ ϒϥ΢βʢ$ISPNFɺ'JSFGPYɺ4BGBSJͳͲʣͰಈ࡞͢Δඞཁ͕͋Δ w ωοτϫʔΫͷ੍໿ w ωοτϫʔΫͷ஗Ԇ΍ෆ҆ఆੑͳͲɺ௨৴؀ڥʹىҼ͢Δ໰୊͕͋Δ w

    ηΩϡϦςΟͷ੍໿ w 944΍$43'ͳͲɺΫϥΠΞϯταΠυͷηΩϡϦςΟϦεΫ͕͋Δ w 4&0ͷ੍໿ʢ$PSF8FC7JUBMTʣ w ύϑΥʔϚϯεվળ͸গ͠લ·Ͱ͸ඇػೳཁ͕݅ͩͬͨɺࠓͰ͸࣮རʹ൐͏ॏཁͳཁૉ ͱͳ͖͓ͬͯͯΓɺαΠτͷಡΈࠐΈ଎౓͕஗͍ͱݕࡧॱҐΛԼ͛ΒΕͯ͠·͏ w ϓϩάϥϛϯάݴޠͷ੍໿ w ݱ࣮తʹ͸+BWB4DSJQUʢ5ZQF4DSJQUؚΉʣҰ୒ͷঢ়ଶ 8FCϑϩϯτΤϯυʹ͓͚Δ੍໿
  6. w ύϑΥʔϚϯε࠷దԽͷॏࢹ w $87ͷࢦඪΛվળ͢ΔͨΊʹɺϖʔδͷಡΈࠐΈ଎౓΍ϨϯμϦϯά଎౓ͷ࠷దԽ͕ॏཁࢹ͞ΕΔ w ίʔυͷ࠷దԽɺը૾ͷѹॖɺ஗ԆಡΈࠐΈɺΩϟογϡͷ׆༻ͳͲ w ϨϯμϦϯάઓུͷݟ௚͠ w -$1Λվળ͢ΔͨΊʹɺ443΍44(ͳͲɺॳظදࣔ଎౓Λ޲্ͤ͞ΔϨϯμϦϯάઓུ͕࠾༻͞ΕΔ

    w $43ͷ৔߹Ͱ΋ɺίʔυ෼ׂ΍ϓϦϩʔυͳͲɺύϑΥʔϚϯεվળͷͨΊͷ޻෉ w ΠϯλϥΫςΟϒੑͷ޲্ w '*%Λվળ͢ΔͨΊʹɺϝΠϯεϨουͷॲཧΛ࠷దԽ͠ɺϢʔβʔͷૢ࡞ʹૉૣ͘Ԡ౴Ͱ͖ΔΑ͏ͳ ઃܭ͕ٻΊΒΕΔ w ෆཁͳॲཧͷ࡟ݮɺඇಉظॲཧͷ׆༻ɺ8FC8PSLFSͷར༻ͳͲ w ࢹ֮తͳ҆ఆੑͷ֬อ w $-4Λվળ͢ΔͨΊʹɺը૾ͷαΠζΛ໌ࣔతʹࢦఆ͢ΔɺಈతͳίϯςϯπͷૠೖʹΑΔϨΠΞ΢τ ͷͣΕΛ࠷খݶʹ཈ΔͳͲ ੍໿ͱͯ͠ͷ$PSF8FC7JUBMT͕8FCϑϩϯτΤϯυͷΞʔΩςΫνϟ΁༩͑ΔӨڹ
  7. Agenda  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿ 

    8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔ 👉
  8. w 6*ͷॏཁੑ w ࣮ߦ؀ڥͷଟ༷ੑ w ঢ়ଶ؅ཧͷෳࡶ͞ w ϏδωεϩδοΫͷෳࡶ͞ w ύϑΥʔϚϯεͷ؍఺

    w ৴པੑͷ؍఺ w ηΩϡϦςΟͷք໘ w ϓϩάϥϛϯάݴޠͷબ୒ࢶ 8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍
  9. ੍໿ͱ඼࣭ಛੑͷ؍఺͔Β8FCϑϩϯτΤϯυͱόοΫΤϯυΛൺֱ͢Δ 8FCϑϩϯτΤϯυ όοΫΤϯυ ࢖༻ੑ ʢ6TBCJMJUZʣ Ϣʔβʔମݧʢ69ʣ͕ඇৗʹॏཁͰ͋ΓɺϢʔβʔʹͱͬ ͯ࢖͍΍͘͢շదͳΠϯλʔϑΣʔεΛߏங͢Δඞཁ͕͋ Δɻૢ࡞ੑɺΞΫηγϏϦςΟʹՃ͑ɺϢʔβʔૢ࡞ͷΤϥ ʔϋϯυϦϯάͳͲͷϢʔβʔΤϥʔ๷ࢭੑ΋ॏཁ ௚઀తʹ͸Өڹ͠ͳ͍

    దԠੑ ʢ"EBQUBCJMJUZʣ ϢʔβʔͷσόΠε΍ϒϥ΢β্Ͱಈ࡞͢ΔͨΊɺ ωοτϫʔΫ؀ڥ΍σόΠεੑೳͳͲɺ࣮ߦ؀ڥ͕ ඇৗʹଟ༷ αʔόʔ্Ͱಈ࡞͢ΔͨΊɺ࣮ߦ؀ڥ͸ൺֱతۉҰɻ ҆ఆͨ͠ωοτϫʔΫ؀ڥͱ๛෋ͳϦιʔε͕ར༻Մ ೳ ৴པੑ ʢ3FMJBCJMJUZʣ ͋͑ͯݴ͏ͳΒ ωοτϫʔΫͷෆ҆ఆੑʹ൐͏ো֐ڐ༰ੑ͕ඞཁ αʔόʔ΍σʔλϕʔεɺωοτϫʔΫͷ੒ख़ੑʢ҆ ఆੑʣɺՄ༻ੑɺো֐ڐ༰ੑʢରނোੑʣɺճ෮ੑશ ͕ͯॏཁ ੑೳޮ཰ੑ ʢ1FSGPSNBODFʣ ϖʔδͷಡΈࠐΈ଎౓ɺϨϯμϦϯά଎౓ɺϢʔβ ʔૢ࡞΁ͷԠ౴଎౓ͳͲ͕ॏཁ αʔόʔଆͷॲཧ଎౓ɺσʔλϕʔεͷΫΤϦ଎౓ɺ αʔόʔ܈ͷεέʔϥϏϦςΟɺωοτϫʔΫͷଳҬ ෯ͳͲ͕ॏཁ ηΩϡϦςΟ  4FDVSJUZ ΫϥΠΞϯτଆͷηΩϡϦςΟରࡦʢ944ɺ$43'ɺσʔλ࿙Ӯରࡦ ͳͲʣϢʔβʔೖྗͷݕূɺϓϥΠόγʔอޢɺ҆શͳσʔλૹ৴ɺ ηΩϡϦςΟϔομʔͷઃఆͳͲɺΫϥΠΞϯτଆͷηΩϡϦςΟର ࡦΛపఈ͠ɺηΩϡϦςΟϦεΫΛߟྀͨ͠ઃܭ͕ॏཁ αʔόʔଆͷηΩϡϦςΟରࡦʢೝূɺೝՄɺσʔλ อޢͳͲʣ͕ॏཁ
  10. อकੑ͸Ͳ͏͔ೋͭͷෳࡶ͞ 8FCϑϩϯτΤϯυ όοΫΤϯυ ϏδωεϩδοΫͷෳࡶ͞ όοΫΤϯυʹൺ΂ͯ ϏδωεϩδοΫ͸ൺֱత୯७ɺ ͋Δ͍͸΄΅ແ͍৔߹΋͋Δ ϏδωεϩδοΫ͕ ඇৗʹෳࡶʹͳΔ৔߹͕͋Δ ঢ়ଶ؅ཧͷෳࡶ͞

    Ϣʔβʔૢ࡞΍ඇಉظॲཧʹΑͬͯ ঢ়ଶ͕සൟʹมԽ͠ɺ ෳࡶͳঢ়ଶ؅ཧ͕ඞཁ ओʹσʔλϕʔεͰ ੔߹ੑΛ؅ཧ͠ɺ ϦΫΤετ͝ͱʹঢ়ଶΛॲཧ͢Δ
  11. อकੑ͸Ͳ͏͔ෳࡶ͞ͱͷઓ͍ํ 8FCϑϩϯτΤϯυ όοΫΤϯυ ϏδωεϩδοΫͷෳࡶ͞ όοΫΤϯυʹൺ΂ͯ ϏδωεϩδοΫ͸ൺֱత୯७ɺ ͋Δ͍͸΄΅ແ͍৔߹΋͋Δ ϏδωεϩδοΫ͕ ඇৗʹෳࡶʹͳΔ৔߹͕͋Δ ঢ়ଶ؅ཧͷෳࡶ͞

    Ϣʔβʔૢ࡞΍ඇಉظॲཧʹΑͬͯ ঢ়ଶ͕සൟʹมԽ͠ɺ ෳࡶͳঢ়ଶ؅ཧ͕ඞཁ ओʹσʔλϕʔεͰ ੔߹ੑΛ؅ཧ͠ɺ ϦΫΤετ͝ͱʹঢ়ଶΛॲཧ͢Δ %%% ίϯϙʔωϯτ ࢦ޲ 5IF$MFBO "SDIJUFDUVSF
  12. อकੑ͸Ͳ͏͔ෳࡶ͞ͱͷઓ͍ํ 8FCϑϩϯτΤϯυ όοΫΤϯυ ϏδωεϩδοΫͷෳࡶ͞ όοΫΤϯυʹൺ΂ͯ ϏδωεϩδοΫ͸ൺֱత୯७ɺ ͋Δ͍͸΄΅ແ͍৔߹΋͋Δ ϏδωεϩδοΫ͕ ඇৗʹෳࡶʹͳΔ৔߹͕͋Δ ঢ়ଶ؅ཧͷෳࡶ͞

    Ϣʔβʔૢ࡞΍ඇಉظॲཧʹΑͬͯ ঢ়ଶ͕සൟʹมԽ͠ɺ ෳࡶͳঢ়ଶ؅ཧ͕ඞཁ ओʹσʔλϕʔεͰ ੔߹ੑΛ؅ཧ͠ɺ ϦΫΤετ͝ͱʹঢ়ଶΛॲཧ͢Δ %%% ίϯϙʔωϯτ ࢦ޲ 5IF$MFBO "SDIJUFDUVSF ঢ়ଶ؅ཧͷෳࡶ͞ͱઓ͏ٕज़ ϏδωεϩδοΫͷෳࡶ͞ͱઓ͏ٕज़ ϏδωεϩδοΫͷෳࡶ͞ͱઓ͏ٕज़
  13. Agenda  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿ 

    8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔ 👉
  14. Agenda 👉  ྫͷಉ৺ԁ͕ͬ͘͠Γ͜ͳ͍ϞϠϞϠ  ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త  8FCϑϩϯτΤϯυͱ඼࣭ಛੑ  8FCϑϩϯτΤϯυͷ੍໿

     8FCϑϩϯτΤϯυͱόοΫΤϯυͷҧ͍  5IF$MFBO"SDIJUFDUVSFͷޭࡑ  ͳͥ8FCϑϩϯτΤϯυͰ͸ؔ਺ͱ஋Λ࢖͏ͷ͔
  15. w +BWB4DSJQUʹ͸ݱঢ়ͰϞδϡʔϧੑʢอकੑͷ෭ಛੑʣͷଅਐखஈ͕ͭ͋Δ w ΫϥεͱϞδϡʔϧ &4.  w ͯ͞ɺόϯυϧαΠζ࡟ݮʢྫ5SFF4IBLJOHʣʹ޲͍͍ͯΔͷ͸ͲͪΒʁ w &4.ɻ&4.͸੩తղੳͰ͖ΔɻΫϥε͸ߏ଄্࡟Γʹ͍͘͠ܧঝ΋͋Δɻ

    w &4.ͱʢ७ਮʣؔ਺ͱʢΠϛϡʔλϒϧͳʣ஋ͰϓϩάϥϛϯάΛߦ͏ͱɺ࢖Θ Ε͍ͯΔ΋ͷ͚͕ͩ໌ࣔతʹίʔυ্ʹ͋Δঢ়ଶʹͳΔɻ࢖ΘΕ͍ͯͳ͍ͱ֬ఆ ͨ͠΋ͷ͸όϯυϧ͔Β࡟ΕΔ w อकੑͱࢿݯ࠷దੑʢύϑΥʔϚϯεͷ෭ಛੑʣͷཱ྆Λ༰қʹ͢ΔͨΊʹɺ ΫϥεͰ͸ͳ͘Ϟδϡʔϧͱؔ਺Λ࢖͏ ͳͥؔ਺ͱ஋Λ࢖͏ͷ͔όϯυϧαΠζ࠷దԽ
  16. ׬

  17. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ w ιϑτ΢ΣΞΞʔΩςΫνϟͷ໨త͸๬·ΕΔ඼࣭ಛੑΛଅਐ͢Δ͜ͱ w ΞʔΩςΫνϟܾఆʹӨڹΛ༩͑ΔΞʔΩςΫνϟυϥΠόʹ͸඼࣭ಛੑɺ੍໿ɺͦͷଞӨڹΛ༩͑ΔػೳཁٻͳͲ͕͋Δ w 8FCϑϩϯτΤϯυͰଅਐ͍ͨ͠඼࣭ಛੑͱόοΫΤϯυͰଅਐ͍ͨ͠඼࣭ಛੑ͸ҟͳΔ w 8FCϑϩϯτΤϯυͷ੍໿ͱόοΫΤϯυͷ੍໿΋ҟͳΔ w

    8FCϑϩϯτΤϯυͱόοΫΤϯυͰ͸ཱͪ޲͔͏ෳࡶ͕͞ҟͳΔͷͰઓ͍ํ΋ҟͳΔ w ॻ੶ʰ$MFBO"SDIJUFDUVSFʱͷݪଇ͔Βಋ͔ΕΔ۩ମྫͷͻͱͭͰ͋Δ5IF$MFBO"SDIJUFDUVSF͕ʮΫϦʔϯΞʔΩςΫ νϟʯͱ͍͏໊લͰಠΓา͖͍ͯ͠Δ w ʰ$MFBO"SDIJUFDUVSFʱͷݪଇ͔Βಋग़͞ΕΔ۩ମతͳΞϓϦέʔγϣϯΞʔΩςΫνϟͷͻͱͭͰ͋ΓɺෳࡶͳϏδωεϩ δοΫΛ൐͏όοΫΤϯυͷอकੑΛ޲্ͤ͞ΔͨΊͷ࣮ྫͰ͋Δ5IF$MFBO"SDIJUFDUVSFͷΫϥεϕʔε001࣮૷Ͱ͋Δ +BWB΍$ͷαϯϓϧίʔυΛਅࣅͯ΋8FCϑϩϯτΤϯυͰͬ͘͠Γ͜ͳ͍ͷ͸ɺ8FCϑϩϯτΤϯυͰ͸ଅਐ͍ͨ͠඼࣭ಛ ੑ΍੍໿͕ҟͳΔ͔Β౰ͨΓલͷ͜ͱ w ౴͑͸ۙ͘ʹ͋Δɻ8FCϑϩϯτΤϯυͷτϨϯυͷഎޙʹ͋Δઃܭࢥ૝ɺ඼࣭ಛੑ΍੍໿ͷτϨʔυΦϑղܾΛݟΑ͏ w 8FCϑϩϯτΤϯυͷΤίγεςϜ͸อकੑͱύϑΥʔϚϯεͷཱ྆ͷͨΊʹ001͔Β'1΁ͷελΠϧมߋΛଅ͍ͯ͠Δ w ຊߨԋ͸ʮ5IF$MFBO"SDIJUFDUVSFʯΛܗ͚ͩਅࣅΔߦҝ͕ʮ8FCϑϩϯτΤϯυʯͰͬ͘͠Γ͜ͳ͍ݪҼΛ෼ੳͨ͠ w 8FCҎ֎ͷϑϩϯτΤϯυ΍όοΫΤϯυʹ͸ݴٴ͍ͯ͠ͳ͍ͷͰ஫ҙ