【ロールアップ】
Rollup（バンドラ） とは？
最終更新:
💡 使わないコードはバッサリ切り捨て！軽量バンドルの職人
ES Modules（import/export）を前提にしたJavaScriptのモジュールバンドラ。使われていないコードを除くTree Shakingを広めたツールとして知られ、ライブラリの配布用ビルドによく使われる。
📌 このページのポイント
- 複数のJavaScriptモジュールを1つ（または少数）のファイルにまとめる「バンドラ」の一種
- ES Modulesのimport/exportを静的に解析し、実際には使われていないコードを出力から除く（Tree Shaking）
- ES Modulesのほか、CommonJS・UMD・IIFEなどの形式で出力できる。CommonJSのモジュールを読み込むにはプラグインを使う
- Vite 7までは本番ビルドに使われていたが、2026年3月のVite 8からはRolldownに置き換わった。RolldownはRollupと同じプラグインAPIに対応している
ひよこ Rollupってwebpackと何が違うの？
ペンギン先生 RollupはES Modulesのimport/exportを前提に作られたバンドラで、設定が比較的シンプルなんだ。出力も読みやすい形になりやすいから、ライブラリを配るときに好まれてきたよ。webpackもES Modulesを扱えるし不要コードの除去もできるから、「どっちが上」ではなく得意な場面の違いと考えてね
ひよこ Tree Shakingって何？木を揺するの？
ペンギン先生 ひよこ どういうときにRollupを使うの？
ペンギン先生 ひよこ ViteがRollupを使ってるって聞いたけど本当？
ペンギン先生 ひよこ じゃあRollupのプラグインはもう役に立たないの？
もっと詳しく知りたい人へ
ViteがRolldownに変わったなら、Rollupのプラグインはもう使えないの？
多くはそのまま使えます。Vite 8の発表では、RolldownはRollupおよびViteと同じプラグインAPIに対応しており、既存のViteプラグインの多くは変更なしで動くと説明されています。ただし一部の挙動や設定は異なる場合があるため、Vite 7以前から移行するときは公式ドキュメントで変更点を確認し、本番ビルドの出力を実際に確かめます。Rollup自体は単体のバンドラとして引き続き使えます。
まとめ：ざっくりこれだけ覚えればOK！
「Rollup」って出てきたら「ES Modules向けのバンドラで、Tree Shakingを広めた、ライブラリ作りでよく使われるやつ」と思えればだいたいOK！
📖 おまけ：英語の意味
「Rollup」 ＝ 巻き上げる・ひとまとめにする
💬 英語のroll upには「巻き上げる」「ひとまとめにする」という意味があるよ。たくさんのモジュールを1つにまとめるバンドラの仕事にぴったりの言葉だね