WindowsでReactをインストールする方法 – 初心者向け完全ガイド

「Reactを始めたいけど、どこから手をつけていいかわからない」
「Windowsでの環境構築が難しそう…」
「プログラミング初心者でもReactは使えるの？」

そんなあなたのために、WindowsでReactを始める方法をゼロからわかりやすく説明します。

この記事でわかること
Reactって何？なぜ使うの？
1. Reactの特徴
2. Reactが人気な理由
事前準備：必要なソフトウェア
1. テキストエディタ（推奨：Visual Studio Code）
2. Node.jsとは？
Node.jsをインストールしよう
初めてのReactアプリを作ろう
Reactアプリを起動してみよう
VSCodeで開発を始めよう
初めてのコード編集
1. App.jsを編集してみよう
2. 状態を使ったインタラクティブなアプリ
よくある問題と解決方法
本格的な開発のための追加設定
まとめ

この記事でわかること

Reactとは何か、なぜ人気なのか
Windows環境での開発準備
Node.jsとnpmのインストール方法
初めてのReactアプリの作成と実行
開発を快適にするツールの設定
よくある問題と解決方法

Reactって何？なぜ使うの？

Reactの特徴

Reactとは： ユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。

普通のWebサイトとの違い：

<!-- 従来のHTML（静的） -->
<div>
  <h1>こんにちは</h1>
  <p>ボタンを押してください</p>
  <button>クリック</button>
</div>

// React（動的）
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>こんにちは</h1>
      <p>クリック回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

Reactが人気な理由

コンポーネント化: パーツごとに分けて管理できる
再利用性: 一度作った部品を何度でも使える
高速: 効率的に画面を更新する
豊富な情報: 学習資料やライブラリが充実

事前準備：必要なソフトウェア

テキストエディタ（推奨：Visual Studio Code）

VSCodeのインストール：

Visual Studio Code公式サイトにアクセス
「Download for Windows」をクリック
ダウンロードしたファイルを実行してインストール

初期設定：

インストール時に「PATHに追加」にチェック
「コンテキストメニューに追加」もチェック推奨

Node.jsとは？

Node.js： JavaScriptをブラウザ以外でも実行できるようにするソフトウェアです。
Reactの開発には必須です。

npm（Node Package Manager）： Node.jsに付属する、ライブラリ管理ツールです。ReactやほかのJavaScriptライブラリをインストールするのに使います。

Node.jsをインストールしよう

ダウンロードとインストール

手順：

Node.js公式サイトにアクセス
「LTS」（推奨版）をクリックしてダウンロード
- LTS = Long Term Support（長期サポート版）
- 安定していて初心者におすすめ
ダウンロードした.msiファイルを実行

インストール時の設定：

基本的にすべて「次へ」でOK
「Automatically install the necessary tools」にチェック推奨
「Add to PATH」が選択されていることを確認

インストール確認

コマンドプロンプトを開く：

Windows キー + R を押す
cmd と入力して Enter
黒い画面（コマンドプロンプト）が開く

バージョン確認：

node -v

結果例：

v20.10.0

npmの確認：

npm -v

結果例：

10.2.3

両方でバージョン番号が表示されれば成功です！

PowerShellの使用（推奨）

PowerShellを開く：

Windows キー + X を押す
「Windows PowerShell」または「ターミナル」を選択

PowerShellの方が便利な理由：

色分け表示がある
コピー＆ペーストが簡単
より多くの機能がある

初めてのReactアプリを作ろう

Create React Appとは？

Create React App： Reactアプリを簡単に作れる公式ツールです。
複雑な設定を自動で行ってくれます。

従来の方法との違い：

手動設定: Webpack、Babel、ESLint などを個別に設定（難しい）
Create React App: すべて自動設定（簡単）

プロジェクトの作成

作業フォルダの準備：

# デスクトップに移動
cd Desktop

# 開発用フォルダを作成（任意）
mkdir react-projects

cd react-projects

Reactアプリの作成：

npx create-react-app my-first-app

コマンドの説明：

npx: npm付属の実行ツール（ダウンロード→実行→削除）
create-react-app: Reactアプリ作成ツール
my-first-app: プロジェクト名（好きな名前でOK）

処理中の画面：

Creating a new React app in C:\Users\YourName\Desktop\react-projects\my-first-app...

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

完了メッセージ：

Success! Created my-first-app at C:\Users\YourName\Desktop\react-projects\my-first-app

We suggest that you begin by typing:
  cd my-first-app
  npm start

プロジェクト構造の確認

作成されるファイル：

my-first-app/
├── public/
│   ├── index.html      # メインHTMLファイル
│   └── favicon.ico     # サイトアイコン
├── src/
│   ├── App.js          # メインReactコンポーネント
│   ├── App.css         # スタイルファイル
│   ├── index.js        # エントリーポイント
│   └── index.css       # グローバルスタイル
├── package.json        # プロジェクト設定
└── README.md          # 説明書

Reactアプリを起動してみよう

開発サーバーの起動

プロジェクトフォルダに移動：

cd my-first-app

開発サーバー起動：

npm start

起動中の画面：

Compiled successfully!

You can now view my-first-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.100:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled with warnings in 2345ms

自動でブラウザが開きます：

URL: http://localhost:3000
Reactのロゴがくるくる回る画面が表示されれば成功！

初回実行時のセキュリティ確認

Windows Defenderの警告が出る場合：

「詳細情報」をクリック
「実行」をクリック
「このネットワークでのアクセスを許可する」にチェック

ファイアウォールの設定： Node.jsがネットワークアクセスを求めた場合は「許可」してください。

開発サーバーの停止

