ViteでReact環境を構築する方法

ViteでReact環境を構築すると、初期セットアップの速さ、開発サーバーの起動速度、HMRの軽さ、設定の見通しやすさをまとめて確保しやすい。以前はReact開発を始めるときに大きなビルド設定や重い初期構成を抱えることが多かったが、Viteでは最小構成から始めて、必要に応じてルーティング、状態管理、UIライブラリ、テスト環境を後から積み上げやすい。この記事では、Node.jsの確認からプロジェクト生成、初回起動、ディレクトリ構成、よくあるエラー、最低限入れておくと便利な追加設定までを順番に整理する。

Vite + Reactが向いている場面

Vite + React が向いているのは、次のようなケース。
・まずは素早くReactの開発環境を立ち上げたい
・Webpack設定を最初から細かく触りたくない
・小規模〜中規模のフロント開発を素早く始めたい
・学習用、社内ツール、管理画面、SPA、プロトタイプを軽く作りたい
・必要なら後からTypeScriptやESLint、Routerを追加したい
最初から巨大な構成にしないことで、学習コストと初期トラブルを減らしやすい。

最初に必要なもの

ViteでReact環境を作る前に必要なのは、主に次の3つ。
・Node.js
・npm、pnpm、yarn、bun のいずれかのパッケージマネージャ
・ターミナルが使える環境
特に重要なのはNode.jsのバージョン。古いNode.jsのままだと、create-vite自体は動いても、その後の依存解決や開発サーバー起動で失敗しやすい。

Node.jsのバージョンを確認する

最初にNode.jsが入っているか、またバージョンが足りているか確認する。

node -v
npm -v

Node.jsが入っていない、または古すぎる場合は、先に更新してから進める。
よくあるエラー条件は次の通り。
・node: command not found
・Nodeのバージョンが古く、Viteの要件を満たしていない
・npmはあるがNodeの本体が壊れている
この段階で詰まると、その先のVite作成手順はすべて止まる。

ViteでReactプロジェクトを作成する

最も基本的な作成方法は、create-vite を使ってReactテンプレートを指定する方法。
JavaScript版なら次の形。

npm create vite@latest my-react-app — –template react

TypeScript版なら次の形。

npm create vite@latest my-react-app — –template react-ts

my-react-app は任意のプロジェクト名に置き換えてよい。
現在のディレクトリに直接作りたい場合は、プロジェクト名の代わりに . を使うこともできる。

プロジェクト作成後にやること

Viteで雛形を作った直後は、まだ依存パッケージがローカルに入っていない。
そのため、プロジェクトディレクトリへ移動して依存関係をインストールする。

cd my-react-app
npm install

インストールが終わったら、開発サーバーを起動する。

npm run dev

通常はローカルURLが表示され、ブラウザで開くとReactの初期画面が出る。
ここで起こりやすいエラー条件は、
・npm install を飛ばして npm run dev してしまう
・途中で依存インストールが失敗している
・プロジェクトディレクトリへ移動していない
といったもの。

初回起動時に見るべきポイント

開発サーバーが起動したら、次を確認する。
・ブラウザで初期画面が出るか
・保存すると画面が即時更新されるか
・ターミナルに赤いエラーが出ていないか
・ポート競合が起きていないか
ViteはHMRが軽いのが特徴なので、src/App.jsx や src/App.tsx を少し書き換えてすぐ反映されるかを見ると、環境が正常か判断しやすい。

作成直後のディレクトリ構成を理解する

Vite + React プロジェクトを作ると、最初は比較的シンプルな構成になっている。
主に見る場所は次の通り。
・index.html
・src/main.jsx または src/main.tsx
・src/App.jsx または src/App.tsx
・package.json
・vite.config.js または vite.config.ts
役割としては、main がReactアプリの起点、App が最初の画面コンポーネント、index.html がエントリHTMLになる。
最初にこの役割だけ押さえておくと、その後ルーティングやコンポーネント分割を理解しやすい。

main.jsx と App.jsx の役割

React初心者が最初に混乱しやすいのが main.jsx と App.jsx の違い。
基本的には次のような役割になる。
・main.jsx はReactアプリをDOMへマウントする入口
・App.jsx は最初に表示するコンポーネント
典型的な main.jsx は次のような形になる。

import React from ‘react’
import ReactDOM from ‘react-dom/client’
import App from ‘./App.jsx’

ReactDOM.createRoot(document.getElementById(‘root’)).render(



)

この構造を理解しておくと、後でRouterやProviderをどこに入れるかも分かりやすい。

