Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Full-Stack JavaScript meets DDD.
Search
Yusuke SAITO
January 10, 2020
Technology
1
160
Full-Stack JavaScript meets DDD.
2020-01-10 に開催された、DDD meetup#3 でのLT資料です。
Vuex+Express環境でどんなアーキテクチャを採用したか、して良かったこと/悪かったことをまとめました。
Yusuke SAITO
January 10, 2020
Tweet
Share
Other Decks in Technology
See All in Technology
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
150
Model Mondays S2E04: AI Developer Experiences
nitya
0
140
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A Tale of Four Properties
chriscoyier
160
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Statistics for Hackers
jakevdp
799
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
'VMM4UBDL+BWB4DSJQU NFFUT%%% 2020-01-10 ੪౻ ༞ี @uskwitter JIBUNSTYLE Inc.
8IPBN* iOS ߨࢣ IT ΞʔΩςΫτ αʔϏε σβΠφ iOS ΤϯδχΞ UX
σβΠφ swiftຊ ࣥච 1 +*#6/45:-&*OD$&0
ࠓ͢͜ͱ https://twitter.com/little_hand_s/status/1177366806853369856 2
େࣄͩΑͶɺڞ௨ೝࣝ ʮࢲͷதͷʯDDD త γεςϜϞσϧΛϝϯλϧϞσϧͱ͚ۙͮΔ͜ͱ Ұޱʹ ݴ͏ͱ υϝΠϯࣝͱͦͷଞͷίʔυͷ DDDͨ͠ ࡍͷ ΰʔϧ
ᶃ υϝΠϯ͕ࣝϝϯλϧϞσϧʹ͍ۙܗͰ ϞσϦϯά͞Ε͍ͯΔ ᶄ υϝΠϯࣝͱͦͷଞͷίʔυ͕͞Εͨ ԿΒ͔ͷΞʔΩςΫνϟ͕࠾༻͞Ε͍ͯΔ 3
ΞʔΩςΫνϟΛಋ͖ग़ͨ͢Ίͷجຊࢦ ΞϓϦέʔγϣϯ υϝΠϯ ͦͷଞ ϝϯλϧϞσϧΛࢀߟʹ υϝΠϯϞσϦϯάͨ͠ ΦϒδΣΫτ܈ υϝΠϯϞσϧ܈Λ ͬͯϢʔεέʔεΛ ࣮ݱ͢ΔΦϒδΣΫτ܈
UI࣮API௨৴ɺ DB੍ޚ͋Δ͍OS ͔ΒͷΠϕϯτΛ ѻ͏ΦϒδΣΫτ܈ 4
ΞʔΩςΫνϟΛಋ͖ग़ͨ͢Ίͷجຊࢦ ΞϓϦέʔγϣϯ υϝΠϯ ͦͷଞ ϝϯλϧϞσϧΛࢀߟʹ υϝΠϯϞσϦϯάͨ͠ ΦϒδΣΫτ܈ υϝΠϯϞσϧ܈Λ ͬͯϢʔεέʔεΛ ࣮ݱ͢ΔΦϒδΣΫτ܈
UI࣮API௨৴ɺ DB੍ޚ͋Δ͍OS ͔ΒͷΠϕϯτΛ ѻ͏ΦϒδΣΫτ܈ 4 ͍͍ͬͯͯ ґଘੑٯస
7VFY &YQSFTTΛ%%%Ͱɻ 5
7VF+4ͱ MVCͰ͍͏ViewͷඳըϑϨʔϜϫʔΫɻ HTMLςϯϓϨʔτʹσʔλΛΊࠐΈ DOMʹඳը͢Δɻ τϦάϰΣ ϦʔϯεΧΫʢTrygve Reenskaugʣ, 1979 6
7VFYͱ ఆ͢Δํ๏ʢϢʔεέʔεʣ ͷΈ͕ঢ়ଶΛมߋͰ͖Δ͜ͱΛ อূ͢Δɺঢ়ଶཧύλʔϯΛ ࣮ݱ͢ΔϥΠϒϥϦɻ 7 Actions Mutations State Vue
Components dispatch commit mutate render Backend API Vuex ͕͜͜ VueJS → Vuex͕ఆ͢Δϑϩϯτ ΤϯυΞʔΩςΫνϟ
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
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
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
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
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
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
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
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 ϥΠϑΛ!