Vite（ヴィート）は、Vue の作者 Evan You が開発したフロントエンド開発ツールです。「速さ（vite=仏語の“高速”）」の名のとおり、従来のバンドラに比べ初回起動やコード更新が桁違いに速いのが特徴です。その秘密は ES モジュールを生かしたオンデマンド変換と、本番ビルド時に 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 を実行すると開発サーバが起動し、以下を行います。

1. 依存ライブラリを esbuild でプリバンドル
2. ソースをオンデマンド変換してブラウザへ配信
3. 変更検知で該当モジュールだけを 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

1. react-scripts をアンインストール
2. npm create vite でテンプレートを生成
3. REACT_APP_ 環境変数を VITE_ にリネーム
4. 絶対パスエイリアスを 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 を基盤に採用しています。

よくあるエラーと対処法

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

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

JavaScriptフレームワークの中でも人気の高いReact。「まず動くプロトタイプを作りたいけど、BabelやWebpackの設定が面倒」という悩みを解決するのが**Create React App（CRA）**です。コマンド1本で最新の開発環境が完成し、すぐにブラウザで実行できます。本記事では公式ドキュメントを基に、基本操作から応用設定・テスト・デプロイまでをステップごとに解説します。

Create React Appの概要

なぜCRAが選ばれるのか

• 設定ファイルが不要
  Webpack・Babelなど複雑な設定を気にせず、すぐに開発を始められます。
• モダンブラウザ対応
  主要ブラウザを標準サポート。古いブラウザもポリフィルで後付けできます。
• 学習コストが低い
  React初心者でも npm start でホットリロード環境が起動し、変更が即反映されます。

プロジェクトの作成コマンド

npx create-react-app my-app
cd my-app
npm start     # localhost:3000 が自動で開く

以前グローバルに create-react-app を入れていた場合はアンインストールしてから実行してください。

フォルダ構成を理解する

public 内のファイルだけが index.html から直接参照できます。コンポーネントから画像を読み込むときは import するのが基本です。

よく使うスクリプト

npm start         # 開発用サーバー (ホットリロード付き)
npm run build     # 本番ビルド (圧縮・ハッシュ付きファイルを生成)
npm test          # テスト実行 (Jest + Testing Library)
npm run eject     # 設定ファイルを外へ出す※後戻り不可

build で生成されるファイルは build フォルダに出力され、そのまま静的ホスティングへアップロードできます。

ブラウザサポートとポリフィル

• モダンブラウザ（Chrome, Edge, Safari, Firefox）はそのまま対応
• IE11 など古いブラウザ
  react-app-polyfill を追加して index.js の先頭で読み込めば対応可能

npm i react-app-polyfill

import 'react-app-polyfill/ie11';

テスト環境：Jest + Testing Library

CRA には Jest が組み込まれており、npm test ですぐテストを実行できます。

// src/App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('タイトルが表示される', () => {
  render(<App />);
  const heading = screen.getByText(/Hello React/i);
  expect(heading).toBeInTheDocument();
});

*.test.js や *.spec.js というファイル名で自動検出され、ウォッチモードで変更分だけ再テストされます。

環境変数とビルド時の設定

1. ルートに .env ファイルを作成
2. 必ず REACT_APP_ を頭につけて記載

REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=1.0.0

3. アプリ内で参照

const api = process.env.REACT_APP_API_URL;

カスタムテンプレートで拡張

npx create-react-app my-app --template typescript
npx create-react-app my-app --template redux

cra-template-◯◯ 形式で公開されたテンプレートを利用することで、TypeScript、Redux、Styled-Components など好みの初期構成を選べます。

「もっと細かく設定したい」と思ったら

1. npm run eject

設定をすべてプロジェクトに書き出し、Webpack/Babel を自由に編集。取り消しできないため、チームで合意してから行いましょう。

2. 公式が用意した環境変数

INLINE_RUNTIME_CHUNK=false など、ビルド挙動を変える環境変数が用意されています。軽微な調整なら eject せずに対応できます。

デプロイ手順

1. ビルド

npm run build

2. ホスティング
   • GitHub Pages
   • Netlify / Vercel
   • Firebase Hosting
3. SPAルーティング
   ルート以外の URL でも index.html を返す設定が必要。ホスティングごとのリライトルールを追加しましょう。

Q&A：よくある疑問

まとめ

Create React App は「React をすぐ始めたい」「設定で迷いたくない」という開発者の強い味方です。

• インストールは1行：npx create-react-app my-app
• 開発はnpm start、本番はnpm run build
• カスタムテンプレートや環境変数で柔軟に拡張
• 大規模開発や特殊ビルドが必要になったら npm run eject や Vite への移行を検討

まずはサンプルアプリを作り、コンポーネントを編集しながら動作を確かめてみましょう。React の学習がスムーズに進むはずです。