フロントエンド - ビルド・ツール

Turbopack たーぼぱっく

バンドラーWebpackNext.jsRustインクリメンタルビルドVercel

Turbopackについて教えて

簡単に言うとこんな感じ！

WebサイトのソースコードをブラウザOKな形に変換する「ビルド作業」をめちゃくちゃ速くしてくれるツールだよ！長年の定番ツール「Webpack」の後継として作られていて、変更箇所だけを超高速で再ビルドしてくれるから、開発中の「保存→反映」待ち時間がほぼゼロになるんだ！

Turbopackとは

Turbopackは、JavaScriptやTypeScriptのソースコードをまとめてブラウザが読み込める形式に変換する「バンドラー（bundler）」と呼ばれるツールのひとつです。Next.jsの開発元であるVercelが開発し、2022年に発表されました。処理速度に優れたシステム言語Rustで実装されており、従来の定番バンドラーであるWebpackと比較して桁違いの速度を誇ると謳われています。

バンドラーとは、現代のWebアプリ開発に欠かせない縁の下の力持ちです。開発者が書いた何百・何千というファイルに分割されたコードを、ブラウザが効率よく読み込めるよう「まとめ・変換・最適化」してくれます。Turbopackの最大の特徴はインクリメンタルコンピューテーション（差分計算）という仕組みで、一度計算した結果をキャッシュしておき、変更があった箇所だけを再計算することで劇的な高速化を実現しています。

現時点（2025年）ではNext.jsの開発サーバーとして統合されており、next dev --turbo というオプションで利用できます。本番ビルドへの対応も進んでおり、段階的に機能が拡充されています。将来的にはNext.js以外のフレームワークでも使えるスタンドアロンツールとなることが目指されています。

Turbopackの仕組みと特徴

Turbopackが高速な理由は、いくつかの技術的な工夫の組み合わせにあります。

特徴	内容
Rust実装	JavaScriptより処理が速いシステム言語Rustで書かれており、CPUを効率的に使える
インクリメンタルビルド	変更があったファイルとその依存部分だけを再計算。毎回全部やり直さない
並列処理	複数のCPUコアを活用し、処理を同時並行で実行
永続キャッシュ	計算結果をディスクに保存し、サーバー再起動後も使い回せる（開発中）
Turboエンジン	同じくVercelが作ったビルドシステム「Turborepo」と共通の計算エンジンを使用

速度の目安（Vercel社発表の比較値）

ツール	コールドスタート	ファイル変更後の更新
Webpack	基準（遅い）	基準（遅い）
Vite	約10倍速い	非常に速い
Turbopack	約700倍速い（大規模アプリ）	極めて速い

⚠️ 上記数値は大規模アプリでの理論値。小〜中規模では差は縮まります。実際の体感はプロジェクト規模や環境によって異なります。

覚え方

「Turbo（ターボ）」はエンジンを過給して出力を上げる「ターボチャージャー」から来ています。Webpackという「普通のエンジン」にターボを付けて爆速にしたイメージ、と覚えると分かりやすいですよ！

歴史と背景

2012年頃 — Webpackが登場。JavaScriptのモジュール管理の複雑さを解決し、フロントエンド開発の標準ツールに
2020年 — Vite（ヴィート）が登場。開発時はバンドルせずにESモジュールを直接配信する新アプローチで高速化を実現し、急速に普及
2021年 — VercelがRustエンジニアを採用し、次世代バンドラーの開発を開始
2022年10月 — Next.js 13の発表とともにTurbopackをアルファ版として公開。「Webpackの700倍速い」というキャッチコピーで話題に
2023年 — Next.js 13.x系でベータ版として開発サーバー（next dev）への統合が進む
2024年 — Next.js 15でTurbopackによる開発サーバーが安定版（Stable）として正式リリース
2025年現在 — 本番ビルド（next build）対応が鋭意開発中。Next.js以外への展開も計画中

主要バンドラーの比較

Turbopackをほかのバンドラーと比べてみましょう。

Next.js でのTurbopack利用方法

# 開発サーバーをTurbopackで起動（Next.js 13以降）
next dev --turbo

# または package.json の scripts に記載
# "dev": "next dev --turbo"

# Next.js 15以降はデフォルトでTurbopackが推奨される
npx create-next-app@latest my-app
# → 対話形式でTurbopackを使うか聞かれる

Webpack との互換性

TurbopackはWebpackとの完全互換を目指していません。ただし、よく使われるWebpackプラグインやローダー（コード変換ルール）の多くは移行用の対応が進んでいます。既存のWebpackプロジェクトからの移行には確認作業が必要です。