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
フロントエンドでDDDやってみた
Search
ak2ie
July 03, 2022
Technology
0
73
フロントエンドでDDDやってみた
「#Webフロントエンド なんでもLT 会 #5」での発表内容です。
https://ncdc-dev.connpass.com/event/248156/
ak2ie
July 03, 2022
Tweet
Share
More Decks by ak2ie
See All by ak2ie
SVG完全に理解してグラフ書いてみた
ak2ie
0
16
Go言語CLIツールで生産効率UPした話
ak2ie
0
100
Goではじめるバックエンド開発
ak2ie
0
59
Notion APIと学ぶNext.js
ak2ie
0
500
NestJSのはじめ方
ak2ie
0
120
初心者がシビックテックに参加してみた
ak2ie
0
100
Firebase についてとことん語りたい
ak2ie
0
100
D3.jsでグラフを描いてみた
ak2ie
0
100
Flutterはじめます
ak2ie
0
130
Other Decks in Technology
See All in Technology
なぜCodeceptJSを選んだか
goataka
0
150
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
110
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
730
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
140
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
540
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
150
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
OpenShift Virtualizationのネットワーク構成を真剣に考えてみた/OpenShift Virtualization's Network Configuration
tnk4on
0
130
Featured
See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Side Projects
sachag
452
42k
Code Reviewing Like a Champion
maltzj
520
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
4 Signs Your Business is Dying
shpigford
181
21k
Building an army of robots
kneath
302
44k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Transcript
フロントエンドで DDDやってみた 2022/06/17
自己紹介 • 名前:ak2ie(あっきー) • システムエンジニア9年目 • 好きなもの:コーヒー、電車
DDD(ドメイン駆動設計)とは? • システムの対象領域(ドメイン)に焦点を当てた設定手法 • ValueObject、Entity、ドメインサービスを使ってドメインの知識を表現 • リポジトリ、アプリケーションサービス、ファクトリを用いてシステムを構成
DDD関連書籍 本家 実践的 入門
対象のプロジェクト • 自治体に納めた税金の使途を表示するサイト • 年収を入力すると、福祉や建築といった使途別に税額が表示される ※業務外のプロジェクトです
構成 • Nuxt(ver.2)、TypeScript • フォルダ構成 ◦ root ▪ components ▪
page ▪ plugins:DDD関連のコード ▪ store
ユビキタス言語 • 論理名と物理名を用語集としてまとめた • ドメイン知識を持った方は1,2名、チームメンバーは5名程度だったので、 大きなものは作らなかった
ValueObject • ドメイン固有の概念を値として表す • 「金額」や「税率」を ValueObjectとして定義 • 作成時の数値チェックや金額計算のミスを防止 export class
Price extends PrimitiveValueObject <number> { static create(value: number): Price { if (value < 0) { throw new Error('金額には0円以上を指定してください ') } return new Price(value) }
ValueObject • 加算:金額同士のみ public add(value: Price) { return Price.create(this.price +
value.price) } • 乗算:金額×税率 public times(value: TaxRate) { return Price.create(this.price * value.rate) }
Entity • 属性が変わっても変化しないもの • 「個人」をEntityとして定義 export class Person { private
salary: Price private homeType: HOME_TYPE }
ドメインサービス • ドメインに関する処理を行う • 年収から使途ごとの税額を計算する • 単体テストも書きやすい(Jestを使用)
ドメインサービス export class TaxService { /** * 一日当たりの税額算出 * @param
param * @returns 税額(単位 :円) */ public calcTax(param: { person: Person government : Government cofogCode : CofogCode }): Price | null { const taxAmount = this.calcAmountTax ({ person: param.person, government: param.government , })
ドメインのテスト const person = new Person({ salary: Price.create(10000000 ), homeType:
HOME_TYPE .SINGLE, }) const govFactory = new GovernmentFactory (wrapper.vm) const goverment = govFactory .Get() const service = new TaxService (wrapper.vm) expect( service.calcTax({ person, government: goverment , cofogCode: CofogCode .create({...}), }) ).toEqual(Price.create(((10000000 - 330000) * 0.06 * 2000) / 10000 / 365))
リポジトリ • StoreやAPIからのデータ取得はリポジトリを通して行うことで統一した export class HogeRepository { public GetStoreData(): Data
| null { const storeData = this.app.store?.getters['storeData'] } } export class HogeHogeRepository { public async GetAPIData(): Promise<APIResponse> { const apiResponse = await this.app.$axios.$get<APIResponse>(uri) } }
リポジトリの利用 • リポジトリ名の候補が効く
リポジトリの定義 declare module '@nuxt/types' { interface NuxtAppOptions { readonly $repositories:
<K extends keyof Repositories>(key: K) => ReturnType<Repositories[K]> } } declare module 'vue/types/vue' { interface Vue { readonly $repositories: <K extends keyof Repositories>(key: K) => ReturnType<Repositories[K]> } }
リポジトリの定義 export const repositories: Repositories = { cofog: CofogRepository, cofogData:
CofogDataRepository, budget: BudgetRepository, }
アプリケーションサービス • システムとして構成させるための処理 • APIへのリクエストなど
ファクトリ • リポジトリはファクトリを通して取得、使用するようにした • ファクトリを使うようにしたが、中身は少なかったので使う意味があまりな かったかも知れない export const apiRepositoryFactory =
{ get: (key: keyof Repositories) => repositories[key] }
まとめ • コード全体の見通しがよくなった • テスト対象範囲が狭くなり、テストが書きやすかった • コード量が多くなってしまった