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

Clean Architecture in Web Frontend #mixleap

Clean Architecture in Web Frontend #mixleap

Dc52871050369929247b69f3767e8737?s=128

Hiroyuki ANAI

December 20, 2018
Tweet

Transcript

  1. ΫϦʔϯΞʔΩςΫνϟ JO 8FCϑϩϯτΤϯυ !QJSPTJLJDL .JY-FBQ4UVEZ8FCϑϩϯτΤϯυฏ੒࠷ޙͷౙͷਞ

  2. ࣗݾ঺հ w!QJSPTJLJDL w݀Ҫ޺޾ wϠϑʔגࣜձࣾ
 ΤϯδχΞ w+BWB4DSJQUനଳ w෱Ԭ͔Βདྷ·ͨ͠

  3. 3FBDUೖ໳3FBDUɾ3FEVYͷಋೖ͔ΒαʔόαΠυϨϯμϦϯάʹΑΔ69ͷ޲্·Ͱ IUUQTXXXTIPFJTIBDPKQCPPLEFUBJM

  4. 8&# %#13&44ͲΜͱ͍͜ʂϑϩϯτΤϯυ։ൃ ϠϑʔͷΤϯδχΞͰࣥච͍ͯ͠·͢ͷͰɺͥͻʂ ࠓ݄ൃചͷWPM͸!@@TBLJUP@@ʹΑΔʮ(BUTCZ+4ʯͰ͢ɻ

  5. ΑΖ͘͠ ͓ئ͍க͠·͢

  6. ࿩͢͜ͱ w ΫϦʔϯΞʔΩςΫνϟͱ͸ʁ w ΫϦʔϯΞʔΩςΫνϟΛ
 8FCϑϩϯτΤϯυͰ࣮૷ͯ͠Έͨ w ࣮૷ޙͷײ૝

  7. ࿩͞ͳ͍͜ͱ w 3FBDUKTͱ͸ʁ3FEVYͱ͸ʁ5ZQF4DSJQUͱ͸ʁ w Θ͔Βͳ͍෦෼͕͋Ε͹ɺ࠙਌ձ΍5XJUUFSͰ
 ؾܰʹ࣭໰͍ͯͩ͘͠͞ɻ

  8. ஫ҙ w ιʔείʔυ͕͍ͬͺ͍ग़͖ͯ·͢ w ݟͮΒ͚Ε͹εϥΠυ͸ΞοϓࡁΈͳͷͰ
 ͦͪΒΛ͝ཡ͍ͩ͘͞ w ΞϓϦέʔγϣϯશମ͸ҎԼͷϦϙδτϦʹ
 Ξοϓͯ͠·͢ w

    QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF
 IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO BSDIJUFDUVSF
  9. ΫϦʔϯΞʔΩςΫνϟͱ͸ʁ w ೥ʹϩόʔτɾ$ɾϚʔςΟϯࢯ͕
 ϒϩάͰެ։ͨ͠ιϑτ΢ΣΞΞʔΩςΫνϟ w IUUQCMPHDMFBODPEFSDPNVODMFCPCUIF DMFBOBSDIJUFDUVSFIUNM w ೥݄ࠒɺॻ੶΋ग़൛͞ΕΔ w

    ষ͕ϒϩάͱ΄΅ಉ͡಺༰ɺ
 ଞͷষ͸ͳͥͦ͏ͳͷ͔ʁͱ͍͏࿩ͳͲ w ԁͷਤ͕༗໊
  10. ԁͷਤ Ҿ༻ݩɿIUUQTCMPHDMFBODPEFSDPNVODMFCPCUIFDMFBO BSDIJUFDUVSFIUNM

  11. ԁͷਤ ೖग़ྗ͔Βͷڑ཭ ۙ ԕ

  12. ԁͷਤ ґଘͷํ޲͕Ұํ޲

  13. ԁͷਤ ֤૚ʹ͍ͭͯ͸ޙड़

  14. ΋ͬͱৄ͘͠ w 5IF$MFBO"SDIJUFDUVSF
 IUUQTCMPHDMFBODPEFSDPNVODMFCPC UIFDMFBOBSDIJUFDUVSFIUNM w ΫϦʔϯΞʔΩςΫνϟ 5IF$MFBO"SDIJUFDUVSF຋༁ 
 IUUQTCMPHUBJOFUUIF@DMFBO@BSDIJUFDUVSFIUNM

    w $MFBO"SDIJUFDUVSFୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ
 IUUQTXXXLBEPLBXBDPKQQSPEVDU

  15. Αͦ͞͏ͳ఺ w Ϗδωεϧʔϧ୯ମͰςετͰ͖Δ w Ϗδωεϧʔϧ͕%#ͳͲʹґଘ͍ͯ͠ͳ͍͔Β w ৄࡉΛϓϥάΠϯʹͰ͖Δ

  16. ৄࡉͷϓϥάΠϯԽ w γεςϜ͸ʮํ਑ʯͱʮৄࡉʯͷ̎ͭʹ෼ྨͰ͖Δ w ํ਑ɿ
 Ϗδωεͷશͯͷϧʔϧ΍खॱ
 γεςϜͷຊ౰ͷՁ஋ w ৄࡉɿ
 ํ਑ʹ͍ͭͯ΍ΓऔΓ͢Δͷʹඞཁͳ΋ͷ͕ͩɺ


    ํ਑ͷৼΔ෣͍ʹӨڹΛ༩͑Δ΋ͷͰ͸ͳ͍ w ྫʣ*0σόΠεɺ%#ɺ'8ɺFUD
  17. None
  18. ৄࡉ ํ਑ Ξμϓλʔ

  19. ৄࡉ͸ํ਑ͷϓϥάΠϯ ґଘ ґଘ ৄࡉ ํ਑ Ξμϓλʔ ํ਑͸ৄࡉͷ͜ͱΛ஌Βͳ͍

  20. ৄࡉ͸ํ਑ͷϓϥάΠϯ ґଘ ৄࡉ ํ਑ Ξμϓλʔ ৄࡉ Ξμϓλʔ ґଘ ϓϥάΠϯ" ϓϥάΠϯ#

    ৄࡉ͕มΘͬͯ΋ํ਑ʹӨڹ͸ग़ͳ͍
  21. 8FCϑϩϯτΤϯυʹ͓͚Δ ʮৄࡉʯ w '8ɾϥΠϒϥϦ w 3FBDUKT /FYUKT 7VF /VYUKT "OHVMBS

    w σʔλΞΫηε w 3&45"1* (SBQI2- 'JSFCBTF H31$ w ఏڙํ๏ w $43ͷΈ $43 443 ".1  w FUD
  22. 8FCϑϩϯτΤϯυʹ͓͚Δ ʮৄࡉʯͷͭΒΈ w બ୒ࢶ͕ଟ͗͢Δ w ଟ͗͌͢ʂʂ w ਖ਼ղΛܾΊΔͷ͕೉͍͠ w ʮ࣌ͱ৔߹ʹΑΔʯ͕ଟ͍

    w ࣌ͷྲྀΕͰਖ਼ղ͕มΘΔ w ಛʹ8FC'&͸ྲྀΕ͕଎͍
  23. ΫϦʔϯΞʔΩςΫνϟʴ 8FCϑϩϯτΤϯυ w ৄࡉΛϓϥάΠϯʹͰ͖ΔͷͰɺ w ܾఆΛ஗ԆͰ͖Δ w ཁ͕݅Θ͔ͬͨஈ֊ͰܾఆͰ͖ΔͷͰద੾ͳબ୒͕ Ͱ͖Δ w

    ؒҧͬͯ΋มߋ͕༰қ w ϓϥάΠϯΛ࡞Ε͹Α͍
  24. ΊͬͪΌΑͦ͞͏΍Μ

  25. ͕ɺͦΜͳʹ͏·͍͘͘ͷ͔ʁ

  26. ࣮૷͔ͯ֬͠ΊΔ w 5XJUUFSͬΆ͍8FCΞϓϦΛ࡞Γͳ͕Β͔֬ΊΔ w QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF
 IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO BSDIJUFDUVSF w ػೳ͸ΊͬͪΌ࡟ͬͨ w

    ϦπΟʔτɺ͍͍ͶɺͳͲ͸Ұ୴ແ͠
  27. ಺ଆ͔Β࡞͍ͬͯ͘

  28. ΤϯςΟςΟ w ΤϯςΟςΟ
 ʹ࠷ॏཁϏδωεσʔλʴ࠷ॏཁϏδωεϧʔϧ w ࠷ॏཁϏδωεϧʔϧ
 Ϗδωεʹͱ͔ͬͯܽͤͳ͍΋ͷͰ͋ΓɺγεςϜ͕ࣗ ಈԽ͞Ε͍ͯͳͯ͘΋ଘࡏ͢Δ w ࠷ॏཁϏδωεσʔλ


    ࠷ॏཁϏδωεϧʔϧʹඞཁͳσʔλ

  29. w ࠷ॏཁϏδωεσʔλ w Ϣʔβʔ w πΟʔτ w ࠷ॏཁϏδωεϧʔϧ w πΟʔτͷςΩετ͸จࣈҎ಺

    w Ϣʔβʔ໊͸จࣈҎ্ͷӳ਺ࣈ
  30. ίʔυ σʔλ͸ͨͩͷ0CKFDU

  31. ϧʔϧ͸७ਮͳؔ਺ ίʔυ

  32. w ʮγεςϜ͕ࣗಈԽ͞Ε͍ͯͳͯ͘΋ଘࡏ͢Δʯ w 5XJUUFS͸ࣗಈԽલఏͷαʔϏεͰ͸ʁ w αϯϓϧͷςʔϚ͸
 ΦʔΫγϣϯͱ͔ͷํ͕Α͔ͬͨͷͰ͸ʁ w ࣍ճͷվળ఺ͱ͍͏͜ͱʹͯ͠ɺઌʹਐΈ·͢

  33. Ϣʔεέʔε w ΞϓϦέʔγϣϯݻ༗ͷϏδωεϧʔϧ w Ϣʔβʔ͔ΒͷೖྗɺϢʔβʔʹ໭͢ग़ྗɺ
 ग़ྗΛੜ੒͢ΔεςοϓͳͲΛఆٛ w 6*ʹ͍ͭͯ͸هड़͠ͳ͍ w σʔλΞΫηεͷΠϯλϑΣʔεΛϢʔεέʔεຖʹఆٛ

  34. Ϣʔεέʔεͷܕʢ*6TF$BTFʣʜ ೖྗΛҾ਺ʹग़ྗΛ1SPNJTFͰฦ͢ ϢʔεέʔεͷϑΝΫτϦͷܕʢ*6TF$BTF'BDUPSZʣʜ σʔλΞΫηεΛҾ਺ʹϢʔεέʔεΛฦ͢ ॻ੶ɾϒϩάʹ͸࣮૷αϯϓϧ͕ແ͍ͷͰख୳ΓͰఆٛ

  35. ߟ͑ͨϢʔεέʔε w αΠϯΞοϓॲཧ w αΠϯΠϯॲཧ w πΟʔτॲཧ w λΠϜϥΠϯදࣔॲཧ

  36. ྫʣαΠϯΞοϓॲཧ w ೖྗɿϢʔβ໊ɺύεϫʔυɺग़ྗɿ࡞੒͞ΕͨϢʔβʔ w εςοϓɿ w ೖྗͷόϦσʔγϣϯΛ࣮ߦ w σʔλΞΫηεͷϢʔβʔ࡞੒ॲཧΛݺͼग़͢ w

    ࡞੒͞ΕͨϢʔβʔΛฦ͢ w σʔλΞΫηεɿ w Ϣʔβ໊͔ΒϢʔβʔͷऔಘʢϢʔβ໊ͷॏෳνΣοΫʣɺ
 Ϣʔβʔ࡞੒
  37. ίʔυ

  38. ΠϯλϑΣʔεͳͷͰอଘઌ͕Կͳͷ͔͸෼͔Βͳ͍ঢ়ଶ Ϣʔεέʔε͕Ͳ͏͍͏σʔλΞΫηεΛ͢Δͷ͔ɺͱ͍͏͜ͱ͚ͩΛఆٛ

  39. None
  40. None
  41. *4JHO6Q 8JUI1BTTXPSE *4JHO6Q 8JUI1BTTXPSE 'BDUPSZ *4JHO6Q 8JUI1BTTXPSE 'BDUPSZ ͷ࣮૷ *4JHO6Q

    8JUI1BTTXPSE *OQVU *4JHO6Q 8JUI1BTTXPSE 0VUQVU JOUFSGBDF JOUFSGBDF ੜ੒ ࣮૷ ੜ੒ *4JHO6Q 8JUI1BTTXPSE ͷ࣮૷ ࣮૷ *%BUB"DDFTT ར༻ ೖྗ ग़ྗ JOUFSGBDF
  42. Ϣʔεέʔεຖʹ σʔλΞΫηεɺ*O0VUΛఆٛ *OQVU 4JHO6Q 6TF$BTF *%BUB"DDFTT 0VUQVU *OQVU 4JHO*O 6TF$BTF

    *%BUB"DDFTT 0VUQVU *OQVU $SFBUF5XFFU 6TF$BTF *%BUB"DDFTT 0VUQVU ʜ
  43. ΠϯλʔϑΣʔε Ξμϓλ w ํ਑ͱৄࡉͷڮ౉͠ w ྫ w ΤϯςΟςΟΛ%#Ͱѻ͍΍͍͢ܗࣜʹม׵ɺ
 ·ͨ͸ͦͷٯ w

    ΤϯςΟςΟΛ6*Ͱѻ͍΍͍͢ܗࣜʹม׵ɺ
 ·ͨ͸ͦͷٯ w σʔλΞΫηεͷΠϯλϑΣʔεΞμϓλͱɺ
 6*ͷσʔλϕʔεΞμϓλΛ࡞੒
  44. 6* ํ਑ %# σʔλΞΫηεͷ ΠϯλϑΣʔεΞμϓλʔ 6*ͷ ΠϯλϑΣʔεΞμϓλʔ

  45. σʔλΞΫηεͷ ΠϯλϑΣʔεΞμϓλ w ·ͩཁ͕݅෼͔Βͳ͍ͷͰࢼߦࡨޡ͠΍͍͢Α͏ʹ w Ұ୴ϝϞϦ্ʢม਺্ʣʹ
 σʔλΛอଘ͢Δ͚ͩͷ΋ͷΛ࡞Δ w .FNPSZ%BUB"DDFTT

  46. None
  47. 7JFXଆͷ ΠϯλϑΣʔεΞμϓλ w ʮ͜ͷϨΠϠʔ͸(6*ͷ.7$Λ׬શʹ಺แ͢ΔͩΖ͏ʯ w ͱ͍͏͜ͱ͸'MVY૚΋͔͜͜ w 3FBDUKTΛ࢖͏ͷͰɺ3FEVYΛ࢖༻ w ΞΫγϣϯܦ༝ͰϢʔεέʔεΛݺͼग़͠ɺ


    ग़ྗΛTUBUFʹઃఆ w Ϣʔεέʔεͷ࣮૷͸SFEVYUIVOLͷΧελϜҾ਺͔Β஫ೖ
  48. SFEVYUIVOLͷΧελϜҾ਺

  49. SFEVYUIVOLͷΧελϜҾ਺ ΧελϜҾ਺ UIVOLΞΫγϣϯͷ ୈҾ਺

  50. None
  51. ৄࡉ ํ਑ Ξμϓλʔ 6TF$BTF &OUJUZ *%BUB"DDFTT 3FEVY .FNPSZ %BUB"DDFTT ϝϞϦ

    7JFX ʢ3FBDUKTʣ "DUJPO 4UBUF
  52. .BJOίϯϙʔωϯτ w ΞϓϦέʔγϣϯͷى఺
 /PEFKTͳΒʮOPEFʙKTʯ
 ΫϥΠΞϯταΠυͳΒXFCQBDLͷFOUSZ w %*ίϯςφΛ࢖ͬͯ
 ֤Ϣʔεέʔε΍σʔλΞΫηεͷΠϯελϯεΛੜ੒ w ࠓճ͸%*ίϯςφͱͯ͠BXJMJYΛ࢖༻

    w IUUQTXXXOQNKTDPNQBDLBHFBXJMJY
  53. None
  54. # ͜ΕͰ΍ͬͱ6*Ͱ֬ೝͰ͖Δঢ়ଶ

  55. σʔλΞΫηεΛ มߋ͢Δ w αΠϯΞοϓɺαΠϯΠϯΛ࣮૷ͨ͋ͨ͠ΓͰɺ
 σʔλΛӬଓԽͨ͘͠ͳ͖ͬͯͨ w -PDBM4UPSBHF%BUB"DDFTTΛ࣮૷ͯ͠ɺ
 .FNPSZ%BUB"DDFTTͷ୅ΘΓʹ஫ೖ͢Δ͚ͩ

  56. None
  57. .FNPSZ%BUB"DDFTTͷ୅ΘΓʹ-PDBM4UPSBHF%BUB"DDFTTΛ %*ίϯςφʹಥͬࠐΉ͚ͩ Ϣʔεέʔε΍3FEVYͷBDUJPO$SFBUPS͸มߋແ͠ͰೖΕସ͑Մೳ

  58. $ σʔλΞΫηεΛ ϓϥάΠϯԽͰ͖͍ͯΔ

  59. ॓୊ w ͕࣌ؒ଍Γͳͯؒ͘ʹ߹Θͳ͔ͬͨ͜ͱ w σʔλΞΫηεΛ'JSFCBTFʹมߋ w $43͔Β$43 443ߏ੒΁ w 443༻ͷ%BUB"DDFTTͱ$43༻ͷ%BUB"DDFTTΛ


    ࡞Ε͹͍͚ͦ͏ w /FYUKT΁ͷҠߦ w ͍͚Δ͔ʁ
  60. ࣮૷ޙͷײ૝

  61. σʔλΞΫηεͷ ϓϥάΠϯԽ w ඇৗʹΑ͍ w ࢼߦࡨޡͯ͠ΠϯλϑΣʔε͕҆ఆͨ͠ޙʹɺ
 ͲͷσʔλετΞΛ࢖͏ͷ͔ɺ
 Ͳ͏͍͏εΩʔϚͰอଘ͢Δͷ͔ߟ͑Ε͹Α͍
 ˠɹద੾ͳબ୒͕Ͱ͖ͦ͏ w

    ΋͏ͪΐͬͱݕূ͍ͨ͠ w Ϣʔεέʔε͕΋ͬͱ૿͑ͨ৔߹ʹͲ͏ͳΔ͔
  62. 7JFXଆͷϓϥάΠϯԽ w Α͍$ w 3FEVYͷBDUJPO͕γϯϓϧʹͳΔ
 ʢϢʔεέʔεΛݺͼग़͚ͩ͢ʣ w Ϣʔεέʔε୯ମͰςετ͞Ε͍ͯΔ҆৺ײ

  63. 7JFXଆͷϓϥάΠϯԽ w ΫϦʔϯΞʔΩςΫνϟͰ͸มΘΒͳ͍఺ w 3FEVYʴ5ZQF4DSJQUɺ೉͍͠ w 3FEVYͷTUBUFͷઃܭɺ೉͍͠ w ΋͏ͪΐͬͱݕূ͍ͨ͠ w

    8FC༻ͷ7JFXͱΞϓϦ༻ͷ7JFXɺ
 1$༻ͷ7JFXͱεϚϑΥ༻ͷ7JFXΈ͍ͨͳϓϥάΠϯ͸
 ͏·͍͖ͦ͘͏ͳͷͰɺࢼͯ͠Έ͍ͨ
  64. Ϣʔεέʔεͷ࣮૷ w ϒϩάɾॻ੶ʹ͸۩ମతͳίʔυ͸΄ͱΜͲͳ͍ w ॻ੶ʹ؆қతͳΫϥεਤ͕ࡌ͍ͬͯΔˍ
 ଟݴޠͷ࣮૷ྫ͸݁ߏ͋ΔͷͰख୳ΓͰ࣮૷ w Ϣʔεέʔε͸Կ౓΋ॻ͖௚ͨ͠ɺ
 σΟϨΫτϦɾϑΝΠϧߏ੒΋ࢼߦࡨޡͨ͠
 ΋͏ͪΐͬͱࢼߦࡨޡ͍ͨ͠

    w νʔϜͰ΍Δ࣌͸࣮૷ͷࢦ਑Λ༻ҙͨ͠΄͏͕Αͦ͞͏
  65. ݸਓͷݟղʢײ૝ʣ w ৽نϓϩδΣΫτΑΓɺ
 طଘϓϩδΣΫτͷϦϑΝΫλϦϯάʹ׆༻͍ͨ͠ w ࢀߟʹͰ͖Δ࣮૷΍ࢦ਑͕ͳ͍ͱ
 νʔϜͰҰؾʹ΍Δʹ͸ݱঢ়೉͍͠ w طଘϓϩδΣΫτʹదԠͯ͠Έͯ
 ࿅౓Λ্͍͛ͨ

  66. ·ͱΊ

  67. w ΫϦʔϯΞʔΩςΫνϟ͸
 ํ਑ͱৄࡉͷϓϥάΠϯΞʔΩςΫνϟ w ৄࡉΛϓϥάΠϯʹ͢Δ͜ͱͰɺ
 ܾఆΛ஗ԆͰ͖Δˍมߋ͕༰қʹͳΔ w σʔλΞΫηεΛϓϥάΠϯԽͰ͖Δͷ͸ͱͯ΋Α͍ w ݸਓతʹ͸ɺ


    ·ͣ͸طଘϓϩδΣΫτͷϦϑΝΫλϦϯάͰ
 ࢼߦࡨޡͯ͠Έ͍ͨ
  68. w ັྗΛ఻͖͑Εͯͳ͍ؾ͕͢ΔͷͰ
 ॻ੶ΛͥͻಡΜͰΈ͍ͯͩ͘͞$ w IUUQTXXXLBEPLBXBDPKQ QSPEVDU

  69. w ෼Ͱ࿩ͤΔ಺༰Ͱ͸ͳ͔ͬͨ' w ࠙਌ձͰ࿩͠·͠ΐ͏(

  70. ͋Γ͕ͱ͏ ͍͟͝·ͨ͠