Tweet
Tweet

Slide 1

Slide 1 text

'VMM4UBDL+BWB4DSJQU NFFUT%%% 2020-01-10 ੪౻ ༞ี @uskwitter JIBUNSTYLE Inc.

Slide 2

Slide 2 text

8IPBN* iOS ߨࢣ IT ΞʔΩςΫτ αʔϏε σβΠφ iOS ΤϯδχΞ UX σβΠφ swiftຊ ࣥච 1 +*#6/45:-&*OD$&0 ೥

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ https://twitter.com/little_hand_s/status/1177366806853369856 2

Slide 4

Slide 4 text

େࣄͩΑͶɺڞ௨ೝࣝ ʮࢲͷதͷʯDDD ໨త γεςϜϞσϧΛϝϯλϧϞσϧͱ͚ۙͮΔ͜ͱ Ұޱʹ ݴ͏ͱ υϝΠϯ஌ࣝͱͦͷଞͷίʔυͷ෼཭ DDDͨ͠ ࡍͷ ΰʔϧ ᶃ υϝΠϯ஌͕ࣝϝϯλϧϞσϧʹ͍ۙܗͰ ϞσϦϯά͞Ε͍ͯΔ ᶄ υϝΠϯ஌ࣝͱͦͷଞͷίʔυ͕෼཭͞Εͨ ԿΒ͔ͷΞʔΩςΫνϟ͕࠾༻͞Ε͍ͯΔ 3

Slide 5

Slide 5 text

ΞʔΩςΫνϟΛಋ͖ग़ͨ͢Ίͷجຊࢦ਑ ΞϓϦέʔγϣϯ૚ υϝΠϯ૚ ͦͷଞ૚ ϝϯλϧϞσϧΛࢀߟʹ υϝΠϯϞσϦϯάͨ͠ ΦϒδΣΫτ܈ υϝΠϯϞσϧ܈Λ ࢖ͬͯϢʔεέʔεΛ ࣮ݱ͢ΔΦϒδΣΫτ܈ UI࣮૷΍API௨৴ɺ DB੍ޚ͋Δ͍͸OS ͔ΒͷΠϕϯτΛ ѻ͏ΦϒδΣΫτ܈ 4

Slide 6

Slide 6 text

ΞʔΩςΫνϟΛಋ͖ग़ͨ͢Ίͷجຊࢦ਑ ΞϓϦέʔγϣϯ૚ υϝΠϯ૚ ͦͷଞ૚ ϝϯλϧϞσϧΛࢀߟʹ υϝΠϯϞσϦϯάͨ͠ ΦϒδΣΫτ܈ υϝΠϯϞσϧ܈Λ ࢖ͬͯϢʔεέʔεΛ ࣮ݱ͢ΔΦϒδΣΫτ܈ UI࣮૷΍API௨৴ɺ DB੍ޚ͋Δ͍͸OS ͔ΒͷΠϕϯτΛ ѻ͏ΦϒδΣΫτ܈ 4 ஌͍͍ͬͯͯ ґଘੑٯస

Slide 7

Slide 7 text

7VFY &YQSFTTΛ%%%Ͱɻ 5

Slide 8

Slide 8 text

7VF+4ͱ͸ MVCͰ͍͏ViewͷඳըϑϨʔϜϫʔΫɻ HTMLςϯϓϨʔτʹσʔλΛ͸ΊࠐΈ DOMʹඳը͢Δɻ τϦάϰΣ ϦʔϯεΧ΢ΫʢTrygve Reenskaugʣ, 1979 6

Slide 9

Slide 9 text

7VFYͱ͸ ૝ఆ͢Δํ๏ʢϢʔεέʔεʣ ͷΈ͕ঢ়ଶΛมߋͰ͖Δ͜ͱΛ อূ͢Δɺঢ়ଶ؅ཧύλʔϯΛ ࣮ݱ͢ΔϥΠϒϥϦɻ 7 Actions Mutations State Vue Components dispatch commit mutate render Backend API Vuex ͕͜͜ VueJS → Vuex͕૝ఆ͢Δϑϩϯτ ΤϯυΞʔΩςΫνϟ

Slide 10

Slide 10 text

Back-End Shared Infrastructure (DB) presenter .js interactor .js Front-End ࢲͷ࠾༻ͨ͠ ΞʔΩςΫνϟ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js 7

Slide 11

Slide 11 text

Shared Infrastructure (DB) presenter .js interactor .js Front-End ϑϩϯτʹண໨ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js Back-End 8

Slide 12

Slide 12 text

Back-End Shared Infrastructure (DB) presenter .js interactor .js όοΫ͚ͩݟΔͱ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js Front-End 9

Slide 13

Slide 13 text

Back-End Shared Infrastructure (DB) presenter .js interactor .js όοΫ͚ͩݟΔͱ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js Front-End 9

Slide 14

Slide 14 text

Back-End Shared Infrastructure (DB) presenter .js interactor .js Front-End શମͰݟΔͱʜ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js interactor Infrastructure 10

Slide 15

Slide 15 text

Back-End Shared Infrastructure (DB) presenter .js interactor .js Front-End શମͰݟΔͱʜ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js interactor Infrastructure 'VMM4UBDL +4 υΧϯ ΞʔΩςΫνϟʂ 10

Slide 16

Slide 16 text

1SPT$POT Pros oFront-EndͰυϝΠϯ஌͕ࣝඞཁʹͳͬͯ΋΁ͬͪΌΒ oFront-EndͱBack-End߹ܭͰͷΞʔΩςΫνϟϧʔϧΛ࡟ݮͰ͖ͨ oఆ਺ϑΝΠϧͷڞ௨Խ Cons oϓϩδΣΫτ಺ʹಉ໊͡લͷιʔεϑΝΠϧ͕૿͑ͯࠞཚͨ͠ oFront-EndͷES Modulesʢex. importʣͱɺBack-EndʢNodeJSʣͷ CommonJSʢex. requireʣʹۤ͠ΊΒΕͨ → esmImportΛར༻ͯ͠ղܾ 11

Slide 17

Slide 17 text

1SPT$POT Pros oFront-EndͰυϝΠϯ஌͕ࣝඞཁʹͳͬͯ΋΁ͬͪΌΒ oFront-EndͱBack-End߹ܭͰͷΞʔΩςΫνϟϧʔϧΛ࡟ݮͰ͖ͨ oఆ਺ϑΝΠϧͷڞ௨Խ Cons oϓϩδΣΫτ಺ʹಉ໊͡લͷιʔεϑΝΠϧ͕૿͑ͯࠞཚͨ͠ oFront-EndͷES Modulesʢex. importʣͱɺBack-EndʢNodeJSʣͷ CommonJSʢex. requireʣʹۤ͠ΊΒΕͨ → esmImportΛར༻ͯ͠ղܾ 11 ͊͞ɺ͋ͳͨ΋ Full-Stack JavaScript Ͱ շదͳ DDD ϥΠϑΛ!