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

Rollup ろーるあっぷ

バンドラーTree ShakingES ModulesJavaScriptライブラリモジュール

Rollupについて教えて

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

Rollupは、バラバラに書かれたJavaScriptファイルを1つ（または少数）にまとめてくれるツールだよ。しかも「使ってないコードは丸ごと捨てる」機能が得意で、ライブラリを作るときに特に重宝されてるんだ！

Rollupとは

Rollupは、複数のJavaScriptファイルを1つにまとめる（バンドルする）ツールです。JavaScriptの標準的なモジュール仕様である ES Modules（ESM） をネイティブに扱える点が特徴で、2015年ごろから特にライブラリ開発者の間で広く使われるようになりました。

最大の強みは Tree Shaking（ツリーシェイキング） と呼ばれる機能です。これは、コードの中で「実際には使われていない関数や変数」を自動的に検出して削除してくれる仕組みで、出力されるファイルサイズを大幅に削減できます。たとえば、100個の関数が入ったライブラリから3つしか使わない場合、残りの97個分は最終的な成果物に含まれません。

WebアプリケーションをまとめてビルドするのであればWebpackやViteが、JavaScriptライブラリ・パッケージを配布用にビルドするのであればRollup、というように使い分けられることが多く、VueやReactなど有名なライブラリ自体もRollupでビルドされています。

Rollupの核心：Tree Shakingとモジュール出力

Tree Shakingのしくみ

Tree Shakingという名前は「木（コードの依存ツリー）を揺すって、枯れ葉（使われていないコード）を落とす」というイメージから来ています。

比較	Tree Shakingなし	Tree Shakingあり
バンドルに含まれるコード	インポートしたファイル全体	実際に使った部分だけ
ファイルサイズ	大きくなりがち	最小限に抑えられる
対応モジュール形式	CommonJS（CJS）は苦手	ES Modules（ESM）が最適

Tree Shakingが効果を発揮するのは、ES Modulesの import / export 構文を使ったコードに限られます。古いCommonJS形式（require() / module.exports）では静的解析が難しいため、十分な効果が得られません。

出力フォーマットの種類

Rollupは1つのソースコードから、複数の形式でファイルを出力できます。ライブラリ配布時に特に便利な機能です。

フォーマット名	略称	用途・特徴
ES Modules	`esm`	モダンなブラウザ・バンドラー向け。Tree Shakingに対応
CommonJS	`cjs`	Node.js向け。`require()`で読み込む従来形式
UMD	`umd`	ブラウザ・Node.js両対応。CDN配信などに使われる
IIFE	`iife`	ブラウザのscriptタグで直接読み込む形式

覚え方

「ロールアップ = くるくる巻き取る」とイメージすると覚えやすいです。ロールケーキを作るように、バラバラなファイルをひとまとめにして、余分な部分（使わないコード）はカットして仕上げる、というイメージです。

歴史と背景

2013年 — JavaScriptのモジュール管理が混乱していた時代。CommonJSとAMD（Asynchronous Module Definition）が乱立
2015年 — ES2015（ES6）によりJavaScript標準のモジュール構文（import/export）が登場。Rollupはこれをいち早く採用する形で開発開始
2015年 — Rich Harris（リッチ・ハリス）がRollupをリリース。「ESMをネイティブに扱う初めての本格バンドラー」として注目を集める
2016〜 — React、Vue、D3.jsなどの有名ライブラリがRollupを採用してビルド。「ライブラリビルドのデファクトスタンダード」としての地位を確立
2018〜 — WebpackがTree Shakingに対応し競合関係が明確化。「アプリにはWebpack、ライブラリにはRollup」という棲み分けが定着
2021〜 — ViteがRollupを内部バンドラーとして採用。開発ビルド（Vite）と本番ビルド（Rollup）の組み合わせが標準化される
2023〜 — Rollup v3・v4がリリース。パフォーマンス改善・ESMネイティブ化が進む

類似ツールとの比較

Rollupは「バンドラー」のジャンルに属しますが、それぞれ得意な領域が異なります。

Rollupの設定ファイル例

// rollup.config.js
export default {
  input: 'src/index.js',       // エントリーポイント（起点となるファイル）
  output: [
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',           // CommonJS形式で出力（Node.js向け）
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',           // ES Modules形式で出力（モダンブラウザ向け）
    },
  ],
};

上記のように、input（入口）とoutput（出口）を指定するだけで基本的なビルドが動きます。1つのソースから複数形式のファイルを同時に出力できるのがRollupの実務上の大きなメリットです。