Vite超入門──“爆速”開発を実現する次世代フロントエンドツールチェーン徹底ガイド

Daichi Mizuno

1日前

Viteとは何者か

Vite（ヴィート）は、Vue の作者 Evan You が開発したフロントエンド開発ツールです。「速さ（vite=仏語の“高速”）」の名のとおり、従来のバンドラに比べ初回起動やコード更新が桁違いに速いのが特徴です。その秘密は ES モジュールを生かしたオンデマンド変換と、本番ビルド時に Rollup を用いる二段構えのアーキテクチャにあります。

旧世代ツールと何が違う？

項目	Webpack	Vite
開発サーバ起動	数十秒〜数分	1〜2 秒
HMR更新	0.5 秒以上	30〜50 ms
設定ファイル	必須	ゼロコンフィグでOK
バックエンド	Node.js + Webpack	Node.js + esbuild + Rollup

Vite は依存ライブラリを esbuild でプリバンドルし、ソースコードはリクエストされた瞬間だけトランスパイルするため、「保存→ブラウザ反映」の待ち時間がほぼ消えます。

インストールとプロジェクト初期化

npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev   # http://localhost:5173

対話プロンプトで Vue、React、Svelte、Solid、Lit など好きなテンプレートを選べます。後からライブラリを追加しても問題ありません。

ディレクトリ構成の基本

my-vite-app/
├─ index.html       ← エントリーポイント
├─ vite.config.js   ← 必要になったら作成
├─ src/
│  ├─ main.js
│  └─ App.vue / App.jsx
└─ public/

index.html を Vite が解析し、自動でモジュールグラフを生成します。

開発サーバとホットリロード

npm run dev を実行すると開発サーバが起動し、以下を行います。

依存ライブラリを esbuild でプリバンドル
ソースをオンデマンド変換してブラウザへ配信
変更検知で該当モジュールだけを HMR で差し替え

Vue SFC、React Fast Refresh、Svelte HMR などが公式プラグインでサポートされ、状態を保持したまま UI が瞬時に更新されます。

本番ビルドと最適化

npm run build
npm run preview

Rollup がコード分割・ツリーシェイキングを行い、dist/ にハッシュ付きファイルを出力します。画像は 4 KB 未満なら自動で Base64 インライン化されます。

プラグインエコシステム

@vitejs/plugin-react – React + Fast Refresh
@vitejs/plugin-vue – Vue 3 SFC 対応
vite-plugin-pwa – 数行で PWA 化
vite-plugin-legacy – 古いブラウザ向けフォールバック

プラグインは vite.config.js の plugins 配列に追加するだけで機能します。

環境変数とモード

.env ファイルに VITE_ プレフィックスを付けて記述し、import.meta.env.VITE_API_BASE のように参照します。モードは development / production などが自動判定され、import.meta.env.MODE で取得できます。

主要フレームワークとの統合

React

npm i -D @vitejs/plugin-react

JSX 変換と Fast Refresh が自動有効。TypeScript も即利用可能。

Vue 3

npm i -D @vitejs/plugin-vue

.vue ファイルと <script setup> をネイティブサポート。

Svelte

テンプレート svelte を選ぶだけで HMR と SvelteKit 互換設定が完了します。

移行ガイド：CRA/Webpack → Vite

react-scripts をアンインストール
npm create vite でテンプレートを生成
REACT_APP_ 環境変数を VITE_ にリネーム
絶対パスエイリアスを vite.config.js に resolve.alias として移植

多くのプロジェクトは半日程度で移行でき、ビルド時間が 1/5 以下に短縮されます。

なぜ“爆速”なのかをもう少し深掘り

Vite は開発中に esbuild を使用し、依存ライブラリを一度だけプリバンドル。ソースコードはリクエスト単位でトランスパイルされ、HMR では変更箇所のみを WebSocket 越しに差し替えます。これにより編集サイクルが極端に短縮されるのです。本番ビルドでは Rollup の最適化アルゴリズムを活用し、速度と品質を両立しています。

Vitestで体験する“超高速ユニットテスト”

npm i -D vitest @testing-library/react

Vite とキャッシュを共有するため、1000 件以上のテストでも数秒で完了します。Jest 互換 API なので即移行可能です。

SSR・プリレンダリング活用例

vite build --ssr でサーバーレンダリング用バンドルを生成し、Node.js ハンドラに流し込めます。また --ssrManifest で依存表を出力すればプリレンダリングとの相性も抜群です。Nuxt 3、Astro、SvelteKit などが Vite を基盤に採用しています。

よくあるエラーと対処法

エラー	原因	解決策
`Failed to resolve import "fs"`	ブラウザで Node 専用モジュール参照	条件付き import または external 設定
画像が 404	`public/` ではなく `src/` に置いた	`import` で読み込むか `public` へ移動
HMR が動かない	IDE の Safe Write 機能	Safe Write をオフにする

デプロイ先別クイックスタート

Netlify

ビルドコマンド npm run build、公開フォルダ dist を設定するだけ。

Vercel

vercel CLI を実行すると自動で Vite プリセットが適用。

Cloudflare Pages

npm run build
npx wrangler pages publish dist

ロードマップとコミュニティ

Vite 5 では esbuild v0.23 へのアップグレード、Import Attributes 標準化、Rust ベースの変換パイプラインとのハイブリッド化が予定されています。GitHub での PR マージ速度も非常に高速で、活発なコミュニティが魅力です。

Viteが向かないケースは？

IE11 未満を公式サポートする案件
Webpack 固有のローダーに深く依存する巨大モノリス
サーバーサイドとビルドが密結合したレガシー CMS
ただし vite-plugin-legacy や移行ツールの充実で、こうした制約は急速に減りつつあります。

参考コマンド早見表

npm create vite@latest        # 新規作成
npm run dev                   # 開発
npm run build                 # 本番ビルド
npm run preview               # プレビュー
npx vite build --ssr src/entry-server.js   # SSRバンドル

まとめ

Vite は開発サーバ起動の速さとシンプルな構成でモダンフロントエンド開発を変革しました。新規プロジェクトはもちろん、既存アプリの移行でも劇的な速度向上が期待できます。まずはコマンド一発でプロジェクトを作成し、その“爆速”体験を味わってください。