フロントエンド - ビルド・ツール

Vite ヴィート

ビルドツールバンドラーESモジュールHMRフロントエンド開発Rollup

Viteについて教えて

簡単に言うとこんな感じ！

Viteはフロントエンド開発をめちゃくちゃ速くしてくれるツールだよ！ファイルを保存した瞬間にブラウザへ変更が反映される「爆速プレビュー」が魅力で、従来のツールと比べて待ち時間が桁違いに短いんだ。名前はフランス語で「速い」という意味なんだって！

Viteとは

Viteとは、フロントエンド（ブラウザで動くWebアプリの画面側）の開発を高速化するためのビルドツールです。ビルドとは、開発者が書いたソースコード（JSやCSS、画像など）を、ブラウザが読み込みやすい形にまとめる作業のことです。Viteはこのビルド体験を根本から再設計し、「開発中の速さ」と「本番リリース用のまとまりやすさ」を両立させています。

従来のビルドツール（WebpackなどのJSバンドラー）は、開発中にファイルを変更するたびに「全コードをひとかたまりに結合してからブラウザへ渡す」という処理を繰り返していました。プロジェクトが大きくなるほどこれが遅くなり、ファイル保存から画面反映まで数十秒〜数分かかることも珍しくありませんでした。Viteはブラウザ自体が持つESモジュール（ES Modules） という仕組みを活用することで、この「全部まとめてから渡す」という工程をほぼ省略し、変更のあったファイルだけを即座に届けます。

2020年にVue.jsの作者であるEvan YouがViteを発表して以来、Vue・React・Svelteなど主要なフレームワークに対応し、現在はフロントエンド開発ツールの事実上の標準として広く採用されています。

Viteの仕組みと特徴

Viteの中心的なアイデアは「開発時と本番ビルド時で異なる戦略を使い分ける」ことです。

フェーズ	使う技術	特徴
開発時（dev server）	ESモジュール（ネイティブ）	ブラウザが必要なファイルだけを都度リクエスト。バンドル不要で起動が瞬時
本番ビルド時（build）	Rollup（内部で使用）	全ファイルを最適化して結合・圧縮。本番環境向けの最小構成を生成

HMR（ホットモジュールリプレースメント）とは

HMR（Hot Module Replacement） は、ファイルを保存したときにページ全体をリロードせず、変更のあったモジュール（部品）だけをブラウザに差し替える機能です。フォームに入力中でもデータが消えず、変更が即反映されるため、開発効率が大幅に上がります。ViteのアーキテクチャはこのHMRを極めて高速に動作させるよう設計されており、大規模プロジェクトでもほぼ一定の速度を保ちます。

起動速度の違い（目安）

ツール	開発サーバー起動（中規模プロジェクト）	HMR反映速度
Webpack	数十秒〜数分	数秒〜
Vite	数百ミリ秒〜数秒	数十ミリ秒〜

歴史と背景

2020年4月 — Evan You（Vue.js作者）がViteを初公開。当初はVue 3専用の開発ツールとして発表
2021年2月 — Vite 2.0リリース。フレームワーク非依存となり、React・Svelte・Vanilla JSにも対応
2021年〜 — Vue CLI・Create React AppなどそれまでのデファクトスタンダードからViteへの移行が加速
2022年 — SvelteKit・Nuxt 3・AstroなどがViteをデフォルトのビルドエンジンとして採用
2023年 — ViteがNpm週間ダウンロード数1,000万を突破。フロントエンド開発ツールの主流に
2024年 — Vite 5リリース。Node.js 18以上を要件とし、さらなる高速化と安定性向上

背景として、2010年代後半にJavaScriptアプリの規模が急拡大し、従来のバンドラーでは開発体験が著しく低下していたことがあります。Viteはブラウザが2018年以降ネイティブESモジュールを標準サポートするようになった流れに乗り、「バンドルしなくてよい開発体験」を実現しました。

Viteと他のビルドツールの比較

主要なビルドツールの位置づけを整理します。

各ツールの使い分けポイント：

新規プロジェクト → まずViteを選ぶのが現在のベストプラクティス
既存のWebpackプロジェクト → 段階的にViteへ移行するか、Rspackで高速化を検討
npmパッケージ（ライブラリ）を作る → Rollupを直接使うケースもある
Next.jsを使う → Turbopackが組み込まれており、Viteは不要

Viteの設定ファイルと基本構造

Viteを導入すると、プロジェクトルートに vite.config.js（またはTypeScript用の vite.config.ts）が作られます。

// vite.config.js の基本例
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],   // フレームワーク対応プラグインを追加
  server: {
    port: 3000,         // 開発サーバーのポート番号
  },
  build: {
    outDir: 'dist',     // 本番ビルドの出力先フォルダ
  },
})

設定はシンプルで、プラグインを差し込む形でReact・Vue・Svelteなどに対応します。従来のWebpackと比べて「設定地獄」になりにくいのも評価されています。

Viteを使うまでの流れ（コマンド例）：

# Viteでプロジェクトを新規作成（Reactの場合）
npm create vite@latest my-app -- --template react

# 依存パッケージのインストール
cd my-app && npm install

# 開発サーバー起動（爆速で立ち上がる）
npm run dev

# 本番ビルド
npm run build

発注・選定時に知っておきたいポイント

システム開発を外注・発注する立場として、Viteに関して確認すべき点を整理します。

確認ポイント	なぜ重要か
フレームワークとViteのバージョン組み合わせ	バージョン非互換で動かないケースがある
本番ビルドの最適化設定	デフォルト設定のままだとファイルサイズが大きくなる場合がある
Node.jsのバージョン要件	Vite 5以降はNode.js 18以上が必要。サーバー環境と合わせること
プラグイン管理	非公式プラグインはメンテナンス停止リスクあり。依存数の確認を