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
ryounasso
July 10, 2024
Programming
0
860
Clean Architecture by TypeScript & NestJS
ryounasso
July 10, 2024
Tweet
Share
More Decks by ryounasso
See All by ryounasso
React inside basics: learn from “build own react"
ryounasso
0
100
抽象データ型について学んだ
ryounasso
0
230
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
2.8k
Fast API を用いた Web API の開発
ryounasso
0
520
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
0
400
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1.2k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
760
kintone新機能開発のお仕事
ryounasso
2
120
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
300
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
350
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
BBQ
matthewcrist
89
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
30
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Cult of Friendly URLs
andyhume
79
6.5k
Thoughts on Productivity
jonyablonski
69
4.7k
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