Clean Architecture in Web Frontend #mixleap

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ΑΖ͘͠ ͓ئ͍க͠·͢

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ΫϦʔϯΞʔΩςΫνϟͱ͸ʁ w ೥ʹϩόʔτɾ$ɾϚʔςΟϯࢯ͕  ϒϩάͰެ։ͨ͠ιϑτ΢ΣΞΞʔΩςΫνϟ w IUUQCMPHDMFBODPEFSDPNVODMFCPCUIF DMFBOBSDIJUFDUVSFIUNM w ೥݄ࠒɺॻ੶΋ग़൛͞ΕΔ w ষ͕ϒϩάͱ΄΅ಉ͡಺༰ɺ  ଞͷষ͸ͳͥͦ͏ͳͷ͔ʁͱ͍͏࿩ͳͲ w ԁͷਤ͕༗໊

Slide 10

Slide 10 text

ԁͷਤ Ҿ༻ݩɿIUUQTCMPHDMFBODPEFSDPNVODMFCPCUIFDMFBO BSDIJUFDUVSFIUNM

Slide 11

Slide 11 text

ԁͷਤ ೖग़ྗ͔Βͷڑ཭ ۙ ԕ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ԁͷਤ ֤૚ʹ͍ͭͯ͸ޙड़

Slide 14

Slide 14 text

΋ͬͱৄ͘͠ w 5IF$MFBO"SDIJUFDUVSF  IUUQTCMPHDMFBODPEFSDPNVODMFCPC UIFDMFBOBSDIJUFDUVSFIUNM w ΫϦʔϯΞʔΩςΫνϟ 5IF$MFBO"SDIJUFDUVSF຋༁   IUUQTCMPHUBJOFUUIF@DMFBO@BSDIJUFDUVSFIUNM w $MFBO"SDIJUFDUVSFୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ  IUUQTXXXLBEPLBXBDPKQQSPEVDU 

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ৄࡉͷϓϥάΠϯԽ w γεςϜ͸ʮํ਑ʯͱʮৄࡉʯͷ̎ͭʹ෼ྨͰ͖Δ w ํ਑ɿ  Ϗδωεͷશͯͷϧʔϧ΍खॱ  γεςϜͷຊ౰ͷՁ஋ w ৄࡉɿ  ํ਑ʹ͍ͭͯ΍ΓऔΓ͢Δͷʹඞཁͳ΋ͷ͕ͩɺ  ํ਑ͷৼΔ෣͍ʹӨڹΛ༩͑Δ΋ͷͰ͸ͳ͍ w ྫʣ*0σόΠεɺ%#ɺ'8ɺFUD

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

ৄࡉ ํ਑ Ξμϓλʔ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ΊͬͪΌΑͦ͞͏΍Μ

Slide 25

Slide 25 text

͕ɺͦΜͳʹ͏·͍͘͘ͷ͔ʁ

Slide 26

Slide 26 text

࣮૷͔ͯ֬͠ΊΔ w 5XJUUFSͬΆ͍8FCΞϓϦΛ࡞Γͳ͕Β͔֬ΊΔ w QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF  IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO BSDIJUFDUVSF w ػೳ͸ΊͬͪΌ࡟ͬͨ w ϦπΟʔτɺ͍͍ͶɺͳͲ͸Ұ୴ແ͠

Slide 27

Slide 27 text

಺ଆ͔Β࡞͍ͬͯ͘

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ίʔυ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ΠϯλʔϑΣʔε Ξμϓλ w ํ਑ͱৄࡉͷڮ౉͠ w ྫ w ΤϯςΟςΟΛ%#Ͱѻ͍΍͍͢ܗࣜʹม׵ɺ  ·ͨ͸ͦͷٯ w ΤϯςΟςΟΛ6*Ͱѻ͍΍͍͢ܗࣜʹม׵ɺ  ·ͨ͸ͦͷٯ w σʔλΞΫηεͷΠϯλϑΣʔεΞμϓλͱɺ  6*ͷσʔλϕʔεΞμϓλΛ࡞੒

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

