Clean Architecture in Web Frontend #mixleap

Transcript

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

   View Slide

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

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

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

   View Slide

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

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

   View Slide

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

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

   Ξοϓͯ͠·͢
   w QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF

   IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO
   BSDIJUFDUVSF
   

   View Slide

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

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

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

   View Slide

10. ԁͷਤ
    Ҿ༻ݩɿIUUQTCMPHDMFBODPEFSDPNVODMFCPCUIFDMFBO
    BSDIJUFDUVSFIUNM
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    IUUQTXXXLBEPLBXBDPKQQSPEVDU

    

    View Slide

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

    View Slide

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

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

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

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

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

    View Slide

17. View Slide

18. ৄࡉ
    ํ਑
    Ξμϓλʔ
    

    View Slide

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

    View Slide

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

    View Slide

21. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

27. ಺ଆ͔Β࡞͍ͬͯ͘
    

    View Slide

28. ΤϯςΟςΟ
    w ΤϯςΟςΟ

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

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

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

    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    Ϣʔβʔ࡞੒
    

    View Slide

37. ίʔυ
    

    View Slide

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

    View Slide

39. View Slide

40. View Slide

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

    View Slide

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

    View Slide

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

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

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

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

    View Slide

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

    View Slide

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

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

    View Slide

46. View Slide

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

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

    View Slide

48. SFEVYUIVOLͷΧελϜҾ਺
    

    View Slide

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

    View Slide

50. View Slide

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

    View Slide

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

    /PEFKTͳΒʮOPEFʙKTʯ

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

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

    View Slide

53. View Slide

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

    View Slide

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

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

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

    View Slide

56. View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

60. ࣮૷ޙͷײ૝
    

    View Slide

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

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

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

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

    View Slide

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

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

    View Slide

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

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

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

    View Slide

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

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

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

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

    View Slide

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

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

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

    ࿅౓Λ্͍͛ͨ
    

    View Slide

66. ·ͱΊ
    

    View Slide

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

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

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

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

    ࢼߦࡨޡͯ͠Έ͍ͨ
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide