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
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
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
nrslib
4
770
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
shin1x1
0
370
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
550
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
3
520
PDI: Como Alavancar Sua Carreira e Seu Negócio
marcelgsantos
0
120
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.8k
おれのAgentic Coding 2026/03
tsukasagr
1
140
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
yasunori0418
1
120
Coding as Prompting Since 2025
ragingwind
0
820
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
higaki_program
0
190
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
mackey0225
3
130
VueエンジニアがReactを触って感じた_設計の違い
koukimiura
0
170
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Everyday Curiosity
cassininazir
0
190
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
720
For a Future-Friendly Web
brad_frost
183
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
420
A Soul's Torment
seathinner
6
2.6k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
310
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Fireside Chat
paigeccino
42
3.9k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
The Curse of the Amulet
leimatthew05
1
11k
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