Frontend Academy · レッスン

Turbo：キャッシュとタスクパイプライン

turbo.jsonパイプラインを定義し、dependsOnでタスクの依存関係を設定して、マシン間でキャッシュ済みの出力を共有するリモートキャッシュを有効にします。

レッスン 4/417 ステップ

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

Turborepo のまとめ

Turborepo（現在は単に Turbo）は、JavaScript モノレポ向けの高性能なビルドオーケストレーターです。パッケージ間でタスクを並列実行し、ハッシュに基づいて出力をキャッシュし、入力に変更がなければ処理をスキップします。

キャッシュが重要な理由

20 個のパッケージを含むモノレポで、プッシュのたびにすべてで 'test' を実行するのは大きなコストがかかります。1 つのパッケージだけが変更された場合、Turbo はそのパッケージのテストを再実行し、残り 19 個についてはキャッシュ済みの出力を再生するため、数分かかる処理を数秒に短縮できます。

ハッシュの仕組み

Turbo は、ソースファイル（入力 glob）、依存関係（package.json と lockfile）、宣言した環境変数、タスク自体の設定をハッシュ化します。同じハッシュなら、処理内容も同一なのでキャッシュヒットになります。

turbo.json — パイプライン

turbo.json でタスクとその関係を宣言します。

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "package.json"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "test/**", "package.json"]
    },
    "lint": { "inputs": ["**/*.{ts,tsx,js,jsx}", ".eslintrc*"] },
    "dev": { "cache": false, "persistent": true }
  }
}

inputs と outputs

inputs：ハッシュに影響するファイルです。outputs：Turbo がキャッシュして復元するファイルです。これらを正しく設定すると、キャッシュヒット率は 90% 以上に向上します。

dependsOn

['^build']：依存パッケージを先にビルドします。['lint']：同じパッケージ内で、このタスクの前に lint を実行します。['^build', 'lint']：両方を組み合わせます。

cache: false と persistent: true

dev のようなタスクは、対話的で長時間実行されるためキャッシュせず、永続化します（Turbo が実行状態を維持します）。開発サーバーにはこの 2 つを設定してください。

タスクの実行

Turbo CLI を使用します。

npx turbo run build
npx turbo run test lint
npx turbo run build --filter=web
npx turbo run build --filter=web... --concurrency=10

キャッシュの場所

デフォルトでは、ローカルキャッシュは node_modules/.cache/turbo に保存されます。実行ごとにログとキャプチャーされた出力が生成されます。キャッシュヒット時には、'cache hit, replaying logs' と表示されます。

リモートキャッシュ

キャッシュをリモートストアにプッシュすると、CI とチームメンバーでキャッシュヒットを共有できます。turbo login から無料で登録して Vercel Remote Cache を利用するか、自分でホストしてください。

npx turbo login
npx turbo link    # link to a Vercel remote cache

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

セルフホスト型リモートキャッシュ

OSS の代替手段には、turborepo-remote-cache（Node）や turbo-cache-server（Go）があります。自分のインフラにデプロイし、TURBO_API 環境変数を設定します。

環境変数の入力

出力に影響する環境変数を宣言します。Turbo はそれらを入力として扱うため、値を変更するとキャッシュが無効になります。

// turbo.json
{
  "tasks": {
    "build": {
      "env": ["NODE_ENV", "VITE_API_URL"],
      "outputs": ["dist/**"]
    }
  },
  "globalEnv": ["GITHUB_SHA"]
}

フィルタリング

特定のパッケージ、または変更の影響を受けるパッケージに対してタスクを実行します。

# Specific package and its dependencies:
turbo run build --filter=web...

# Packages that depend on shared/ui:
turbo run test --filter='...@repo/ui'

# Changed since main:
turbo run lint --filter='[origin/main]'

# Combine:
turbo run build --filter=web...[origin/main]

DRY_RUN とプロファイリング

--dry=json は実行せずにタスクグラフを出力します。--profile は Chrome DevTools 形式のトレースを生成します。

turbo run build --dry=json | jq
turbo run build --profile=trace.json
# open chrome://tracing and load trace.json

よくある落とし穴

1) 出力の宣言を忘れる（Turbo はそれらをキャッシュしません）。2) ビルドに影響する環境変数を忘れる。3) 開発サーバーをキャッシュする（cache: false を設定してください）。4) CI で --frozen-lockfile を使わない（lockfile のずれによってハッシュが変わる可能性があります）。

簡単な確認

Turbo のタスク設定で、出力をキャッシュから再生できるかどうかを決める 2 つのフィールドは何でしょうか。

対話的なレッスンで答える

まとめ：Turbo

モノレポのタスクに対して、ハッシュベースのローカルおよびリモートキャッシュを提供します。turbo.json では dependsOn、inputs、outputs、env を指定してタスクを宣言します。開発サーバーには cache: false と persistent: true を設定します。--filter=web... や changed-since=[origin/main] でタスクを絞り込めます。リモートキャッシュ（Vercel またはセルフホスト）により、CI とチーム間でキャッシュヒットを共有できます。--profile でプロファイリングします。最大のキャッシュヒット率を得るには、inputs と outputs を正しく設定してください。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「Turbo：キャッシュとタスクパイプライン」レッスンは無料ですか？

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

「Turbo：キャッシュとタスクパイプライン」で何を学びますか？

turbo.jsonパイプラインを定義し、dependsOnでタスクの依存関係を設定して、マシン間でキャッシュ済みの出力を共有するリモートキャッシュを有効にします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Turbo：キャッシュとタスクパイプライン」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る