7JFXଆͷ ΠϯλϑΣʔεΞμϓλ w ʮ͜ͷϨΠϠʔ͸(6*ͷ.7$Λ׬શʹ಺แ͢ΔͩΖ͏ʯ w ͱ͍͏͜ͱ͸'MVY૚΋͔͜͜ w 3FBDUKTΛ࢖͏ͷͰɺ3FEVYΛ࢖༻ w ΞΫγϣϯܦ༝ͰϢʔεέʔεΛݺͼग़͠ɺ  ग़ྗΛTUBUFʹઃఆ w Ϣʔεέʔεͷ࣮૷͸SFEVYUIVOLͷΧελϜҾ਺͔Β஫ೖ

Slide 48

Slide 48 text

SFEVYUIVOLͷΧελϜҾ਺

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

# ͜ΕͰ΍ͬͱ6*Ͱ֬ೝͰ͖Δঢ়ଶ

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

॓୊ w ͕࣌ؒ଍Γͳͯؒ͘ʹ߹Θͳ͔ͬͨ͜ͱ w σʔλΞΫηεΛ'JSFCBTFʹมߋ w $43͔Β$43443ߏ੒΁ w 443༻ͷ%BUB"DDFTTͱ$43༻ͷ%BUB"DDFTTΛ  ࡞Ε͹͍͚ͦ͏ w /FYUKT΁ͷҠߦ w ͍͚Δ͔ʁ

Slide 60

Slide 60 text

࣮૷ޙͷײ૝

Slide 61

Slide 61 text

σʔλΞΫηεͷ ϓϥάΠϯԽ w ඇৗʹΑ͍ w ࢼߦࡨޡͯ͠ΠϯλϑΣʔε͕҆ఆͨ͠ޙʹɺ  ͲͷσʔλετΞΛ࢖͏ͷ͔ɺ  Ͳ͏͍͏εΩʔϚͰอଘ͢Δͷ͔ߟ͑Ε͹Α͍  ˠɹద੾ͳબ୒͕Ͱ͖ͦ͏ w ΋͏ͪΐͬͱݕূ͍ͨ͠ w Ϣʔεέʔε͕΋ͬͱ૿͑ͨ৔߹ʹͲ͏ͳΔ͔

Slide 62

Slide 62 text

7JFXଆͷϓϥάΠϯԽ w Α͍$ w 3FEVYͷBDUJPO͕γϯϓϧʹͳΔ  ʢϢʔεέʔεΛݺͼग़͚ͩ͢ʣ w Ϣʔεέʔε୯ମͰςετ͞Ε͍ͯΔ҆৺ײ

Slide 63

Slide 63 text

7JFXଆͷϓϥάΠϯԽ w ΫϦʔϯΞʔΩςΫνϟͰ͸มΘΒͳ͍఺ w 3FEVYʴ5ZQF4DSJQUɺ೉͍͠ w 3FEVYͷTUBUFͷઃܭɺ೉͍͠ w ΋͏ͪΐͬͱݕূ͍ͨ͠ w 8FC༻ͷ7JFXͱΞϓϦ༻ͷ7JFXɺ  1$༻ͷ7JFXͱεϚϑΥ༻ͷ7JFXΈ͍ͨͳϓϥάΠϯ͸  ͏·͍͖ͦ͘͏ͳͷͰɺࢼͯ͠Έ͍ͨ

Slide 64

Slide 64 text

Ϣʔεέʔεͷ࣮૷ w ϒϩάɾॻ੶ʹ͸۩ମతͳίʔυ͸΄ͱΜͲͳ͍ w ॻ੶ʹ؆қతͳΫϥεਤ͕ࡌ͍ͬͯΔˍ  ଟݴޠͷ࣮૷ྫ͸݁ߏ͋ΔͷͰख୳ΓͰ࣮૷ w Ϣʔεέʔε͸Կ౓΋ॻ͖௚ͨ͠ɺ  σΟϨΫτϦɾϑΝΠϧߏ੒΋ࢼߦࡨޡͨ͠  ΋͏ͪΐͬͱࢼߦࡨޡ͍ͨ͠ w νʔϜͰ΍Δ࣌͸࣮૷ͷࢦ਑Λ༻ҙͨ͠΄͏͕Αͦ͞͏

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

·ͱΊ

Slide 67

Slide 67 text

w ΫϦʔϯΞʔΩςΫνϟ͸  ํ਑ͱৄࡉͷϓϥάΠϯΞʔΩςΫνϟ w ৄࡉΛϓϥάΠϯʹ͢Δ͜ͱͰɺ  ܾఆΛ஗ԆͰ͖Δˍมߋ͕༰қʹͳΔ w σʔλΞΫηεΛϓϥάΠϯԽͰ͖Δͷ͸ͱͯ΋Α͍ w ݸਓతʹ͸ɺ  ·ͣ͸طଘϓϩδΣΫτͷϦϑΝΫλϦϯάͰ  ࢼߦࡨޡͯ͠Έ͍ͨ

Slide 68

Slide 68 text

w ັྗΛ఻͖͑Εͯͳ͍ؾ͕͢ΔͷͰ  ॻ੶ΛͥͻಡΜͰΈ͍ͯͩ͘͞$ w IUUQTXXXLBEPLBXBDPKQ QSPEVDU