Frontend Academy · レッスン

TurborepoによるMonorepo構成

複数のアプリと共有パッケージを単一のリポジトリで管理し、Turboパイプラインを定義して、変更された部分だけを再ビルドするようビルドをキャッシュします。

「TurborepoによるMonorepo構成」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Monorepoとは

複数のプロジェクト（アプリ、ライブラリ）を1つにまとめ、それらでコードを共有する単一のGitリポジトリです。1つのリポジトリにWebアプリ、モバイルアプリ、共有UIライブラリ、共有ユーティリティをまとめる例があります。コード共有が容易になり、複数領域にまたがる変更を一括で適用でき、CIパイプラインも1つにできます。

Turborepoを使う理由

Turborepoは、JavaScriptモノレポ向けの高性能なビルドシステムです。タスクの出力をキャッシュし、パッケージ間で並列実行し、変更されたものだけを再ビルドします。Vercelによって開発されています。

Turborepoのセットアップ

公式スターターを使用します。

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

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

Workspacesを設定したpackage.json

ルートのpackage.jsonでworkspacesを宣言すると、npm/yarn/pnpmがそれらをシンボリックリンクし、アプリからパッケージ名でインポートできるようになります。

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — パイプライン

タスク（build、lint、test、dev）と、パッケージ間の依存関係を定義します。

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

dependsOnの説明

^buildは、このパッケージをビルドする前に、ワークスペースの依存パッケージをすべてビルドするという意味です。つまり、app/webがpackages/uiに依存している場合は、先にuiがビルドされます。

タスクの実行

モノレポ全体でタスクを実行します。Turboはトポロジカル順に、並列性を活用して実行します。

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

出力のキャッシュ

Turboは入力（ソースファイル、依存関係、環境変数）をハッシュ化し、出力をキャッシュします。変更なしで再実行すると、実際に処理を再実行せず、キャッシュされた出力を再生するため瞬時に完了します。

リモートキャッシュ

キャッシュをリモート（Vercel Remote Cache、セルフホスト環境など）にプッシュすると、CIマシンとチームメンバーで共有できます。最初にビルドした開発者だけがコストを負担し、ほかの全員はキャッシュヒットを得られます。

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

--filterによる絞り込み

一致するパッケージだけを対象にタスクを実行します。

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

内部パッケージ

packages/内のパッケージは、名前で互いにインポートします。依存関係には"@repo/ui": "*"として参照します（pnpmではworkspace:*を使用します）。

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

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

CIのヒント

CIでturbo run build --filter=...[origin/main]を使用すると、mainブランチ以降に変更されたものだけをビルドできます。リモートキャッシュと組み合わせれば、変更のないパッケージのビルド時間を数分から数秒に短縮できます。

理解度チェック

TurboのタスクのdependsOn配列にある^buildエントリは何を意味しますか。

まとめ：Turborepo

JavaScriptモノレポシステムで、apps/ + packages/構成とworkspacesを使用します。turbo.jsonでタスクとdependsOnの関係を定義します。^buildは依存パッケージを先にビルドする指定です。ハッシュベースのローカルキャッシュにより、繰り返しの作業が瞬時に完了します。リモートキャッシュでチームとCIの間でキャッシュヒットを共有できます。--filterで対象を絞り込めます。変更されたものだけを対象にして、高速なPR用CIを実行します。

よくある質問

「TurborepoによるMonorepo構成」レッスンは無料ですか？

はい。「TurborepoによるMonorepo構成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「TurborepoによるMonorepo構成」で何を学びますか？

複数のアプリと共有パッケージを単一のリポジトリで管理し、Turboパイプラインを定義して、変更された部分だけを再ビルドするようビルドをキャッシュします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「TurborepoによるMonorepo構成」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る