「モノレポって何？」と疑問に思っていませんか？
現役WEBエンジニアとして、モノレポで開発しています。
この記事では、モノレポの基本と始め方を解説します。
目次
モノレポとは
メリット・デメリット
| 項目 | メリット | デメリット |
|---|---|---|
| 共有 | コード共有が容易 | リポジトリが大きくなる |
| 依存 | 依存管理が一元化 | ビルド時間増加 |
| 変更 | 横断的変更が容易 | 権限管理が複雑 |
向いているケース
- 複数パッケージを持つプロジェクト
- 共通ライブラリがある
- チーム間でコード共有
ツール比較
主要ツール
| ツール | 特徴 |
|---|---|
| pnpm workspaces | パッケージ管理 |
| Turborepo | ビルド最適化 |
| Nx | 大規模向け |
| Lerna | 歴史が長い |
pnpm workspaces
セットアップ
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'
ディレクトリ構成
monorepo/
├── apps/
│ ├── web/
│ └── api/
├── packages/
│ ├── ui/
│ └── shared/
├── pnpm-workspace.yaml
└── package.json
コマンド
# 全パッケージにインストール
pnpm install
# 特定パッケージで実行
pnpm --filter web dev
# 依存パッケージ追加
pnpm --filter web add react
Turborepo
設定
// turbo.json
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},
"dev": {
"cache": false
},
"test": {
"dependsOn": ["build"]
}
}
}
特徴
- リモートキャッシュ
- 並列実行
- 依存関係の自動解決
コマンド
# ビルド（キャッシュ活用）
turbo build
# 開発サーバー
turbo dev
# 特定パッケージのみ
turbo build --filter=web
共有パッケージ
作成例
// packages/ui/package.json
{
"name": "@myapp/ui",
"main": "./dist/index.js",
"types": "./dist/index.d.ts"
}
利用側
// apps/web/package.json
{
"dependencies": {
"@myapp/ui": "workspace:*"
}
}
ベストプラクティス
やるべきこと
- パッケージ名に統一プレフィックス
- 共通設定の共有（tsconfig等）
- CI/CDでキャッシュ活用
注意点
- 循環依存を避ける
- パッケージの責務を明確に
- バージョン管理方針を決める
まとめ
モノレポのポイント:
- pnpmでパッケージ管理
- Turborepoでビルド最適化
- 共有パッケージで再利用
- キャッシュを活用
