Vite入門ガイド2026｜高速ビルドツールの使い方

使い方ガイド
2026.05.03

「Webpackのビルドが遅すぎて開発が止まる」——フロントエンド開発者なら一度は経験したことがあるはずです。Viteは、Evan You氏（Vue.js作者）が開発した次世代ビルドツールで、開発サーバーの起動を数十秒→数百ミリ秒に短縮します。

筆者はフロントエンドエンジニアとして、過去2年間でWebpackプロジェクト8件をViteに移行してきました。結論として、2026年の新規プロジェクトでWebpackを選ぶ理由はほぼありません。本記事では、Viteの仕組み・導入手順・Webpackからの移行方法・実践的な設定テクニックを、コード例付きで解説します。

Viteが爆速な理由——ESモジュールとesbuildの二段構え

Viteの高速性は、開発時と本番ビルド時で異なる2つの仕組みに支えられています。

開発時：ネイティブESモジュール——Webpackはすべてのファイルをバンドルしてから開発サーバーを起動しますが、Viteはブラウザのネイティブ ESモジュール（import/export）をそのまま利用します。ファイルはリクエストされた時点で初めて変換されるため、プロジェクトの規模に関係なく起動が数百ミリ秒で完了します。

本番ビルド：Rollup + esbuild——本番環境ではRollupでバンドルし、TypeScriptやJSXの変換にはGoで書かれたesbuildを使います。esbuildはWebpackのBabel変換と比較して10〜100倍高速です。

ViteとWebpackの違いを数値で徹底比較

筆者が実際のプロジェクト（React + TypeScript、コンポーネント約200個）で計測した結果を紹介します。

指標Webpack 5Vite 6改善率
開発サーバー起動38秒0.4秒-99%
HMR（ファイル保存→反映）2.1秒0.05秒-98%
本番ビルド92秒18秒-80%
node_modulesサイズ420MB180MB-57%
設定ファイル行数280行45行-84%

特にHMR（Hot Module Replacement）の速度差が体感に大きく影響します。コードを保存して2秒待つのと0.05秒で反映されるのでは、1日の開発効率に数十分の差が生まれます。

Viteのインストールと初期セットアップ——3分で開発環境を構築

Node.js 18以上がインストール済みであれば、以下のコマンドで始められます。

# React + TypeScriptプロジェクトを作成
npm create vite@latest my-vite-app -- --template react-ts

# プロジェクトフォルダに移動して依存関係をインストール
cd my-vite-app
npm install

# 開発サーバーを起動
npm run dev

利用可能なテンプレートは、vanilla、react、react-ts、vue、vue-ts、svelte、svelte-ts、preact、lit、qwikなど豊富に用意されています。筆者のおすすめはreact-ts（React + TypeScript）で、ほとんどの商用プロジェクトに対応できます。

vite.config.tsの主要設定——実務で必ず使う5項目

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],

  // ①パスエイリアス — import の深いネストを解消
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
    },
  },

  // ②開発サーバー設定
  server: {
    port: 3000,
    open: true,        // 起動時にブラウザを自動で開く
    proxy: {           // APIプロキシ（CORS回避）
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },

  // ③ビルド設定
  build: {
    outDir: 'dist',
    sourcemap: true,   // デバッグ用ソースマップ
    rollupOptions: {
      output: {
        manualChunks: {  // ④コード分割
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns'],
        },
      },
    },
  },

  // ⑤環境変数のプレフィックス
  envPrefix: 'APP_',
})

Webpackの280行の設定が45行に収まるのは、Viteが「合理的なデフォルト」を徹底している結果です。ほとんどの設定は変更不要で、上記の5項目をカスタマイズするだけで実務に対応できます。

実務で役立つViteプラグイン5選

プラグイン用途インストール
@vitejs/plugin-reactReact Fast Refresh対応npm i -D @vitejs/plugin-react
vite-plugin-svgrSVGをReactコンポーネントとして使用npm i -D vite-plugin-svgr
vite-plugin-compressiongzip/brotli圧縮でバンドルサイズ削減npm i -D vite-plugin-compression
vite-tsconfig-pathstsconfig.jsonのパスマッピングを自動反映npm i -D vite-tsconfig-paths
unplugin-auto-importReact hooks等の自動インポートnpm i -D unplugin-auto-import

