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
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
300
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
推し書籍📚 / Books and a QA Engineer
ak1210
0
140
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
950
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
Featured
See All Featured
Navigating Team Friction
lara
187
15k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Code Review Best Practice
trishagee
69
19k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Documentation Writing (for coders)
carmenintech
72
4.9k
KATA
mclloyd
30
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Balancing Empowerment & Direction
lara
1
450
The World Runs on Bad Software
bkeepers
PRO
70
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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 ϥΠϑΛ!