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
1
41
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
May 10, 2024
Tweet
Share
More Decks by gizm000
See All by gizm000
レガシー業界を乗り越える
gizm000
0
4
Other Decks in Programming
See All in Programming
mb_trim関数を作りました
youkidearitai
PRO
1
250
Porting mruby/c for the SNES (Super Famicom) - RubyKaigi 2024
gedorinku
0
510
GoでParserを書く
karupanerura
3
450
2024 コーディング研修
ckazu
2
680
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
WebGLで始める コンピュータグラフィックス入門
heller77
0
390
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
210
RuboCop: LSP and Prism
koic
1
110
Embedding it into Ruby code
soutaro
2
450
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
Featured
See All Featured
Building an army of robots
kneath
300
42k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Web Components: a chance to create the future
zenorocha
306
41k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Debugging Ruby Performance
tmm1
70
11k
Product Roadmaps are Hard
iamctodd
45
9.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Gamification - CAS2011
davidbonilla
77
4.6k
Fireside Chat
paigeccino
22
2.7k
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, … ご応募お待ちしております 😆