vite

Vite

プラットフォーム： Web のみです。モバイルのデモでは Metro bundler を使用する Expo を使います。expo-sdk スキルを参照してください。

API リファレンス、プラグインエコシステム、高度な設定オプションについては、Context7 MCP（resolve-library-id、続けて query-docs）を使用してください。

概要

Vite 7.x 向けのビルドツールおよび開発サーバーです。即時のサーバー起動、高速な HMR、最適化された本番ビルド、TypeScript のファーストクラスサポートを提供します。

インストール：pnpm add -D vite

ワークフロー

初期設定：

1. TypeScript の型を指定して vite.config.ts を作成します
2. React プラグインをインストールします：pnpm add -D @vitejs/plugin-react
3. すっきりしたインポートのためにパスエイリアスを設定します
4. .env ファイルで環境変数を設定します
5. 開発サーバーをテストします：pnpm vite

本番環境向けの最適化：

1. コード分割とチャンクの最適化を設定します
2. ビルドの圧縮（gzip/brotli）を有効にします
3. 本番ビルドを実行します：pnpm vite build
4. ビルドをローカルでプレビューします：pnpm vite preview

基本設定

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node: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: 5173,
    strictPort: true,
    open: true,
    hmr: { overlay: true },
    proxy: {
      '/api': { target: 'http://localhost:3000', changeOrigin: true }
    }
  },

  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'esbuild',
  }
});

エイリアスに合わせて tsconfig.json のパスを更新します：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  }
}

SWC を使用した React（より高速な代替手段）：pnpm add -D @vitejs/plugin-react-swc を実行し、@vitejs/plugin-react-swc からインポートします。

Fast Refresh はデフォルトで有効です。設定は不要です。

環境変数

# .env - Base config (committed)
VITE_APP_NAME=MyApp
VITE_API_VERSION=v1

# .env.local - Local overrides (gitignored — put secrets here)
VITE_API_URL=http://localhost:3000

# .env.development / .env.production - mode-specific defaults

重要： クライアントコードに公開する環境変数は、すべて VITE_ で始める必要があります。

// Access in code
const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;
const isProd = import.meta.env.PROD;
const mode = import.meta.env.MODE; // 'development' | 'production'

// Type-safe env vars — add to vite-env.d.ts or src/env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_NAME: string;
  readonly VITE_API_URL: string;
}

// Runtime validation
if (!import.meta.env.VITE_API_URL) {
  throw new Error('VITE_API_URL is required');
}

loadEnv を使った動的な設定：

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    server: { port: Number(env.PORT) || 5173 }
  };
});

ビルドの最適化

コード分割

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 500, // KB
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router-vendor': ['react-router-dom'],
          'animation-vendor': ['framer-motion'],
        },
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]',
      }
    }
  }
});

高度な関数ベースのチャンク分割 — ビューごとの分割が必要な場合に使用します：

manualChunks(id) {
  if (id.includes('node_modules')) {
    if (id.includes('framer-motion')) return 'vendor-animation';
    if (id.includes('react')) return 'vendor-react';
    return 'vendor';
  }
}

圧縮

import { compression } from 'vite-plugin-compression2';
// pnpm add -D vite-plugin-compression2

plugins: [
  compression({ algorithm: 'gzip', include: /\.(js|css|html|svg)$/ }),
  compression({ algorithm: 'brotliCompress', include: /\.(js|css|html|svg)$/ }),
]

本番環境のみで圧縮する場合：

minify: isDev ? false : 'terser',
terserOptions: { compress: { drop_console: true, drop_debugger: true } }

CSS とアセット

PostCSS / Tailwind：css.postcss に postcss.config.js を指定します。大規模なアプリでは cssCodeSplit: true（デフォルト）を有効にします。

アセットの処理：

// src/assets — processed by Vite (hashed, optimized)
import logo from '@/assets/logo.svg';

// /public — served as-is, NOT processed
<img src="/images/logo.svg" />
// ❌ Never import from public directory

インライン化の上限： 4 KB 未満のアセットはデフォルトで base64 としてインライン化されます（assetsInlineLimit: 4096）。

サブディレクトリでホストする場合のベースパス： base: '/my-app/'

Vite 7 に関する注意事項

• Rolldown — Rust ベースの新しいバンドラー（オプション。ビルドを高速化できます）
• TypeScript サポートとツリーシェイキングが改善されています
• デフォルトの設定はほとんどのプロジェクトでそのまま使えます。高度なバンドラーオプションが必要になることはまれです

ベストプラクティス

• パスエイリアスを使用して ../../../ のような煩雑なインポートを避けます
• クライアント用の環境変数には VITE_ を付けて自動的に公開します
• 大きなベンダーコードを 別々のチャンクに分割し、キャッシュを改善します
• シークレットには .env.local を使用します。git には絶対にコミットしないでください
• API 呼び出しには プロキシを設定し、開発中の CORS を回避します
• デプロイ前にビルドをプレビューします： pnpm vite build && pnpm vite preview
• ビルドの高速化には esbuild を、小さな出力には terser を使用します
• strictPort: true を設定して ポートの競合を見逃さないようにします

アンチパターン

• ❌ 環境変数に VITE_ プレフィックスを付け忘れる
• ❌ src/assets ではなく /public ディレクトリからインポートする
• ❌ API キーを含む .env.local をコミットする
• ❌ パスエイリアスを設定しない（インポートが煩雑になる）
• ❌ 開発時に terser を使用する（不要な速度低下を招く）
• ❌ strictPort を設定しない（ポートの競合を見逃す）
• ❌ チャンクサイズの警告を無視する（読み込み時間に影響する）
• ❌ エイリアスを使用する際に tsconfig.json のパス設定を忘れる
• ❌ localhost の URL をハードコードする（環境変数を使用する）
• ❌ すべてのベンダーコードを単一のチャンクにまとめる（キャッシュの効果が失われる）

フィードバックループ

ビルドの分析：

pnpm vite build
# Output shows chunk sizes:
# dist/js/vendor-react-abc123.js  142.34 kB
# dist/js/index-def456.js          87.21 kB

プレビューのテスト：

pnpm vite build && pnpm vite preview
# Verify: all routes work, assets load, no console errors

HMR の速度： ほとんどの更新で 50ms 未満が目安です。Chrome DevTools の Network を開き、「vite」でフィルタリングしてください。