はじめに

前回の記事では、Reactの基本概念について解説しました。本記事では、実際にReact開発を始めるための環境構築手順を解説します。

2025年現在、Reactプロジェクトを始める際の標準的な選択肢は「Vite」です。かつてはCreate React App（CRA）が公式推奨でしたが、React公式ドキュメントではViteをはじめとするモダンなビルドツールの使用を推奨しています。

本記事を読むことで、以下のことができるようになります。

  • Node.jsのインストールと確認
  • Viteを使ったReactプロジェクトの作成
  • VS Codeの最適な設定と推奨拡張機能の導入
  • 開発サーバーの起動とホットリロードの体験

実行環境・前提条件

必要な環境

  • OS：Windows 10/11、macOS 12以上、またはLinux（Ubuntu 20.04以上推奨）
  • メモリ：4GB以上（8GB推奨）
  • ディスク容量：10GB以上の空き容量

前提知識

  • ターミナル（コマンドプロンプト、PowerShell、bash）の基本操作
  • HTMLとJavaScriptの基礎知識

Node.jsのインストール

ReactはNode.js上で動作する開発ツールを使用するため、まずNode.jsをインストールします。

Node.jsとは

Node.jsは、JavaScriptをブラウザ外で実行するためのランタイム環境です。React開発では、以下の用途で使用します。

  • パッケージ管理（npm / yarn / pnpm）
  • 開発サーバーの起動
  • ビルドツールの実行
  • TypeScriptのコンパイル

推奨バージョン

2025年12月現在、以下のバージョンを推奨します。

  • Node.js 20.x LTS（Long Term Support）
  • Node.js 22.x（最新機能が必要な場合）

LTS（長期サポート）版は安定性が高く、本番環境での使用に適しています。

Windowsでのインストール

公式サイトからインストーラーをダウンロードする方法が最も簡単です。

  1. Node.js公式サイトにアクセス
  2. 「LTS」と記載されたバージョンの「Download」ボタンをクリック
  3. ダウンロードしたインストーラーを実行
  4. ウィザードに従ってインストール（デフォルト設定のままで問題ありません）

インストール完了後、PowerShellまたはコマンドプロンプトを開いて確認します。

1
2
3
4
5

node --version
# 出力例: v20.18.0

npm --version
# 出力例: 10.8.2

macOSでのインストール

macOSでは、Homebrewを使用したインストールが便利です。

1
2
3
4
5
6
7
8
9

# Homebrewがインストールされていない場合は先にインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.jsのインストール
brew install node@20

# バージョン確認
node --version
npm --version

バージョン管理ツールの活用

複数のプロジェクトで異なるNode.jsバージョンを使い分ける場合は、バージョン管理ツールの導入をおすすめします。

nvm（Node Version Manager）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Node.js 20のインストール
nvm install 20

# バージョンの切り替え
nvm use 20

# デフォルトバージョンの設定
nvm alias default 20

Windowsの場合はnvm-windows

nvm-windowsをダウンロードし、インストーラーを実行します。

1
2
3
4
5

# Node.js 20のインストール
nvm install 20

# バージョンの切り替え
nvm use 20

Viteを使ったReactプロジェクトの作成

Node.jsのインストールが完了したら、Viteを使ってReactプロジェクトを作成します。

Viteとは

Viteは、フランス語で「速い」を意味する次世代フロントエンドビルドツールです。Evan You（Vue.jsの作者）によって開発され、以下の特徴を持ちます。

  • 高速な開発サーバー起動：ESモジュールのネイティブサポートにより、依存関係の事前バンドルが不要
  • 高速なホットモジュールリプレースメント（HMR）：変更がミリ秒単位で反映
  • 最適化されたビルド：本番環境向けにRollupを使用した効率的なバンドル
  • TypeScript対応：追加設定なしでTypeScriptが使用可能

プロジェクトの作成

任意のディレクトリで以下のコマンドを実行します。

1

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

このコマンドの意味は以下のとおりです。

  • npm create vite@latest：最新のViteプロジェクト作成ツールを実行
  • my-react-app：プロジェクト名（任意の名前に変更可能）
  • -- --template react：Reactテンプレートを使用

TypeScriptを使用する場合

TypeScriptでプロジェクトを作成する場合は、以下のコマンドを使用します。

1

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

対話形式での作成

テンプレートを指定せずにコマンドを実行すると、対話形式でオプションを選択できます。

1

npm create vite@latest

以下の項目を順に選択します。

? Project name: my-react-app
? Select a framework: React
? Select a variant: JavaScript (または TypeScript)

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

プロジェクトディレクトリに移動し、依存パッケージをインストールします。

1
2

cd my-react-app
npm install

期待される結果

インストール完了後、以下のディレクトリ構造が生成されます。

my-react-app/
├── node_modules/          # 依存パッケージ
├── public/                # 静的ファイル
│   └── vite.svg
├── src/                   # ソースコード
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js       # ESLint設定
├── index.html             # エントリーポイント
├── package.json           # プロジェクト設定
├── package-lock.json
├── README.md
└── vite.config.js         # Vite設定

