【2026年版】Viteで始めるReact開発環境の構築方法 – 最速セットアップガイド

はじめに

こんにちは、優也@月収100万を目指して月100時間勉強する男　です。

前回の記事「【React入門】未経経験からReactを学んで最初のTODOアプリを作った話」では、React学習の体験談をお話ししました。今回は実際に手を動かして、React開発環境を構築していきます。

2025年現在、Reactの開発環境構築には**Vite(ヴィート)**を使うのが主流です。従来のCreate React App(CRA)はメンテナンスが停止しており、React公式ドキュメントでもViteやNext.jsが推奨されています。

この記事では、完全初心者でも迷わないように、Viteを使ったReact開発環境の構築手順を丁寧に解説します。

Viteとは?

Vite(ヴィート、フランス語で「速い」の意味)は、モダンなフロントエンド開発ツールです。

Viteの特徴

• ⚡ 起動が爆速: 開発サーバーが数秒で立ち上がる
• 🔥 ホットリロードが高速: コード変更がすぐに反映される
• 📦 軽量: 必要最小限の設定とファイル
• 🎯 モダン: 最新のJavaScript機能に対応

Create React Appとの比較

必要な環境

開発を始める前に、以下がインストールされているか確認してください。

Node.jsのインストール

Viteを使うにはNode.js 18.0以上が必要です。

確認方法:

node -v

node -v

バージョンが表示されればOKです。例: v20.10.0

インストールしていない場合:

1. Node.js公式サイトにアクセス
2. LTS版(推奨版)をダウンロード
3. インストーラーの指示に従ってインストール

エディタの準備

Visual Studio Codeを推奨します(無料):

• VS Code公式サイトからダウンロード
• シンタックスハイライトや自動補完が便利

おすすめ拡張機能:

• ES7+ React/Redux/React-Native snippets
• Prettier – Code formatter

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

それでは実際にプロジェクトを作成していきましょう。

Step 1: プロジェクトの作成

ターミナル(WindowsはコマンドプロンプトまたはPowerShell)を開いて、以下のコマンドを実行します:

npm create vite@latest
```

###対話形式での設定

コマンドを実行すると、いくつか質問されます:

**1. プロジェクト名を入力**
```
? Project name: › my-react-app
```
好きな名前を入力してEnter。ここでは`my-react-app`とします。

**2. フレームワークを選択**
```
? Select a framework: › 
  Vanilla
  Vue
❯ React
  Preact
  Lit
  Svelte
  Others
```
矢印キーで`React`を選んでEnter。

**3. バリアントを選択**
```
? Select a variant: › 
❯ JavaScript
  TypeScript
  JavaScript + SWC
  TypeScript + SWC

npm create vite@latest
```

###対話形式での設定

コマンドを実行すると、いくつか質問されます:

**1. プロジェクト名を入力**
```
? Project name: › my-react-app
```
好きな名前を入力してEnter。ここでは`my-react-app`とします。

**2. フレームワークを選択**
```
? Select a framework: › 
  Vanilla
  Vue
❯ React
  Preact
  Lit
  Svelte
  Others
```
矢印キーで`React`を選んでEnter。

**3. バリアントを選択**
```
? Select a variant: › 
❯ JavaScript
  TypeScript
  JavaScript + SWC
  TypeScript + SWC

最初はJavaScriptを選択。(TypeScriptは後から学びます)

Step 3: プロジェクトディレクトリに移動

bash

cd my-react-app

cd my-react-app

Step 4: 依存パッケージのインストール

bash

npm install

npm install

これで必要なパッケージがすべてインストールされます。(1-2分かかります)

Step 5: 開発サーバーの起動

bash

npm run dev
```

成功すると、以下のような表示が出ます:
```
  VITE v5.0.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
```

**ブラウザで `http://localhost:5173/` を開いてください。**

Viteのデフォルト画面が表示されれば成功です!🎉

## プロジェクト構造の理解