停止方法： コマンドプロンプトまたはPowerShellで Ctrl + C を押す

確認メッセージ：

Terminate batch job (Y/N)?

Y を入力して Enter

VSCodeで開発を始めよう

プロジェクトをVSCodeで開く

方法1: コマンドライン

# プロジェクトフォルダで実行
code .

方法2: VSCodeから

VSCodeを起動
「ファイル」→「フォルダーを開く」
my-first-appフォルダを選択

便利な拡張機能のインストール

必須の拡張機能：

ES7+ React/Redux/React-Native snippets
- Reactのコードを素早く書ける
- rce + Tab で関数コンポーネントの雛形
Prettier – Code formatter
- コードを自動で整形
- 保存時に自動実行
Auto Rename Tag
- HTMLタグの開始・終了を同時に変更
Bracket Pair Colorizer 2
- 括弧を色分けして見やすくする

インストール方法：

VSCodeのサイドバーで拡張機能アイコンをクリック
拡張機能名を検索
「インストール」をクリック

VSCodeの設定

settings.jsonの設定：

Ctrl + Shift + P でコマンドパレットを開く
「Preferences: Open Settings (JSON)」を検索
以下を追加：

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

初めてのコード編集

App.jsを編集してみよう

元のコード（src/App.js）：

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

簡単な変更例：

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>私の最初のReactアプリ</h1>
        <p>Reactの勉強を始めました！</p>
        <button>クリックしてみて</button>
      </header>
    </div>
  );
}

export default App;

保存後の確認： ファイルを保存（Ctrl + S）すると、ブラウザが自動で更新されます（ホットリロード機能）。

状態を使ったインタラクティブなアプリ

カウンターアプリの作成：

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

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>カウンターアプリ</h1>
        <p>現在の数: {count}</p>
        <button onClick={handleClick}>
          +1する
        </button>
        <button onClick={() => setCount(0)}>
          リセット
        </button>
      </header>
    </div>
  );
}

export default App;

コードの説明：

useState: Reactの状態管理フック
count: 現在の値
setCount: 値を更新する関数
onClick: クリック時に実行される関数

よくある問題と解決方法

Q1: npm startが動かない

症状：

'npm' is not recognized as an internal or external command

解決方法：

Node.jsが正しくインストールされているか確認
コマンドプロンプトを再起動
環境変数PATHにNode.jsが含まれているか確認

Q2: ポート3000が使用中エラー

症状：

Something is already running on port 3000.

解決方法：

# 別のポートで起動
set PORT=3001 && npm start

# または、使用中のプロセスを終了
netstat -ano | findstr :3000
taskkill /PID [プロセスID] /F

Q3: 権限エラーが出る

症状：

EACCES: permission denied

解決方法：

# 管理者権限でコマンドプロンプトを開く
# または、npmのフォルダ権限を変更
npm config set cache C:\tmp\npm-cache --global

Q4: ファイアウォールのブロック

症状： ブラウザでlocalhost:3000にアクセスできない

解決方法：

Windows Defenderファイアウォールを開く
「アプリまたは機能を許可」
Node.jsを許可リストに追加

Q5: 日本語が文字化けする

解決方法：

# コマンドプロンプトで文字コード変更
chcp 65001

VSCodeでの設定：

ファイル下部の文字コード表示をクリック
「UTF-8」を選択

本格的な開発のための追加設定

Gitの設定

Gitのインストール：

Git公式サイトからダウンロード
インストール時は基本的にデフォルト設定でOK

初期設定：

git config --global user.name "あなたの名前"
git config --global user.email "your.email@example.com"

プロジェクトの初期化：

cd my-first-app
git init
git add .
git commit -m "Initial commit"

パッケージの追加

よく使うライブラリの例：

React Router（ページ遷移）：

npm install react-router-dom

Axios（API通信）：

npm install axios

Material-UI（UIコンポーネント）：

npm install @mui/material @emotion/react @emotion/styled

本番環境用ビルド

ビルドコマンド：

npm run build

生成される内容：

build/フォルダに最適化されたファイル
Webサーバーにアップロード可能
ファイルサイズが最小化される

まとめ

WindowsでReactを始めることは、思っているより簡単です。

正しい手順で環境を整えれば、誰でもモダンなWebアプリケーション開発ができるようになります。

この記事のポイント：

Node.jsとnpmをインストールする
Create React Appで簡単にプロジェクト作成
VSCodeと拡張機能で開発環境を快適に
npm startで即座に開発開始
問題が起きても解決方法がある

この記事でわかること

Reactって何？なぜ使うの？

Reactの特徴

Reactが人気な理由

事前準備：必要なソフトウェア

テキストエディタ（推奨：Visual Studio Code）

Node.jsとは？

Node.jsをインストールしよう

ダウンロードとインストール

インストール確認

PowerShellの使用（推奨）

初めてのReactアプリを作ろう

Create React Appとは？

プロジェクトの作成

プロジェクト構造の確認

Reactアプリを起動してみよう

開発サーバーの起動

初回実行時のセキュリティ確認

開発サーバーの停止

VSCodeで開発を始めよう

プロジェクトをVSCodeで開く

便利な拡張機能のインストール

VSCodeの設定

初めてのコード編集

App.jsを編集してみよう

状態を使ったインタラクティブなアプリ

よくある問題と解決方法

Q1: npm startが動かない

Q2: ポート3000が使用中エラー

Q3: 権限エラーが出る

Q4: ファイアウォールのブロック

Q5: 日本語が文字化けする

本格的な開発のための追加設定

Gitの設定

パッケージの追加

本番環境用ビルド

まとめ

Youtube

カテゴリー別人気記事

コメント