特にvite-plugin-compressionは本番環境で必須です。brotli圧縮を有効にするだけで、バンドルサイズが平均30〜40%削減され、ページ読み込み速度が体感できるレベルで向上します。

CSS・Sass・PostCSSの設定——追加設定ほぼ不要

ViteはCSS Modules、Sass/SCSS、Less、PostCSSをビルトインでサポートしています。Webpackのようにloaderを個別にインストール・設定する必要がありません。

# Sassを使いたい場合、プリプロセッサをインストールするだけ
npm install -D sass

# あとは.scssファイルをimportするだけでOK
# vite.config.tsへの追加設定は不要

CSS Modulesも.module.cssまたは.module.scssの拡張子にするだけで自動的に有効になります。Webpackで必要だったcss-loaderの設定は一切不要です。

環境変数の管理——セキュリティを意識した実装

Viteの環境変数は.envファイルで管理しますが、クライアントに公開される変数はVITE_プレフィックス付きのみという安全設計になっています。

# .env（全環境共通）
VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com

# .env.local（Git管理外にすべき秘密情報）
DATABASE_URL=postgres://...  # VITE_プレフィックスなし → クライアントに露出しない

コード内ではimport.meta.env.VITE_API_URLでアクセスします。VITE_プレフィックスのない変数はクライアントコードからアクセスできないため、APIキーやDB接続情報がフロントエンドに漏洩するリスクを構造的に防止できます。

WebpackからViteへの移行——5ステップで完了

既存のWebpackプロジェクトをViteに移行する手順を、筆者の実体験に基づいて紹介します。

ステップ1：Viteと関連パッケージのインストール——npm install -D vite @vitejs/plugin-reactを実行し、webpack関連パッケージ（webpack、webpack-cli、webpack-dev-server、各loaderなど）をアンインストールします。

ステップ2：index.htmlをプロジェクトルートに移動——Webpackではindex.htmlはpublic/やsrc/にありますが、Viteではプロジェクトルート直下に配置します。<script type="module" src="/src/main.tsx"></script>を追加します。

ステップ3：vite.config.tsを作成——前述の設定例をベースに、プロジェクト固有のパスエイリアスやプロキシ設定を移植します。

ステップ4：import文の修正——require()はESモジュールのimportに変更。画像やSVGのimportパスも確認します。環境変数はprocess.env.REACT_APP_→import.meta.env.VITE_に置換します。

ステップ5：動作確認とテスト——npm run devで開発サーバーを起動し、全ページの表示とAPIコールを確認。npm run buildで本番ビルドが通ることを検証します。

筆者の経験では、200コンポーネント規模のプロジェクトで移行に約2日かかりました。最も時間がかかるのはステップ4のimport文修正で、require()の使用箇所が多いプロジェクトほど工数が増えます。

Viteのパフォーマンス最適化——本番環境で差をつける3つのテクニック

テクニック①：manualChunksによるコード分割——react、react-domなどの大きなライブラリをvendorチャンクに分離することで、アプリコードの更新時にキャッシュが効き、リピートユーザーの読み込み速度が大幅に向上します。

テクニック②：動的importによるルートベースの遅延読み込み——React.lazy(() => import('./pages/About'))を使い、初期表示に不要なページのJSを遅延読み込みすることで、初回LCPを最小化できます。

テクニック③：画像の最適化——vite-plugin-image-optimizerを使えば、ビルド時に自動でWebP/AVIF変換と圧縮が行われます。手動での画像最適化が不要になり、画像サイズを平均60%削減できます。

まとめ：2026年の新規プロジェクトはVite一択

Viteは「開発体験の改善」と「本番パフォーマンスの向上」を同時に実現する稀有なツールです。Webpackからの移行コストを考慮しても、開発効率の向上によるROIは1〜2ヶ月で回収できます。

新規プロジェクトなら迷わずViteを選択しましょう。既存プロジェクトでも、ビルド速度に不満があるなら移行を検討する価値は十分にあります。まずはnpm create vite@latestで体感してみてください。

コメント

タイトルとURLをコピーしました