【ロールアップ】
Rollup（バンドラ） とは？
💡 使わないコードはバッサリ切り捨て！軽量バンドルの職人
📌 このページのポイント
- 複数のJavaScriptファイルを1つにまとめる「バンドラ」の一種
- ES Modules（import/export）をネイティブに解析し、不要なコードを自動で除去（Tree Shaking）する
- ライブラリやフレームワークの配布用ビルドに特に人気が高い
- ViteやSvelteKitなど、多くのモダンツールの内部でも使われている
ひよこ Rollupってwebpackと何が違うの？
ペンギン先生 webpackは「なんでも入りの万能バンドラ」だけど、RollupはES Modulesに特化したシンプルなバンドラなんだ。余計な機能が少ない分、出力されるコードがとてもきれいだよ
ひよこ Tree Shakingって何？木を揺するの？
ペンギン先生 まさにそのイメージ！木を揺すると枯れた葉っぱ（使っていないコード）がパラパラ落ちるでしょ？Rollupはコードの依存関係を解析して、実際に使われていない部分を自動で除去してくれるんだ
ひよこ どういうときにRollupを使うの？
ひよこ ViteがRollupを使ってるって聞いたけど本当？
ひよこ Rollupのプラグインってたくさんあるの？
ペンギン先生 かなり充実しているよ。TypeScript対応、CommonJS変換、JSON読み込みなど基本的なものから、コード圧縮やバンドル分析まで揃っている。しかもViteのプラグインシステムはRollupと互換性があるから、エコシステムが共有されているんだ。Rollupは裏方だけど、モダンフロントエンドの屋台骨を支えている存在だね
まとめ：ざっくりこれだけ覚えればOK！
「Rollup」って出てきたら「ES Modules向けの軽量バンドラで、Tree Shakingが得意なやつ」と思えればだいたいOK！
📖 おまけ：英語の意味
「Rollup」 ＝ 巻き上げる・まとめる
💬 複数のモジュールを1つに「巻き上げて」まとめるイメージからこの名前がついたよ