プロジェクト構成の解説

生成されたファイルの役割を理解しておきましょう。

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!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>

このHTMLファイルがアプリケーションのエントリーポイントです。<div id="root"></div>がReactアプリケーションのマウント先となります。

src/main.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

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

このファイルでReactアプリケーションを初期化し、DOMにマウントしています。StrictModeは開発時に潜在的な問題を検出するためのラッパーコンポーネントです。

src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to see HMR in action.
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

これがメインのReactコンポーネントです。useStateを使ったカウンター機能が実装されています。

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "vite": "^6.0.5"
  }
}

scriptsセクションで定義されているコマンドは以下のとおりです。

  • npm run dev：開発サーバーを起動
  • npm run build：本番用にビルド
  • npm run lint：コードの静的解析
  • npm run preview：ビルド結果をプレビュー

開発サーバーの起動

いよいよReactアプリケーションを起動します。

1

npm run dev

期待される結果

以下のような出力が表示されます。

  VITE v6.0.5  ready in 200 ms

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

ブラウザでhttp://localhost:5173/にアクセスすると、ViteとReactのロゴ、カウンターボタンが表示されます。

ホットモジュールリプレースメント（HMR）の体験

開発サーバーを起動したまま、src/App.jsxを編集してみましょう。

1
2

// h1タグのテキストを変更
<h1>Hello, React!</h1>

ファイルを保存すると、ブラウザを手動でリロードすることなく、変更が即座に反映されます。これがHMRの威力です。

VS Codeの設定と推奨拡張機能

効率的なReact開発のために、VS Codeの設定を最適化しましょう。

必須拡張機能

以下の拡張機能をインストールすることを強く推奨します。

ES7+ React/Redux/React-Native snippets

Reactコンポーネントのスニペットを提供します。rafceと入力するだけで、アロー関数コンポーネントのテンプレートが生成されます。

1
2
3
4
5
6
7
8

// rafce と入力してTabキーを押すと生成される
const ComponentName = () => {
  return (
    <div>ComponentName</div>
  )
}

export default ComponentName

ESLint

JavaScriptのコード品質をチェックし、問題を自動検出します。

Prettier - Code formatter

コードを自動整形し、一貫したスタイルを維持します。

Auto Rename Tag

HTMLタグを編集すると、対応する閉じタグも自動で更新されます。JSXでも機能します。

Error Lens

エラーや警告をコード行内にインラインで表示します。問題の発見が容易になります。

推奨設定

VS Codeの設定ファイル（settings.json）に以下を追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

これにより、以下の機能が有効になります。

  • ファイル保存時に自動フォーマット
  • ESLintエラーの自動修正
  • JSXファイルでのEmmet展開

プロジェクト固有の設定

プロジェクトルートに.vscode/settings.jsonを作成すると、プロジェクト固有の設定を適用できます。

1
2
3
4
5
6
7

{
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.tabSize": 2,
  "files.exclude": {
    "node_modules": true
  }
}

よくあるトラブルと解決策

環境構築時によく発生する問題と解決方法を紹介します。

npm installでエラーが発生する

症状：EACCESやEPERMエラーが表示される

原因：権限の問題

解決策：

1
2
3

# Windowsの場合は管理者権限でPowerShellを実行
# macOS/Linuxの場合
sudo chown -R $(whoami) ~/.npm

ポート5173が使用中

症状：Port 5173 is already in use

解決策：別のポートを使用する

1

npm run dev -- --port 3000

またはvite.config.jsでポートを指定します。

1
2
3
4
5
6
7
8
9

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

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

node_modulesの問題

症状：不明なエラーが多発する

解決策：node_modulesを削除して再インストール

1
2
3
4
5

# node_modulesとロックファイルを削除
rm -rf node_modules package-lock.json

# 再インストール
npm install

パッケージマネージャーの選択肢

npmの代わりに、より高速なパッケージマネージャーを使用することもできます。

pnpm

ディスク容量を節約しながら高速にパッケージをインストールできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# pnpmのインストール
npm install -g pnpm

# プロジェクト作成
pnpm create vite my-react-app --template react

# 依存パッケージのインストール
cd my-react-app
pnpm install

# 開発サーバーの起動
pnpm dev

yarn

Facebookが開発したパッケージマネージャーです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# yarnのインストール
npm install -g yarn

# プロジェクト作成
yarn create vite my-react-app --template react

# 依存パッケージのインストール
cd my-react-app
yarn

# 開発サーバーの起動
yarn dev

まとめ

本記事では、Viteを使ったReact開発環境の構築手順を解説しました。

  • Node.jsのインストール：LTS版（20.x）を推奨、nvmでバージョン管理が可能
  • Viteプロジェクトの作成：npm create vite@latestコマンドで簡単に開始
  • プロジェクト構成：index.html、main.jsx、App.jsxの役割を理解
  • 開発サーバー：HMRによる高速な開発体験
  • VS Code設定：ESLint、Prettier、スニペット拡張機能で効率化

これで、React開発を始めるための環境が整いました。次の記事では、ReactのUI記述に使用するJSXの文法について詳しく解説します。

参考リンク