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

Clean Architecture in Web Frontend #mixleap

Clean Architecture in Web Frontend #mixleap

Hiroyuki ANAI

December 20, 2018
Tweet

More Decks by Hiroyuki ANAI

Other Decks in Programming

Transcript

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

    View full-size slide

  2. ࣗݾ঺հ
    w!QJSPTJLJDL
    w݀Ҫ޺޾
    wϠϑʔגࣜձࣾ

    ΤϯδχΞ
    w+BWB4DSJQUനଳ
    w෱Ԭ͔Βདྷ·ͨ͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. ࿩͢͜ͱ
    w ΫϦʔϯΞʔΩςΫνϟͱ͸ʁ
    w ΫϦʔϯΞʔΩςΫνϟΛ

    8FCϑϩϯτΤϯυͰ࣮૷ͯ͠Έͨ
    w ࣮૷ޙͷײ૝

    View full-size slide

  7. ࿩͞ͳ͍͜ͱ
    w 3FBDUKTͱ͸ʁ3FEVYͱ͸ʁ5ZQF4DSJQUͱ͸ʁ
    w Θ͔Βͳ͍෦෼͕͋Ε͹ɺ࠙਌ձ΍5XJUUFSͰ

    ؾܰʹ࣭໰͍ͯͩ͘͠͞ɻ

    View full-size slide

  8. ஫ҙ
    w ιʔείʔυ͕͍ͬͺ͍ग़͖ͯ·͢
    w ݟͮΒ͚Ε͹εϥΠυ͸ΞοϓࡁΈͳͷͰ

    ͦͪΒΛ͝ཡ͍ͩ͘͞
    w ΞϓϦέʔγϣϯશମ͸ҎԼͷϦϙδτϦʹ

    Ξοϓͯ͠·͢
    w QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF

    IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO
    BSDIJUFDUVSF

    View full-size slide

  9. ΫϦʔϯΞʔΩςΫνϟͱ͸ʁ
    w ೥ʹϩόʔτɾ$ɾϚʔςΟϯࢯ͕

    ϒϩάͰެ։ͨ͠ιϑτ΢ΣΞΞʔΩςΫνϟ
    w IUUQCMPHDMFBODPEFSDPNVODMFCPCUIF
    DMFBOBSDIJUFDUVSFIUNM
    w ೥݄ࠒɺॻ੶΋ग़൛͞ΕΔ
    w ষ͕ϒϩάͱ΄΅ಉ͡಺༰ɺ

    ଞͷষ͸ͳͥͦ͏ͳͷ͔ʁͱ͍͏࿩ͳͲ
    w ԁͷਤ͕༗໊

    View full-size slide

  10. ԁͷਤ
    Ҿ༻ݩɿIUUQTCMPHDMFBODPEFSDPNVODMFCPCUIFDMFBO
    BSDIJUFDUVSFIUNM

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. ΋ͬͱৄ͘͠
    w 5IF$MFBO"SDIJUFDUVSF

    IUUQTCMPHDMFBODPEFSDPNVODMFCPC
    UIFDMFBOBSDIJUFDUVSFIUNM
    w ΫϦʔϯΞʔΩςΫνϟ 5IF$MFBO"SDIJUFDUVSF຋༁

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

    IUUQTXXXLBEPLBXBDPKQQSPEVDU


    View full-size slide

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

    View full-size slide

  16. ৄࡉͷϓϥάΠϯԽ
    w γεςϜ͸ʮํ਑ʯͱʮৄࡉʯͷ̎ͭʹ෼ྨͰ͖Δ
    w ํ਑ɿ

    Ϗδωεͷશͯͷϧʔϧ΍खॱ

    γεςϜͷຊ౰ͷՁ஋
    w ৄࡉɿ

    ํ਑ʹ͍ͭͯ΍ΓऔΓ͢Δͷʹඞཁͳ΋ͷ͕ͩɺ

    ํ਑ͷৼΔ෣͍ʹӨڹΛ༩͑Δ΋ͷͰ͸ͳ͍
    w ྫʣ*0σόΠεɺ%#ɺ'8ɺFUD

    View full-size slide

  17. ৄࡉ
    ํ਑
    Ξμϓλʔ

    View full-size slide

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

    View full-size slide

  19. ৄࡉ͸ํ਑ͷϓϥάΠϯ
    ґଘ
    ৄࡉ
    ํ਑
    Ξμϓλʔ
    ৄࡉ Ξμϓλʔ
    ґଘ
    ϓϥάΠϯ"
    ϓϥάΠϯ#
    ৄࡉ͕มΘͬͯ΋ํ਑ʹӨڹ͸ग़ͳ͍

    View full-size slide

  20. 8FCϑϩϯτΤϯυʹ͓͚Δ
    ʮৄࡉʯ
    w '8ɾϥΠϒϥϦ
    w 3FBDUKT /FYUKT 7VF /VYUKT "OHVMBS
    w σʔλΞΫηε
    w 3&45"1* (SBQI2- 'JSFCBTF H31$
    w ఏڙํ๏
    w $43ͷΈ $43443 ".1

    w FUD

    View full-size slide

  21. 8FCϑϩϯτΤϯυʹ͓͚Δ
    ʮৄࡉʯͷͭΒΈ
    w બ୒ࢶ͕ଟ͗͢Δ
    w ଟ͗͌͢ʂʂ
    w ਖ਼ղΛܾΊΔͷ͕೉͍͠
    w ʮ࣌ͱ৔߹ʹΑΔʯ͕ଟ͍
    w ࣌ͷྲྀΕͰਖ਼ղ͕มΘΔ
    w ಛʹ8FC'&͸ྲྀΕ͕଎͍

    View full-size slide

  22. ΫϦʔϯΞʔΩςΫνϟʴ
    8FCϑϩϯτΤϯυ
    w ৄࡉΛϓϥάΠϯʹͰ͖ΔͷͰɺ
    w ܾఆΛ஗ԆͰ͖Δ
    w ཁ͕݅Θ͔ͬͨஈ֊ͰܾఆͰ͖ΔͷͰద੾ͳબ୒͕
    Ͱ͖Δ
    w ؒҧͬͯ΋มߋ͕༰қ
    w ϓϥάΠϯΛ࡞Ε͹Α͍

    View full-size slide


  23. ΊͬͪΌΑͦ͞͏΍Μ

    View full-size slide


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

    View full-size slide

  25. ࣮૷͔ͯ֬͠ΊΔ
    w 5XJUUFSͬΆ͍8FCΞϓϦΛ࡞Γͳ͕Β͔֬ΊΔ
    w QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF

    IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO
    BSDIJUFDUVSF
    w ػೳ͸ΊͬͪΌ࡟ͬͨ
    w ϦπΟʔτɺ͍͍ͶɺͳͲ͸Ұ୴ແ͠

    View full-size slide

  26. ಺ଆ͔Β࡞͍ͬͯ͘

    View full-size slide

  27. ΤϯςΟςΟ
    w ΤϯςΟςΟ

    ʹ࠷ॏཁϏδωεσʔλʴ࠷ॏཁϏδωεϧʔϧ
    w ࠷ॏཁϏδωεϧʔϧ

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

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


    View full-size slide

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

    View full-size slide

  29. ίʔυ
    σʔλ͸ͨͩͷ0CKFDU

    View full-size slide

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

    View full-size slide


  31. w ʮγεςϜ͕ࣗಈԽ͞Ε͍ͯͳͯ͘΋ଘࡏ͢Δʯ
    w 5XJUUFS͸ࣗಈԽલఏͷαʔϏεͰ͸ʁ
    w αϯϓϧͷςʔϚ͸

    ΦʔΫγϣϯͱ͔ͷํ͕Α͔ͬͨͷͰ͸ʁ
    w ࣍ճͷվળ఺ͱ͍͏͜ͱʹͯ͠ɺઌʹਐΈ·͢

    View full-size slide

  32. Ϣʔεέʔε
    w ΞϓϦέʔγϣϯݻ༗ͷϏδωεϧʔϧ
    w Ϣʔβʔ͔ΒͷೖྗɺϢʔβʔʹ໭͢ग़ྗɺ

    ग़ྗΛੜ੒͢ΔεςοϓͳͲΛఆٛ
    w 6*ʹ͍ͭͯ͸هड़͠ͳ͍
    w σʔλΞΫηεͷΠϯλϑΣʔεΛϢʔεέʔεຖʹఆٛ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. ྫʣαΠϯΞοϓॲཧ
    w ೖྗɿϢʔβ໊ɺύεϫʔυɺग़ྗɿ࡞੒͞ΕͨϢʔβʔ
    w εςοϓɿ
    w ೖྗͷόϦσʔγϣϯΛ࣮ߦ
    w σʔλΞΫηεͷϢʔβʔ࡞੒ॲཧΛݺͼग़͢
    w ࡞੒͞ΕͨϢʔβʔΛฦ͢
    w σʔλΞΫηεɿ
    w Ϣʔβ໊͔ΒϢʔβʔͷऔಘʢϢʔβ໊ͷॏෳνΣοΫʣɺ

    Ϣʔβʔ࡞੒

    View full-size slide

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

    View full-size slide

  37. *4JHO6Q
    8JUI1BTTXPSE
    *4JHO6Q
    8JUI1BTTXPSE
    'BDUPSZ
    *4JHO6Q
    8JUI1BTTXPSE
    'BDUPSZ
    ͷ࣮૷
    *4JHO6Q
    8JUI1BTTXPSE
    *OQVU
    *4JHO6Q
    8JUI1BTTXPSE
    0VUQVU
    JOUFSGBDF
    JOUFSGBDF
    ੜ੒
    ࣮૷
    ੜ੒
    *4JHO6Q
    8JUI1BTTXPSE
    ͷ࣮૷
    ࣮૷
    *%BUB"DDFTT
    ར༻
    ೖྗ
    ग़ྗ
    JOUFSGBDF

    View full-size slide

  38. Ϣʔεέʔεຖʹ
    σʔλΞΫηεɺ*O0VUΛఆٛ
    *OQVU
    4JHO6Q
    6TF$BTF
    *%BUB"DDFTT
    0VUQVU *OQVU
    4JHO*O
    6TF$BTF
    *%BUB"DDFTT
    0VUQVU *OQVU
    $SFBUF5XFFU
    6TF$BTF
    *%BUB"DDFTT
    0VUQVU
    ʜ

    View full-size slide

  39. ΠϯλʔϑΣʔε
    Ξμϓλ
    w ํ਑ͱৄࡉͷڮ౉͠
    w ྫ
    w ΤϯςΟςΟΛ%#Ͱѻ͍΍͍͢ܗࣜʹม׵ɺ

    ·ͨ͸ͦͷٯ
    w ΤϯςΟςΟΛ6*Ͱѻ͍΍͍͢ܗࣜʹม׵ɺ

    ·ͨ͸ͦͷٯ
    w σʔλΞΫηεͷΠϯλϑΣʔεΞμϓλͱɺ

    6*ͷσʔλϕʔεΞμϓλΛ࡞੒

    View full-size slide

  40. 6*
    ํ਑
    %# σʔλΞΫηεͷ
    ΠϯλϑΣʔεΞμϓλʔ
    6*ͷ
    ΠϯλϑΣʔεΞμϓλʔ

    View full-size slide

  41. σʔλΞΫηεͷ
    ΠϯλϑΣʔεΞμϓλ
    w ·ͩཁ͕݅෼͔Βͳ͍ͷͰࢼߦࡨޡ͠΍͍͢Α͏ʹ
    w Ұ୴ϝϞϦ্ʢม਺্ʣʹ

    σʔλΛอଘ͢Δ͚ͩͷ΋ͷΛ࡞Δ
    w .FNPSZ%BUB"DDFTT

    View full-size slide

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

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

    View full-size slide

  43. SFEVYUIVOLͷΧελϜҾ਺

    View full-size slide

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

    View full-size slide

  45. ৄࡉ ํ਑
    Ξμϓλʔ
    6TF$BTF
    &OUJUZ
    *%BUB"DDFTT
    3FEVY
    .FNPSZ
    %BUB"DDFTT
    ϝϞϦ
    7JFX
    ʢ3FBDUKTʣ
    "DUJPO
    4UBUF

    View full-size slide

  46. .BJOίϯϙʔωϯτ
    w ΞϓϦέʔγϣϯͷى఺

    /PEFKTͳΒʮOPEFʙKTʯ

    ΫϥΠΞϯταΠυͳΒXFCQBDLͷFOUSZ
    w %*ίϯςφΛ࢖ͬͯ

    ֤Ϣʔεέʔε΍σʔλΞΫηεͷΠϯελϯεΛੜ੒
    w ࠓճ͸%*ίϯςφͱͯ͠BXJMJYΛ࢖༻
    w IUUQTXXXOQNKTDPNQBDLBHFBXJMJY

    View full-size slide

  47. #
    ͜ΕͰ΍ͬͱ6*Ͱ֬ೝͰ͖Δঢ়ଶ

    View full-size slide

  48. σʔλΞΫηεΛ
    มߋ͢Δ
    w αΠϯΞοϓɺαΠϯΠϯΛ࣮૷ͨ͋ͨ͠ΓͰɺ

    σʔλΛӬଓԽͨ͘͠ͳ͖ͬͯͨ
    w -PDBM4UPSBHF%BUB"DDFTTΛ࣮૷ͯ͠ɺ

    .FNPSZ%BUB"DDFTTͷ୅ΘΓʹ஫ೖ͢Δ͚ͩ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ࡞Ε͹͍͚ͦ͏
    w /FYUKT΁ͷҠߦ
    w ͍͚Δ͔ʁ

    View full-size slide

  52. ࣮૷ޙͷײ૝

    View full-size slide

  53. σʔλΞΫηεͷ
    ϓϥάΠϯԽ
    w ඇৗʹΑ͍
    w ࢼߦࡨޡͯ͠ΠϯλϑΣʔε͕҆ఆͨ͠ޙʹɺ

    ͲͷσʔλετΞΛ࢖͏ͷ͔ɺ

    Ͳ͏͍͏εΩʔϚͰอଘ͢Δͷ͔ߟ͑Ε͹Α͍

    ˠɹద੾ͳબ୒͕Ͱ͖ͦ͏
    w ΋͏ͪΐͬͱݕূ͍ͨ͠
    w Ϣʔεέʔε͕΋ͬͱ૿͑ͨ৔߹ʹͲ͏ͳΔ͔

    View full-size slide

  54. 7JFXଆͷϓϥάΠϯԽ
    w Α͍$
    w 3FEVYͷBDUJPO͕γϯϓϧʹͳΔ

    ʢϢʔεέʔεΛݺͼग़͚ͩ͢ʣ
    w Ϣʔεέʔε୯ମͰςετ͞Ε͍ͯΔ҆৺ײ

    View full-size slide

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

    1$༻ͷ7JFXͱεϚϑΥ༻ͷ7JFXΈ͍ͨͳϓϥάΠϯ͸

    ͏·͍͖ͦ͘͏ͳͷͰɺࢼͯ͠Έ͍ͨ

    View full-size slide

  56. Ϣʔεέʔεͷ࣮૷
    w ϒϩάɾॻ੶ʹ͸۩ମతͳίʔυ͸΄ͱΜͲͳ͍
    w ॻ੶ʹ؆қతͳΫϥεਤ͕ࡌ͍ͬͯΔˍ

    ଟݴޠͷ࣮૷ྫ͸݁ߏ͋ΔͷͰख୳ΓͰ࣮૷
    w Ϣʔεέʔε͸Կ౓΋ॻ͖௚ͨ͠ɺ

    σΟϨΫτϦɾϑΝΠϧߏ੒΋ࢼߦࡨޡͨ͠

    ΋͏ͪΐͬͱࢼߦࡨޡ͍ͨ͠
    w νʔϜͰ΍Δ࣌͸࣮૷ͷࢦ਑Λ༻ҙͨ͠΄͏͕Αͦ͞͏

    View full-size slide

  57. ݸਓͷݟղʢײ૝ʣ
    w ৽نϓϩδΣΫτΑΓɺ

    طଘϓϩδΣΫτͷϦϑΝΫλϦϯάʹ׆༻͍ͨ͠
    w ࢀߟʹͰ͖Δ࣮૷΍ࢦ਑͕ͳ͍ͱ

    νʔϜͰҰؾʹ΍Δʹ͸ݱঢ়೉͍͠
    w طଘϓϩδΣΫτʹదԠͯ͠Έͯ

    ࿅౓Λ্͍͛ͨ

    View full-size slide

  58. w ΫϦʔϯΞʔΩςΫνϟ͸

    ํ਑ͱৄࡉͷϓϥάΠϯΞʔΩςΫνϟ
    w ৄࡉΛϓϥάΠϯʹ͢Δ͜ͱͰɺ

    ܾఆΛ஗ԆͰ͖Δˍมߋ͕༰қʹͳΔ
    w σʔλΞΫηεΛϓϥάΠϯԽͰ͖Δͷ͸ͱͯ΋Α͍
    w ݸਓతʹ͸ɺ

    ·ͣ͸طଘϓϩδΣΫτͷϦϑΝΫλϦϯάͰ

    ࢼߦࡨޡͯ͠Έ͍ͨ

    View full-size slide

  59. w ັྗΛ఻͖͑Εͯͳ͍ؾ͕͢ΔͷͰ

    ॻ੶ΛͥͻಡΜͰΈ͍ͯͩ͘͞$
    w IUUQTXXXLBEPLBXBDPKQ
    QSPEVDU

    View full-size slide

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

    View full-size slide

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

    View full-size slide