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
個別リポジトリから Full Stack TypeScript の モノレポ(Nx)に移行した話
Search
mokoshi
June 04, 2024
Programming
0
480
個別リポジトリから Full Stack TypeScript の モノレポ(Nx)に移行した話
TSKaigi 2024 After Talk
mokoshi
June 04, 2024
Tweet
Share
More Decks by mokoshi
See All by mokoshi
ReactNativeでスケジュール帳を作っている話
mokoshi
0
330
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Is Xcode slowly dying out in 2025?
uetyo
1
250
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
3.2k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
110
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
680
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Site-Speed That Sticks
csswizardry
10
680
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
BBQ
matthewcrist
89
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Typedesign – Prime Four
hannesfritz
42
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Transcript
個別リポジトリから Full Stack TypeScript の モノレポ(Nx)に移行した話 TSKaigi 2024 After Talk
溝口 晃 @mok_oshi
自己紹介 名前 溝口 晃 (もこし) X: @mok_oshi 所属 techners株式会社 やってること
美容サロン向けの顧客・予約管理システム KaruteKun 技術 TypeScript / ReactNative / Next.js / Node / express ... など
None
• フル TypeScript で構築(Node.js / React / React Native) •
バックエンド、アプリ、 Web、など7個ほどのアプリケーションが存在 • これらを個別リポジトリからモノレポに統合した話をします!
API サーバー (Node.js) モノレポ移行前 • 複数のアプリケーションを個別のリポジトリで管理 • テスト・デプロイフローも別々に作成 ◦ CI/CD
は GitHub Actions で構築 Webアプリ (React) ネイティブアプリ (React Native) 社内ツール (React) … CI/CD CI/CD CI/CD CI/CD …
API サーバー (Node.js) モノレポ移行前の課題感 • 開発効率の悪さ ◦ あるフィーチャーを実装するときに ... ▪
リポジトリAで PR を作成してマージ → デプロイ ▪ リポジトリBで RP を作成してマージ → デプロイ ▪ … • 重複コードがコピペで量産される ◦ 特に Web アプリとネイティブアプリは機能がかぶることも 多く、重複コードが乱立 ◦ 言語は TypeScript で統一されていたので、コードの共有 はずっとやりたかった Webアプリ (React) ネイティブアプリ (React Native) 社内ツール (React) … CI/CD CI/CD CI/CD CI/CD …
モノレポ移行を決断(2021年) • 当時はまだチームに知見がなかったが、えいやで決断 ◦ 手探りで技術調査... ◦ 新興で勢いがありそうに見えた Nx を選定 ▪
(turborepo は当時まだなかったはず) • Nx では大まかに2種類の構成がある (package-based と integrated) ◦ integrated の形式で移行
Nx の package-based と integrated の補足 package-based • パッケージマネージャで提供されているワークスペースの拡張 •
package.json を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy)
Nx の package-based と integrated package-based • パッケージマネージャで提供されているワークスペースの拡張 • package.json
を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy)
Nx の package-based と integrated package-based • パッケージマネージャで提供されているワークスペースの拡張 • package.json
を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy)
Nx の package-based と integrated package-based • パッケージマネージャで提供されているワークスペースの拡張 • package.json
を介して他モジュールを参照 integrated • TypeScript の path alias で他モジュールを参照 • 一つの package.json で依存関係を管理(Single Version Policy) Nx-way に乗るためにこちらを選択
移行作業(リポジトリの新設) • 新しいリポジトリを作成し、既存リポジトリのコード をディレクトリに分けて移植 ◦ (コミットログは維持する形で移行) apps/ server/ app/ web/
ope/ … API サーバー (Node.js) Webアプリ (React) ネイティブアプリ (React Native) 社内ツール (React) …
移行作業(依存関係) • プロジェクト横断で一つの package.jsonに なる • 各リポジトリの package.json を 一つに
マージ • lock ファイルは作り直し...! → ライブラリのバージョンを揃えつつ、古いもの は一気にアップデート apps/ server/ app/ web/ ope/ … API サーバー Webアプリ ネイティブアプリ 社内ツール … package.json - yarn.lock package.json - yarn.lock package.json - yarn.lock package.json - yarn.lock package.json yarn.lock [NEW]
移行作業 • テスト・ビルドなどのコマンド整備 • デプロイワークフローの整備 apps/ server/ app/ web/ ope/
… package.json yarn.lock Lint $ nx lint server Format $ nx fmt server Test $ nx test server Build $ nx build server Build $ nx build web …
移行してみて • 開発者体験が良くなった! ◦ 開発時のスイッチングコストの減少(異なるリポジトリ間を移動して開発したり...レビューのため に異なるリポジトリを交互に確認したり...) ◦ 環境構築が容易に • 少しずつ共通コードを切り出してモジュール化している
◦ 責務を意識。コードの依存関係が少しずつクリーンになっていく ▪ グラフ化もできる ◦ Nx の差分検知(affected)やキャッシュ機能によってテストの効率化 • tRPCが導入できた!(意図せぬ恩恵でした) • Nx の変更に追従するのが大変...