Use Cases

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公式ドキュメントを参照してください。

#Claude Code #pnpm #ワークスペース #モノレポ #パッケージ管理