Claude Codeでpnpmワークスペースを活用したモノレポ構築
Claude Codeを使ってpnpmワークスペースベースのモノレポを構築する方法を解説。依存管理、スクリプト設計、changesets による公開フローまで紹介します。
pnpmワークスペースでモノレポを構築する
pnpmは厳密な依存解決とディスク効率の良さで人気のパッケージマネージャーです。ワークスペース機能を使えば、追加ツールなしでモノレポを管理できます。Claude Codeを活用して、pnpmワークスペースの構成を効率的に進めましょう。
ワークスペースの初期設定
> pnpm workspacesでモノレポを作成して。
> 構成:
> - apps/web: React SPA
> - apps/admin: 管理画面
> - packages/ui: 共通コンポーネント
> - packages/config: 共通設定
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'
// package.json (ルート)
{
"name": "my-monorepo",
"private": true,
"scripts": {
"dev": "pnpm -r --parallel dev",
"build": "pnpm -r build",
"lint": "pnpm -r lint",
"test": "pnpm -r test"
},
"devDependencies": {
"typescript": "^5.5.0"
}
}
パッケージ間の依存管理
> webアプリからuiパッケージを参照する設定をして。
> TypeScriptのパス解決もセットアップして。
// apps/web/package.json
{
"name": "@myapp/web",
"dependencies": {
"@myapp/ui": "workspace:*",
"@myapp/config": "workspace:*"
}
}
// packages/ui/package.json
{
"name": "@myapp/ui",
"main": "./src/index.ts",
"types": "./src/index.ts",
"exports": {
".": {
"import": "./src/index.ts",
"types": "./src/index.ts"
}
}
}
workspace:* プロトコルにより、常にローカルのパッケージが参照されます。公開時には実際のバージョン番号に自動置換されます。
フィルタリングとスクリプト実行
pnpmのフィルタ機能で特定パッケージのみを操作できます。
# 特定パッケージのdev実行
pnpm --filter @myapp/web dev
# 依存パッケージも含めてビルド
pnpm --filter @myapp/web... build
# 変更があったパッケージのみテスト
pnpm --filter "...[origin/main]" test
# 複数パッケージの指定
pnpm --filter "@myapp/web" --filter "@myapp/admin" build
Changesetsでバージョン管理
> changesetsを導入して、パッケージの公開フローを整備して。
pnpm add -Dw @changesets/cli
pnpm changeset init
// .changeset/config.json
{
"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [["@myapp/ui", "@myapp/config"]],
"access": "restricted",
"baseBranch": "main",
"updateInternalDependencies": "patch"
}
# 変更セットの作成
pnpm changeset
# バージョンの更新
pnpm changeset version
# 公開
pnpm -r publish --access public
.npmrcの最適化
> pnpmの設定を最適化して。strict-peer-depsと
> hoistの設定を適切にして。
# .npmrc
strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=false
link-workspace-packages=true
prefer-workspace-packages=true
shamefully-hoist=false はpnpmの厳密な依存解決を維持する重要な設定です。暗黙的な依存をコードから排除できます。
まとめ
pnpmワークスペースは、シンプルながら強力なモノレポ管理を実現します。Claude Codeを使えば、依存関係の設定やCI構成もスムーズに進められます。モノレポ管理の実践ガイドや依存管理のベストプラクティスも合わせて参考にしてください。
pnpmの詳細はpnpm公式ドキュメントを参照してください。
無料PDF: Claude Code はじめてのチートシート
まずは無料PDFで基本コマンドと最初の使い方をまとめて確認してください。登録後はそのままテンプレート集や導入相談にも進めます。
スパムは送りません。登録情報は厳重に管理します。
Claude Codeを仕事で使える形にしませんか?
無料PDFで基礎を固めたあと、すぐ使えるテンプレート集で試し、必要なら業務自動化や導入相談まで進められます。
この記事を書いた人
Masa
現役DX室長|Claude Code でゼロから多言語AI技術メディア運営中。実務直結の自動化、AI開発相談・研修受付中。
関連書籍・参考図書
この記事のテーマに関連する書籍を楽天ブックスで探せます。
※ 当サイトは楽天市場のアフィリエイトプログラムに参加しています。上記リンクから商品をご購入いただくと、運営者に紹介料が支払われる場合があります。
関連記事
Claude Codeで多言語記事を毎日公開するための7つのデプロイ前チェック
日本語だけ公開して終わらせないために、Claude Codeで多言語記事を毎日出す前に確認したい7つのチェックを実例つきで整理しました。
Codex AutomationsでAIに毎日のコンテンツ運用を任せる方法
Codex Automationsを使って、アクセス確認、記事改善、CTA改善、デプロイ、公開確認までを毎日の運用フローとして回す方法を解説します。
Claude Code × GCP Cloud Functions 完全ガイド|サーバーレス関数を爆速開発
GCP Cloud FunctionsをClaude Codeで効率化。HTTP/Pub/Sub/Firestoreトリガーの実装からローカルテスト・デプロイ自動化まで、Masaの実務経験をもとに実例コードで解説。