0.初めに
フロントエンド開発の現場では、Webpackベースの環境からViteへの移行がここ数年で一気に進みました。今さら聞きづらい人も多いと思うので、改めて整理しておきます。
Viteは高速な開発サーバーとビルド機能を備えたフロントエンド開発ツールで、React・Vue・Svelteあたりとの組み合わせで特に評価が高く、新規プロジェクトを立ち上げる際の第一候補になっています。
この記事では、Viteがなぜそこまで支持されているのか、さらに拡張性を持たせた「Vite plus」的な使い方、そして実際にプロジェクトを作る手順まで一通り書いていきます。
なお、筆者はVite信者のため話半分でお願いします。
1. Viteが選ばれる3つの理由
① 起動とビルドが圧倒的に速い
Webpackの開発環境では、サーバーを起動する前にアプリ全体を解析してバンドルする必要がありました。これがプロジェクトの規模が大きくなるほど起動が遅くなる原因になっていたわけです。
Viteはここを根本的に変えていて、ブラウザが標準で対応しているNative ESM（ES Modules）をそのまま使います。
開発中はソースコードをそのままブラウザに渡し、必要なモジュールだけをブラウザ側がその都度読み込む形になります。依存ライブラリのほうは、Go言語で書かれた高速コンパイラesbuildが事前に変換を済ませてくれます。
結果として、プロジェクトの規模に関係なく開発サーバーがほぼ即座に（多くの場合1秒もかからずに）立ち上がります。Webpack環境を使ってきた人ほど、この速さには驚くはずです。
② HMRが速い
HMR（Hot Module Replacement）は、コードを変更してもブラウザを丸ごとリロードせず、変わった部分だけをその場で更新してくれる仕組みです。
Viteは変更があったモジュールだけをピンポイントで読み込み直すので、アプリ全体を再ビルドする必要がありません。保存した瞬間に画面が変わる、というあの感覚です。コンポーネント数が多いプロジェクトになるほど、この差は大きくなります。
③ 設定がシンプル
最近のフロントエンド開発で必要になる機能が、ほとんど設定なしで使えるのもViteの強みです。
TypeScriptはそのまま使えます。変換にはesbuildが使われるので変換自体は速いのですが、注意点があります。esbuildは速度を優先するために型チェックをスキップする仕様になっているので、型エラーをきちんと検出したい場合はビルドコマンドにtsc --noEmitを足すか、vite-plugin-checkerのようなプラグインを別途入れる必要があります。意外とここで詰まる人が多い印象です。
CSS Modules、Sass/SCSS、PostCSSも標準対応していて、わざわざ環境を整える手間がかかりません。画像やフォントなどの静的ファイルも扱いやすく、本番ビルドの際は自動で圧縮・最適化されます。
プラグインのエコシステムも充実しています。本番ビルドにはRollupベースの仕組みが使われているため、Rollup向けに作られた既存のプラグインも活用できるのが地味に助かるポイントです。
2. React開発でViteが選ばれる理由
かつてReactの入門用としてよく使われていたCreate React App（CRA）は、すでに公式に非推奨となり、メンテナンスも止まっています。これからCRAで新しいプロジェクトを始めるのはおすすめしません。
代わりに、今のReact開発では次の2つがほぼ標準になっています。
- Vite：シンプルなSPA（シングルページアプリケーション）や、一般的なWebサイトの構築に向いている
- Next.js / Remix：SSR（サーバーサイドレンダリング）が必要な大規模アプリに向いている
「サーバー側の仕組みは特に要らないから、まず軽く動くものを作りたい」というケースなら、Viteを選んでおけば間違いないと思います。
3. 「Vite plus」な拡張性
Viteは単体でも十分速いツールですが、プラグインや新しい機能を組み合わせることで、もう一段強力な環境を作れます。
PWA対応
vite-plugin-pwaを入れると、Webサイトを比較的簡単にPWA（プログレッシブウェブアプリ）化できます。オフラインでの閲覧やプッシュ通知を足したいときに便利です。
広がるエコシステム
最近はWebサイトの構築だけでなく、Chrome拡張機能の開発や、バックエンドと組み合わせたフルスタック開発まで、Viteを土台にしたツールやフレームワークが増えています。
なお、Vite 6からはEnvironment APIという新しい仕組みも導入されています。これはCloudflare Workersのようなエッジ環境向けの開発体験を改善するためのもので、主にフレームワークやプラグインの作者向けの機能です。本記事執筆時点ではまだリリースキャンディデート（実験的な位置づけ）のため、通常のSPA開発であれば特に意識する必要はありません。
4. Viteでプロジェクトを作る手順
前提条件
事前に以下がPCに入っているか確認してください。
- Node.js（できればLTS版）
- npm（Node.jsに同梱されています）
Step 1: プロジェクトを作成する
ターミナルで次のコマンドを実行します。my-appの部分は好きなプロジェクト名に変えて構いません。
npm create vite@latest my-app
実行すると、使うフレームワークを選ぶプロンプトが出てきます。
◇ Select a framework:
│ React
│ Vue
│ Svelte
│ Solid
│ Vanilla
Reactを選んだ場合は、続けてJavaScriptかTypeScriptかを聞かれるので、好きな方を選んでください。
Step 2: プロジェクトのディレクトリに移動する
cd my-app
Step 3: 依存関係をインストールする
npm install
ここは普通のnpmプロジェクトと同じです。特に難しいことはありません。
Step 4: 開発サーバーを起動する
npm run dev
実行すると、こんな感じでURLが表示されます。
Local: http://localhost:5173/
ブラウザでアクセスすれば、作ったアプリがそのまま表示されます。ここまでの所要時間は、慣れていればものの数分です。
Step 5: 本番用にビルドする
リリース用のファイルを作るときは次を実行します。
npm run build
ビルドした成果物はdist/ディレクトリに出力されます。あとはこのフォルダをそのままサーバーにアップロードすればOKです。
Step 6: ビルド結果を確認する
本番相当の状態をローカルで確認したいときは、次のコマンドが使えます。
npm run preview
開発サーバーとは別に、ビルド後のファイルをそのまま配信してくれるので、デプロイ前の最終確認に便利です。
5.終わりに
ここまで見てきたように、Viteの強みは
- 開発サーバーの起動が速い
- HMRが速くて快適
- 設定がほとんど要らない
- TypeScriptと組み合わせやすい
- モダンな開発スタイルに合っている
といったところに集約されます。これからReactやVueで新しいプロジェクトを始めるなら、まずViteを試してみて損はないと思います。
環境構築に時間を取られなくなるぶん、コードを書く時間に集中できるようになります。フロントエンド開発を始めたばかりの人にも、扱いやすいツールだと感じます。