$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Clean Architecture by TypeScript & NestJS
Search
ryounasso
July 10, 2024
Programming
0
1k
Clean Architecture by TypeScript & NestJS
ryounasso
July 10, 2024
Tweet
Share
More Decks by ryounasso
See All by ryounasso
明日から始めるリファクタリング
ryounasso
0
160
駆け足で Google から学ぶテスト設計の指針
ryounasso
0
130
React inside basics: learn from “build own react"
ryounasso
0
160
抽象データ型について学んだ
ryounasso
0
310
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
3.4k
Fast API を用いた Web API の開発
ryounasso
0
570
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
0
430
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1.3k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
820
Other Decks in Programming
See All in Programming
Level up your Gemini CLI - D&D Style!
palladius
1
180
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
120
チームをチームにするEM
hitode909
0
280
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
18
7.1k
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
370
Developing static sites with Ruby
okuramasafumi
0
200
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
shunk031
12
7.1k
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
3
680
FluorTracer / RayTracingCamp11
kugimasa
0
210
TUIライブラリつくってみた / i-just-make-TUI-library
kazto
1
330
How Software Deployment tools have changed in the past 20 years
geshan
0
28k
ゲームの物理 剛体編
fadis
0
310
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
What's in a price? How to price your products and services
michaelherold
246
12k
Navigating Team Friction
lara
191
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
RailsConf 2023
tenderlove
30
1.3k
Thoughts on Productivity
jonyablonski
73
5k
Unsuck your backbone
ammeep
671
58k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How STYLIGHT went responsive
nonsquared
100
5.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Designing for humans not robots
tammielis
254
26k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Transcript
Clean Architecture by TypeScript & NestJS
クリーンアーキテクチャを学んで 実装してみた経験をお話します
Clean Architecture とは ビジネスロジックを中心におき、インタフェースや技術を外側に配置する設計アプローチ 依存の向きは常に内側を向き、ユースケースと周辺の関心事を分離する 持つ特性 • フレームワーク非依存 • テスト可能
• UI 非依存 • データベース非依存 • 外部エージェント非依存 Clean Architecture 達人に学ぶソフトウェアの構造と設計
4 つのレイヤー Enterprise Business Rules Entities と呼ばれる、ビジネスルールをカプセル化したものが存在するレイヤ− Application Business Rules
システムのユースケースがカプセル化・実装されているレイヤー Interface Adapters 円の内側に便利な形から、Web や DB などに便利な形に変換するレイヤー Frameworks & Drivers フレームワークやツールで構成されるレイヤー (必ずしも 4 つである必要はない ただし依存関係の向きだけは守る必要がある)
Web ベースのシステムに落とし込むと 依存の向きを見てみると、 全てが依存性のルールに従って、 内側に向いている Clean Architecture 達人に学ぶソフトウェアの構造と設計
実装 お題 : Todo アプリ 使用技術 : TypeScript, NestJS, Prisma
リポジトリ : https://github.com/ryounasso/todo-app-by-clean-architecture
Entity constructor / getter は省略
Usecase ( Service )
Interface ( Controller )
Interface ( Repository )
じゃあこの Todo アプリでできることは?
この Todo アプリでできること
実装振り返り
実装振り返り Presenter を実装していない
実装振り返り getTodoList の返り値 当初は、Todo Entity の内容全てを返す設計 ↓ ユースケースとして、 Todo の一覧をユーザーが見るときに、
全ての情報が欲しいケースがありそうか? → なさそう
実装振り返り getTodoList の返り値 ユーザーが欲しいフィールドを返す設計に変更
まとめ • 各レイヤーに意図があり、それらの間に境界を設けて、 分けて管理することで可動性の向上を実感 • ユースケースをしっかり考えることが重要 • DB や Framework
の置き換えのコストを減らせる • テストがしやすい
参考資料 • Clean Architecture 達人に学ぶソフトウェアの構造と設計 • The Clean Architecture https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architectur
e.html