はじめに
Angularを使っていた頃は、ビルドツールについて深く考えたことはありませんでした。
CLIが勝手になんかいい感じにやっていたからです。
ですがReactでは、「どのビルドツールを使うか？」という選択から始まることを知りました。
そこで、「ビルドツール」について、自分なりに調べて整理してみたいと思います。
Angularのビルド
Angular CLI を使ってアプリケーションを作っていると、ng build や ng serve などのコマンドひとつでローカル開発・本番ビルドができます。
そして、ビルドや開発サーバー、テスト、lint などの設定を一括管理するangular.jsonがすべてを管理してくれます。
cssの設定を変えたりとかで当時angular.jsonを修正したりすることはありましたが、Webpack設定を触ることはありませんでした。
実は裏でWebpackが動いていた
Angular CLIは内部的にWebpackを使っています。ただし、webpack.config.jsのような明示的なファイルは存在せず、Angular側が用意した設定が内部で使われているみたいです。
おかげでWebpackに触れずとも高機能なビルドができていました👏
Reactのビルド：Vite vs Webpack
Angularと異なり、Reactには「公式なCLI」や「標準的な構成ファイル」が用意されていません。
そのため、Reactアプリのビルド環境は、開発者自身が選び、構築する必要があります。
その中でもVite と Webpack を見てみます。
Webpack：長年の定番ビルドツール
Webpack は、長年Reactをはじめとする多くのフロントエンドアプリで使われてきたバンドラーです。非常に柔軟で、プラグインエコシステムも豊富。複雑な要件にも対応できます。
かつては Create React App（CRA） というCLIツールがWebpackベースでReact開発の入口として広く使われていたようですが、現在は、React公式ドキュメント からも削除されています。
そのため、今Reactを始める場合は、Webpackを直接扱うか、別のモダンなツールを使うことになります。
Vite：現代的で高速な選択肢
Vite は、モダンなフロントエンド開発のために作られたビルドツールで、開発サーバーの起動が非常に高速です。React用のテンプレートもあり、すぐにプロジェクトを始められます。
Reactアプリ作成コマンド👇
npm create vite@latest my-app -- --template react-ts
Viteの主なメリットは以下のとおりです
- 超高速な開発サーバー
- シンプルな設定
- モダンな開発体験
Vite vs Webpack：簡単な比較
| 項目 | Webpack | Vite |
|---|---|---|
| 起動速度 | 遅い（全体をバンドル） | 速い（ESMベースで即時提供） |
| 設定ファイル | webpack.config.js（柔軟だが複雑） | vite.config.ts（シンプル） |
| 学習コスト | 高め | 比較的低め |
| プラグインエコシステム | 非常に豊富 | 急成長中 |
| 本番ビルド | 高度な最適化が可能 | Rollupベースで十分高速 |
結局どちらを選べば良いか？
現在Reactの新規プロジェクトを始めるなら、Viteなのかなと思いました。
すでにWebpackに慣れているチームや、複雑なビルド要件がある場合はWebpackも引き続き選択肢になるそうです。
実際、今はViteが主流っぽく、業務でもViteが使われてました。
また、WebpackからViteに移行するかという動きもありました。
まとめ
今回、整理してみると以下のような違いが見えてきました。
Angularはフレームワーク：すべてが揃っており、angular.json で中央集権的に設定を管理する。
Reactはライブラリ：必要なツールを自分で選び、設定ファイルも目的ごとに分かれている。今はViteが主流。
まだまだ基本的な理解が足りないな…(´・ω・`)
長くなりそうなので、設定ファイル(vite.config.ts,webpack.config.js,angular.json)に関しては別でまとめることにします。
