Vite
ゔぃーと
Vite
一言でいうと
Webpackより圧倒的に高速な、現代Webフロントエンド向けの新世代ビルドツールのこと。
詳しい意味
Vite（フランス語で『速い』の意）は、Vue.js の作者が開発した現代的なフロントエンドビルドツールです。開発時は ES Modules を活用してブラウザが直接モジュール解決するため、起動が瞬時・HMR（Hot Module Replacement）が爆速。本番ビルドは Rollup ベースの最適化を行います。Webpack より圧倒的に速いため、新規プロジェクトでは Vite を選ぶのが主流に。React / Vue / Svelte / Solid など主要フレームワークの公式テンプレートも Vite ベースが多くなっています。Vitest（このプロジェクトでも使用）は Vite ベースのテストランナーで、設定を共有できます。
何に使うか
新規フロントエンドプロジェクトの立ち上げ。HMR の遅さが開発体験を損なっている既存プロジェクトの移行。Vitest と組み合わせたテスト基盤。
どんな時に出るか
「Vite で立ち上げ」「HMR が爆速」「Vite + Vitest」といった場面で登場します。
具体例
- 新規プロジェクトを Vite で立ち上げ、HMR の速度に開発者全員が驚いた。
- Vite + Vitest の組み合わせで、ビルドとテストの設定が共通化できて便利。
別名・略称
vite(ゔぃーと)Vite(ゔぃーと)Vitest(ゔぃーてすと)
間違えやすい語
初心者向けメモ
Webpack が「印刷工場」なら、Vite は「電子書籍リーダー直接表示」のような感覚です。原稿を毎回印刷せずに、その場でブラウザがモジュールを読み込むから起動が一瞬。本番リリース時は別途まとめて印刷します。