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
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
110
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
LLM時代の検索
shibuiwilliam
2
170
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bash Introduction
62gerente
613
210k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Documentation Writing (for coders)
carmenintech
72
4.9k
Designing Experiences People Love
moore
142
24k
Adopting Sorbet at Scale
ufuk
77
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
RailsConf 2023
tenderlove
30
1.1k
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 ϥΠϑΛ!