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
130
XStateでReactに秩序を与えたい
gizm000
0
1.1k
営業製作所_採用ピッチ資料_202407
gizm000
3
3.3k
React_TypeScript_LT.pdf
gizm000
0
170
もう、例外投げたくないねん neverthrow
gizm000
1
420
レガシー業界を乗り越える
gizm000
1
45
Other Decks in Programming
See All in Programming
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
1から理解するWeb Push
dora1998
7
1.9k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
AI時代のUIはどこへ行く?
yusukebe
18
9k
はじめてのMaterial3 Expressive
ym223
2
840
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
600
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
890
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
160
アセットのコンパイルについて
ojun9
0
130
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Navigating Team Friction
lara
189
15k
What's in a price? How to price your products and services
michaelherold
246
12k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Context Engineering - Making Every Token Count
addyosmani
3
50
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
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, … ご応募お待ちしております 😆