作成されたプロジェクトのフォルダ構造を見てみましょう:
```
my-react-app/
├── node_modules/      <em># 依存パッケージ(触らない)</em>
├── public/            <em># 静的ファイル置き場</em>
├── src/               <em># ソースコード置き場</em>
│   ├── assets/        <em># 画像などのリソース</em>
│   ├── App.css        <em># Appコンポーネントのスタイル</em>
│   ├── App.jsx        <em># メインコンポーネント</em>
│   ├── index.css      <em># グローバルスタイル</em>
│   └── main.jsx       <em># エントリーポイント</em>
├── index.html         <em># HTMLファイル</em>
├── package.json       <em># プロジェクト設定</em>
└── vite.config.js     <em># Vite設定ファイル</em>

npm run dev
```

成功すると、以下のような表示が出ます:
```
  VITE v5.0.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
```

**ブラウザで `http://localhost:5173/` を開いてください。**

Viteのデフォルト画面が表示されれば成功です!🎉

## プロジェクト構造の理解

作成されたプロジェクトのフォルダ構造を見てみましょう:
```
my-react-app/
├── node_modules/      <em># 依存パッケージ(触らない)</em>
├── public/            <em># 静的ファイル置き場</em>
├── src/               <em># ソースコード置き場</em>
│   ├── assets/        <em># 画像などのリソース</em>
│   ├── App.css        <em># Appコンポーネントのスタイル</em>
│   ├── App.jsx        <em># メインコンポーネント</em>
│   ├── index.css      <em># グローバルスタイル</em>
│   └── main.jsx       <em># エントリーポイント</em>
├── index.html         <em># HTMLファイル</em>
├── package.json       <em># プロジェクト設定</em>
└── vite.config.js     <em># Vite設定ファイル</em>

重要なファイル解説

src/main.jsx – アプリのエントリーポイント

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

ここでReactアプリが起動します。基本的に触りません。

src/App.jsx – メインコンポーネント

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <em>// JSXコード</em>
  )
}

export default App

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <em>// JSXコード</em>
  )
}

export default App

ここを編集して、自分のアプリを作っていきます。

index.html – HTMLテンプレート

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

タイトルなどを変更できます。

Hello Worldを表示してみる

では実際にコードを編集してみましょう。

Step 1: App.jsxを開く

VS Codeでsrc/App.jsxを開きます。

Step 2: コードを書き換える

既存のコードをすべて削除して、以下のコードに書き換えます:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Viteで作った最初のReactアプリです。</p>
    </div>
  );
}

export default App;

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Viteで作った最初のReactアプリです。</p>
    </div>
  );
}

export default App;

Step 3: ファイルを保存

Ctrl + S (Macは Cmd + S)で保存します。

Step 4: ブラウザで確認

ブラウザに戻ると、自動的に画面が更新されています!

これがViteのホットリロード機能です。コードを変更すると、即座にブラウザに反映されます。

よく使うコマンド

Reactアプリ開発でよく使うコマンドをまとめます:

開発サーバーの起動

bash

npm run dev

開発中はずっとこのコマンドを実行したままにします。

開発サーバーの停止

ターミナルで Ctrl + C を押します。

ホットリロードが効かない

1. ファイルを保存しているか確認
2. 開発サーバーが起動しているか確認
3. ダメなら開発サーバーを再起動(Ctrl + C → npm run dev)

まとめ

Viteを使ったReact開発環境の構築方法を解説しました。

手順のおさらい:

1. Node.jsをインストール
2. npm create vite@latestでプロジェクト作成
3. npm installで依存パッケージをインストール
4. npm run devで開発サーバー起動

Viteのメリット:

• ⚡ 起動が速い(2-3秒)
• 🔥 ホットリロードが即座
• 📦 軽量でシンプル
• 🎯 2025年の標準ツール

次回は、この環境を使って実際にTODOアプリを作っていきます。まずはプロジェクトの初期設定から、タスクの表示までを実装します!

この記事のシリーズ:

1. 【React入門】未経験からReactを学んで最初のTODOアプリを作った話
2. 【2025年版】Viteで始めるReact開発環境の構築方法 ← 今ここ
3. 【React基礎】useStateとは?初心者向けに分かりやすく解説(次回)

次のステップ

環境構築ができたら、次はReactの基本であるuseStateを学びましょう。Reactでデータを管理する仕組みを理解することが、アプリ開発の第一歩です。

あとがき

月100時間の学習時間の中で、今月はReactに集中して取り組んでいます。Instagramでは、Instagramでは、フリーランスとして月収100万円を目指す道のりを、リアルタイムで発信していきますので、ぜひフォローしてください!