Vite 6で始める高速フロントエンド開発環境の構築

COLUMN コラム

2025年08月18日
Vite 6で始める高速フロントエンド開発環境の構築
- ＩＴ系

Vite 6がフロントエンド開発にもたらす革新

フロントエンド開発において、ビルドツールの選定はプロジェクト全体の開発体験を左右する重要な意思決定です。Vite 6は、前バージョンから大幅な改善を遂げ、開発サーバーの起動速度、HMR（Hot Module Replacement）の反映速度、そしてビルドパフォーマンスのすべてにおいて進化しました。本記事では、Vite 6を使った開発環境の構築方法を実践的に解説し、現場で即座に活用できるノウハウをお伝えします。

筆者自身、Webpack時代からビルドツールの変遷を見てきましたが、Vite 6の開発体験は別次元と言っても過言ではありません。特に大規模プロジェクトにおけるコールドスタートの改善は目を見張るものがあります。

Vite 6の新機能と改善点

Vite 6では、いくつかの注目すべき新機能が追加されました。まず、Environment APIの安定化により、SSRとクライアントサイドの環境を統一的に管理できるようになりました。これはフルスタック開発において非常に大きなメリットです。

Environment API：SSR・クライアント・カスタム環境の統合管理

改善されたCSSサポート：Lightning CSSとの統合強化

パフォーマンス最適化：依存関係の事前バンドル処理の高速化

TypeScript設定ファイルのネイティブサポート：vite.config.tsの処理が高速に

プロジェクトの初期セットアップ

まずはVite 6でプロジェクトを作成しましょう。以下のコマンドで、React + TypeScriptのテンプレートを使って新規プロジェクトを生成できます。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

プロジェクトが作成されたら、vite.config.tsをカスタマイズしていきます。以下は実務でよく使う基本設定です。

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    target: 'esnext',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
        },
      },
    },
  },
})

ここで重要なのは、manualChunksの設定です。ベンダーライブラリを適切に分割することで、キャッシュ効率が大幅に向上します。実務では、頻繁に更新されるアプリケーションコードと、更新頻度の低いライブラリコードを分離することが鉄則です。

Environment APIを活用したSSR設定

Vite 6の目玉機能であるEnvironment APIを使って、SSR環境を構築する方法を見ていきましょう。

export default defineConfig({
  environments: {
    client: {
      build: {
        outDir: 'dist/client',
        manifest: true,
      },
    },
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true,
      },
    },
  },
})

従来のSSR設定と比較すると、環境ごとの設定が明確に分離され、管理しやすくなっています。これにより、クライアントとサーバーで異なる最適化戦略を適用できます。

開発効率を上げるプラグイン構成

実務で特に重宝するプラグイン構成を紹介します。以下の組み合わせは、多くのプロジェクトで採用実績があります。

npm install -D vite-plugin-checker vite-plugin-svg-icons unplugin-auto-import

import checker from 'vite-plugin-checker'
import autoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint ./src',
      },
    }),
    autoImport({
      imports: ['react', 'react-router-dom'],
      dts: './src/auto-imports.d.ts',
    }),
  ],
})