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
サーバーサイドもTSにしたらモノレポになった.pdf
Search
gizm000
May 10, 2024
Programming
2
170
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
May 10, 2024
Tweet
Share
More Decks by gizm000
See All by gizm000
NestJSを実運用してみて.pdf
gizm000
1
120
XStateでReactに秩序を与えたい
gizm000
0
1.1k
営業製作所_採用ピッチ資料_202407
gizm000
3
3k
React_TypeScript_LT.pdf
gizm000
0
160
もう、例外投げたくないねん neverthrow
gizm000
1
410
レガシー業界を乗り越える
gizm000
1
44
Other Decks in Programming
See All in Programming
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
770
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
あのころの iPod を どうにか再生させたい
orumin
2
690
Infer入門
riru
4
590
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
kiroでゲームを作ってみた
iriikeita
0
140
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
8
1.4k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
940
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Optimizing for Happiness
mojombo
379
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
サーバーサイドもTSにしたら モノレポになった 営業製作所 白石 卓馬
会社紹介:営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 150名弱 (2024年4月時点)
・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある
自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴
SIer → 受託 → SaaS
営業製作所のざっくり技術スタック ・フロントエンド:Next.js ・サーバーサイド:NestJS ・IasC:Terraform (CDKじゃないヨ) 業務で使う80%以上がTypeScript
サーバーサイドで TS書いてる人?
プラクティス不足し ていませんか?
弊社で採用してい る手法を紹介させ てもらいます!
インフラ紹介(一部)
インフラ紹介(一部) ・複数アプリケーションが存在
インフラ紹介(一部) ・複数アプリケーションが存在 ・データベースはひとつ
インフラ紹介(一部) ・複数アプリケーションが存在 ・データベースはひとつ 処理を共通化したい
npm workspace ・ほぼ設定いらずでモノレポが作れる ・パッケージ間での相互参照が簡単にできる ・npm package 作るとかめんどくさいので助かる ✨ ・ビルドの依存関係ガーとか細かいことはそんなにできない ・裏を返すと引き剥がしやすい
・大きくなったらTurboとかにお引越しも検討 🚚
npm workspace product ┗ node_modules ┗ packages ┗ frontend ┗
backend ┗ schema ┗ and more
npm workspace product ┗ node_modules ┗ packages ┗ frontend ┗
backend ┗ schema ┗ and more ← node_modulesに各パッケージへの シンボリックリンクが生成される
npm workspace product ┗ node_modules ┗ packages ┗ frontend ┗
backend ┗ schema ┗ and more ← node_modulesに各パッケージへの シンボリックリンクが生成される `import { hoge } from @product/schema` これで他パッケージから参照可能 ✨
npm workspace product ┗ node_modules ┗ packages ┗ validators ┗
utilities ┗ tsconfig ┗ eslint ← zodで記述した共通バリデーション frontend/backendで共通利用
npm workspace product ┗ node_modules ┗ packages ┗ validators ┗
utilities ┗ tsconfig ┗ eslint ← 各種パッケージで共通のtsconfigを用意 front, back間で共通はさせない方がよいかも...
NestJS モノレポモード ・NestJSではモノレポモードというものがある ・複数のアプリケーションを構築できる e.g. GraphQL Server, REST API Server,
Queue worker, etc…. ・共通処理(ユーティリティ、ドメインロジック)を再利用しやすい
NestJS モノレポモード product ┗ node_modules ┗ packages ┗ frontend ┗
backend ┗ schema ┗ and more
NestJS モノレポモード product ┗ node_modules ┗ packages ┗ frontend ┗
backend ┗ schema ┗ and more ← この配下でネストさせられる 👀
NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗
other ┗ shared ┗ core ┗ infrastructure ┗ utils
NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗
other ┗ shared ┗ core ┗ infrastructure ┗ utils ← ひとつのNestJSプロジェクトに格納可能
NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗
other ┗ shared ┗ core ┗ infrastructure ┗ utils ← appsで共通利用可能なドメインロジック
NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗
other ┗ shared ┗ core ┗ infrastructure ┗ utils ← AWSクライアントなどのインフラ層
NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗
other ┗ shared ┗ core ┗ infrastructure ┗ utils ← ドメインの関係ないユーティリティ
NestJS モノレポモード backend ┗ apps ┗ main ┗ worker ┗
other ┗ shared ┗ core ┗ infrastructure ┗ utils ← ドメインの関係ないユーティリティ npm workspaceでも 同じことできそう 🤔
NestJS モノレポモード ・npm workspace との違いは? ・NestJS モノレポモードではnpm packageの単位として同一になる ・つまり package.jsonは共有
→ package.jsonを分離したいなら分けた方がよい ・何が嬉しい? ・npm workspaceで複数のNestJSアプリを作らなくてよい → 認知負荷の軽減
まとめ 📚 ・サーバーサイドをTSにしたときのプラクティスがもっと欲しい! Ruby, Java, PHP のように枯れていない・・・ ・営業製作所では以下を使って構成している ・npm workspace
・モジュラーモノリスのような構成が作りやすい ・NestJS モノレポモード ・NestJSに閉じるなら、npm workspaceよりカンタン
さいごに ・他企業との合同勉強会を企画したい ❗ → X, LinkedIn などで気軽にご連絡ください ・絶賛採用活動中です❗ → X,
LinkedIn, Green, LAPRAS, … ご応募お待ちしております 😆