Turborepo入門 - モノレポ管理

このチュートリアルで学ぶこと

✓ Turborepoのセットアップ
✓ ワークスペース構成
✓ パイプライン設定
✓ キャッシュ活用
✓ リモートキャッシュ

Step 1: プロジェクト作成

npx create-turbo@latest my-monorepo
cd my-monorepo

Step 2: ディレクトリ構成

my-monorepo/
├── apps/
│   ├── web/          # Next.jsアプリ
│   └── docs/         # ドキュメントサイト
├── packages/
│   ├── ui/           # 共有UIコンポーネント
│   ├── config/       # 共有設定
│   └── tsconfig/     # TypeScript設定
├── turbo.json
└── package.json

Step 3: ルートpackage.json

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },
  "devDependencies": {
    "turbo": "^2.0.0"
  }
}

Step 4: turbo.json設定

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

Step 5: 共有パッケージ

// packages/ui/package.json
{
  "name": "@repo/ui",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "exports": {
    ".": "./index.tsx",
    "./button": "./button.tsx"
  }
}

// packages/ui/button.tsx
export function Button({ children, onClick }: {
  children: React.ReactNode;
  onClick?: () => void;
}) {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
}

Step 6: アプリでの使用

// apps/web/package.json
{
  "name": "web",
  "dependencies": {
    "@repo/ui": "workspace:*"
  }
}

// apps/web/app/page.tsx
import { Button } from '@repo/ui/button';

export default function Home() {
  return <Button>Click me</Button>;
}

Step 7: コマンド実行

# 全パッケージをビルド
turbo build

# 特定パッケージのみ
turbo build --filter=web

# 依存関係も含めて
turbo build --filter=web...

# 開発サーバー
turbo dev

# キャッシュクリア
turbo clean

Step 8: リモートキャッシュ

# Vercelリモートキャッシュ
npx turbo login
npx turbo link

# 環境変数で設定
TURBO_TEAM=your-team
TURBO_TOKEN=your-token

ベストプラクティス

✓ 共通の依存関係はルートに
✓ パッケージごとにtsconfig
✓ 内部パッケージは workspace:*
✓ キャッシュを最大限活用

まとめ

Turborepoは高速なモノレポビルドツールです。キャッシュと並列実行でビルド時間を大幅に短縮できます。