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
Clean Architecture by TypeScript & NestJS
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
ryounasso
July 10, 2024
Programming
1.1k
0
Share
Clean Architecture by TypeScript & NestJS
ryounasso
July 10, 2024
More Decks by ryounasso
See All by ryounasso
明日から始めるリファクタリング
ryounasso
0
200
駆け足で Google から学ぶテスト設計の指針
ryounasso
0
180
React inside basics: learn from “build own react"
ryounasso
0
190
抽象データ型について学んだ
ryounasso
0
390
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
3.8k
Fast API を用いた Web API の開発
ryounasso
1
610
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
0
470
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1.4k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
910
Other Decks in Programming
See All in Programming
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
super_marek
0
150
瑠璃の宝石に学ぶ技術の声の聴き方 / 【劇場版】アニメから得た学びを発表会2026 #エンジニアニメ
mazrean
0
170
生成 AI 時代のスナップショットテストってやつを見せてあげますよ(α版)
ojun9
0
340
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
shogogg
2
810
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
250
Going Multiplatform with Your Android App (Android Makers 2026)
zsmb
2
340
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.6k
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて!
k0kubun
4
2.8k
脱 雰囲気実装!AgentCoreを良い感じにWEBアプリケーションに組み込むために
takuyay0ne
3
440
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
targe
0
160
Feature Toggle は捨てやすく使おう
gennei
0
430
Swift Concurrency Type System
inamiy
0
120
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
50
14k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
140
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
250
How to train your dragon (web standard)
notwaldorf
97
6.6k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
99
The browser strikes back
jonoalderson
0
900
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
510
Being A Developer After 40
akosma
91
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Speed Design
sergeychernyshev
33
1.6k
Chasing Engaging Ingredients in Design
codingconduct
0
160
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