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
1k
Clean Architecture by TypeScript & NestJS
ryounasso
July 10, 2024
Tweet
Share
More Decks by ryounasso
See All by ryounasso
明日から始めるリファクタリング
ryounasso
0
170
駆け足で Google から学ぶテスト設計の指針
ryounasso
0
150
React inside basics: learn from “build own react"
ryounasso
0
170
抽象データ型について学んだ
ryounasso
0
340
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
3.5k
Fast API を用いた Web API の開発
ryounasso
1
580
テストゼロの個人開発プロジェクトにテストを導入した話
ryounasso
0
440
簡易 DI コンテナを作って DI コンテナを知る
ryounasso
1
1.3k
TypeScript_コンパイラの内側に片足を入れる
ryounasso
3
840
Other Decks in Programming
See All in Programming
AI時代を生き抜く 新卒エンジニアの生きる道
coconala_engineer
1
510
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
3.3k
はじめてのカスタムエージェント【GitHub Copilot Agent Mode編】
satoshi256kbyte
0
140
PC-6001でPSG曲を鳴らすまでを全部NetBSD上の Makefile に押し込んでみた / osc2025hiroshima
tsutsui
0
200
ThorVG Viewer In VS Code
nors
0
530
Deno Tunnel を使ってみた話
kamekyame
0
310
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
n0bisuke2
3
1.4k
CSC307 Lecture 01
javiergs
PRO
0
650
Claude Codeの「Compacting Conversation」を体感50%減! CLAUDE.md + 8 Skills で挑むコンテキスト管理術
kmurahama
1
700
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
7
4.2k
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
430
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
180
Featured
See All Featured
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
220
[SF Ruby Conf 2025] Rails X
palkan
0
680
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Why Our Code Smells
bkeepers
PRO
340
58k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
0
51
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
Designing for Timeless Needs
cassininazir
0
110
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
What's in a price? How to price your products and services
michaelherold
246
13k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
59
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
230
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
72
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