Reactプラグインの位置づけ

ViteでReactを使う場合、内部ではReact向けプラグインが効いている。
初期テンプレートで生成された vite.config.* には、Reactプラグインの設定が含まれていることが多い。

import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’

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

この設定があることで、JSXの変換やFast Refreshが機能しやすくなる。
設定を不用意に壊すと、開発中の自動更新やビルド自体に影響が出る。

よく使うnpm scriptsを把握する

Vite + Reactを始めたら、まず使うコマンドは次の3つ。
・npm run dev
・npm run build
・npm run preview
dev は開発サーバー起動、build は本番用ビルド、preview はビルド結果の確認に使う。
package.json を見ると次のような形になっていることが多い。

{
“scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“preview”: “vite preview”
}
}

初心者は dev だけで進みがちだが、途中で build まで通しておくと、本番直前のビルドエラーを早めに見つけやすい。

最初に入れておくと便利なもの

初期状態でもReactは動くが、実務や学習を進めやすくするために早めに追加されやすいものがある。
代表例は次の通り。
・React Router
・ESLint
・Prettier
・TypeScript
・状態管理ライブラリ
ただし、最初から全部入れると理解が散るため、まずはReact単体 + Viteで動作確認し、その後必要なものだけ足す方が進めやすい。

React Routerを追加する例

画面遷移を持つアプリにするなら、早い段階で React Router を入れることが多い。

npm install react-router-dom

最小例としては、main.jsx 側で Router を巻く。

import React from ‘react’
import ReactDOM from ‘react-dom/client’
import { BrowserRouter } from ‘react-router-dom’
import App from ‘./App.jsx’

ReactDOM.createRoot(document.getElementById(‘root’)).render(





)

ここでよくあるエラー条件は、
・インストール前にimportしている
・BrowserRouter で囲っていないのに Link や Routes を使っている
・ルーティングの定義ファイル構成が途中で崩れる
といったもの。

CSSの扱い方

ViteのReactテンプレートでは、初期状態で src/index.css や src/App.css が用意されていることが多い。
最初はこのままでも問題ないが、規模が大きくなると、
・コンポーネントごとにCSSを分ける
・CSS Modulesを使う
・Tailwind CSSを導入する
といった構成が選ばれやすい。
ただし、最初からスタイル戦略を重くしすぎると、React本体の理解より設定理解に時間がかかる。
そのため、まずは通常のCSS import で十分。

ビルドして本番用ファイルを確認する

開発サーバーだけでなく、本番ビルドが通るかも確認しておくと安心しやすい。

npm run build

成功すると、通常は dist ディレクトリが作成される。
中には本番配信用のHTML、JS、CSSが出力される。

npm run preview

これで本番ビルド結果をローカルで確認できる。
発生しやすい問題は、
・開発中は動くが build で型やimportの問題が出る
・相対パスや環境変数の扱いが崩れる
・未使用だと思っていたコードがビルド時に失敗要因になる
といったもの。

よくあるエラーと発生条件

ViteでReact環境を作るときによくある問題は次の通り。
・node: command not found
→ Node.js未導入
・npm create vite は通るがその後失敗
→ Node.jsが古い
・npm install で止まる
→ ネットワーク、権限、package managerの不整合
・npm run dev でポート競合
→ 5173番などが既に使用中
・ブラウザで真っ白
→ importエラー、main/Appの構造崩れ、JSXの文法ミス
・npm run build だけ失敗
→ importパス、設定ファイル、環境変数の問題
最初の段階では「create できたか」より「install・dev・build が全部通るか」を見る方が確実。

初心者向けの最短手順まとめ

最短でVite + React環境を作るなら、流れは次の通り。

node -v
npm -v

npm create vite@latest my-react-app — –template react
cd my-react-app
npm install
npm run dev

TypeScriptで始めたいなら次の形。

npm create vite@latest my-react-app — –template react-ts
cd my-react-app
npm install
npm run dev

その後、必要なら次を追加する。

npm install react-router-dom
npm run build
npm run preview

まとめ

ViteでReact環境を構築する手順は、
・Node.jsの確認
・create-viteでプロジェクト生成
・依存インストール
・開発サーバー起動
・必要に応じてRouterやTypeScript追加
という流れで進めると分かりやすい。
Viteの強みは、初期構成が軽く、起動が速く、必要なものだけ後から足しやすい点にある。
そのため、最初は最小構成で動かし、dev と build の両方が通る状態を作ってから、ルーティングや状態管理へ進む方が無理が少ない。