環境構築

この章では、React 開発に必要な環境を一からセットアップします。 Node.js のインストールから Vite でのプロジェクト作成、開発サーバーの起動、そして Tomcat デプロイを見据えた設定までを解説します。

2026年時点の推奨スタック

学習開始時に迷いやすいポイントを先に整理します。本ガイドは Vite ベースで解説しており、Create React App（CRA）は前提にしていません。

新規案件は Vite + TypeScript を第一候補にする
要件に応じて Next.js / Remix などの React フレームワークも検討する
React 19 の新機能（React Compiler など）は公式ドキュメントを併読する

この章のコード例は理解しやすさを優先して JavaScript 版で進めます。実運用では TypeScript テンプレート（--template react-ts）を推奨します。

参考: CRA の段階的終了（React 公式） / TypeScript（React 公式） / React Compiler 1.0（React 公式）

Node.js のインストール

React の開発には Node.js が必要です。 Node.js は JavaScript をブラウザ外で実行するためのランタイムで、開発ツール（Vite）やパッケージマネージャ（npm）の実行に使います。

React アプリ自体はブラウザで動作する JavaScript です。 Node.js は開発時のツール実行（ビルド、開発サーバー、パッケージ管理）にのみ使用します。本番の Tomcat サーバーに Node.js をインストールする必要はありません。

公式サイトからダウンロード
https://nodejs.org/ にアクセスし、 LTS（Long Term Support） 版をダウンロードしてください。このガイドでは Node.js 20 以上を前提としています。
インストーラーを実行
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールします。デフォルトの設定のまま進めて問題ありません。

インストールの確認

ターミナル（Windows の場合はコマンドプロンプトまたは PowerShell）で以下を実行します。

ターミナル

# Node.js のバージョン確認
node -v
# 出力例: v20.11.0

# npm のバージョン確認（Node.js に同梱）
npm -v
# 出力例: 10.2.4

node -v でバージョンが表示されない場合は、ターミナルを再起動してください。それでも表示されない場合は、Node.js のインストールに失敗している可能性があります。パスが正しく設定されているか確認しましょう。

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

Vite（ヴィート）は、高速な開発サーバーとビルドツールを提供するフロントエンド開発ツールです。従来の Create React App（CRA）に代わり、React 公式ドキュメントでも推奨されている方法です。

作成手順

プロジェクトを作成したいディレクトリに移動

ターミナル

# 例: ホームディレクトリの projects フォルダに移動
cd ~/projects

Vite の作成コマンドを実行

ターミナル

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

このコマンドの意味は次の通りです。

部分	説明
`npm create`	`npm init` のエイリアス。パッケージの初期化を行う
`vite@latest`	最新版の Vite を使用
`my-app`	プロジェクト名（任意の名前に変更可能）
`--`	npm のオプションと Vite のオプションの区切り
`--template react`	React テンプレートを使用

TypeScript を使いたい場合は --template react-ts を指定します。このガイドでは JavaScript 版を使用しますが、実際のプロジェクトでは TypeScript の採用を強く推奨します。

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

ターミナル

# 作成されたプロジェクトに移動
cd my-app

# 依存パッケージをインストール
npm install

npm install を実行すると、package.json に記載された依存パッケージが node_modules/ ディレクトリにダウンロードされます。

プロジェクトのディレクトリ構成

作成されたプロジェクトのディレクトリ構成は次の通りです。

ディレクトリ構成

my-app/
├── node_modules/        # 依存パッケージ（Git 管理外）
├── public/              # 静的ファイル（そのまま配信される）
│   └── vite.svg
├── src/                 # ソースコード（ここを主に編集する）
│   ├── assets/
│   │   └── react.svg
│   ├── App.css          # App コンポーネントのスタイル
│   ├── App.jsx          # メインのコンポーネント
│   ├── index.css        # グローバルスタイル
│   └── main.jsx         # エントリーポイント
├── index.html           # HTML テンプレート（Vite のエントリー）
├── package.json         # プロジェクト設定・依存関係
├── vite.config.js       # Vite の設定ファイル
└── eslint.config.js     # ESLint の設定ファイル

主要ファイルの解説

index.html — アプリケーションの起点となる HTML ファイルです。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

<div id="root"> が React アプリがマウントされる場所です。 <script> タグで main.jsx を読み込み、ここから React アプリが起動します。

src/main.jsx — React アプリケーションのエントリーポイントです。

src/main.jsx

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

このファイルの役割は次の通りです。

createRoot で #root 要素に React アプリをマウント
StrictMode は開発時に潜在的な問題を検出するためのラッパー（本番ビルドでは無効）
App コンポーネントがアプリ全体のルートコンポーネント

src/App.jsx — アプリケーションのメインコンポーネントです。

src/App.jsx

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 (
    <>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount(count + 1)}>
          count is {count}
        </button>
      </div>
    </>
  )
}

export default App

vite.config.js — Vite の設定ファイルです。

vite.config.js

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

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

開発サーバーの起動

ターミナル

npm run dev

実行すると、次のような出力が表示されます。

出力

  VITE v6.x.x  ready in 300 ms

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

ブラウザで http://localhost:5173/ にアクセスすると、 Vite + React のデフォルト画面が表示されます。カウンターボタンをクリックして動作を確認してみましょう。

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

Vite の開発サーバーは HMR（Hot Module Replacement） をサポートしています。ソースコードを保存すると、ページ全体をリロードせずに変更部分だけがブラウザに即座に反映されます。

試しに src/App.jsx の <h1> タグのテキストを変更して保存してみましょう。

src/App.jsx（一部変更）

// 変更前
<h1>Vite + React</h1>

// 変更後
<h1>はじめての React アプリ</h1>

保存した瞬間にブラウザの表示が更新されます。ページ全体のリロードではないため、コンポーネントの state（カウンターの値など）は保持されたまま更新されます。これにより、非常に効率的な開発が可能です。

開発サーバーを停止するには、ターミナルで Ctrl + C を押します。

VS Code 推奨拡張機能

React 開発には Visual Studio Code（VS Code） の使用を推奨します。以下の拡張機能をインストールすると、開発効率が大幅に向上します。

拡張機能	説明
ES7+ React/Redux/React-Native snippets	React コンポーネントのスニペット。`rafce` と入力するだけでアロー関数コンポーネントのテンプレートが生成される
Prettier - Code formatter	コードを自動整形してくれるフォーマッター。チーム開発でのコードスタイル統一に必須
ESLint	JavaScript / JSX のコード品質チェック。潜在的なバグや非推奨パターンを検出
Auto Rename Tag	開きタグを変更すると閉じタグも自動で変更される。JSX 編集時に便利
Simple React Snippets	シンプルな React スニペット集。`imrs` で `import { useState } from 'react'` を生成

VS Code の設定で「Format On Save」を有効にしておくと、ファイル保存時に Prettier が自動でコードを整形してくれます。 Ctrl + ,（macOS: Cmd + ,）で設定画面を開き、「Format On Save」を検索して有効にしましょう。

Tomcat へのデプロイを見据えた設定

開発段階から Tomcat へのデプロイを意識した設定を行っておきましょう。特に重要なのは vite.config.js の base オプションです。

base オプションの設定

Tomcat にデプロイする場合、React アプリは通常 http://example.com/my-app/ のようにサブパス（コンテキストパス）の下に配置されます。この場合、ビルド時にアセットのパスが正しく解決されるよう base を設定する必要があります。

vite.config.js

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

export default defineConfig({
  plugins: [react()],
  base: '/my-app/',  // Tomcat のコンテキストパスに合わせる
})

デプロイ先	base の値	URL の例
Tomcat の ROOT	`'/'`（デフォルト）	`http://example.com/`
Tomcat の webapps/my-app	`'/my-app/'`	`http://example.com/my-app/`
Tomcat の webapps/react-app	`'/react-app/'`	`http://example.com/react-app/`

base を設定すると開発サーバーにも影響します。 base: '/my-app/' を設定した状態で npm run dev を実行すると、アクセス URL が http://localhost:5173/my-app/ になります。開発中は base: '/' にしておき、ビルド時だけ変更する方法もあります。

ビルドの確認

環境構築ができたら、ビルドが正しく動作するか確認しておきましょう。

ターミナル

# プロダクションビルドを実行
npm run build

# dist/ フォルダの内容を確認
ls dist/

# ビルド結果をローカルでプレビュー
npm run preview

npm run build を実行すると、dist/ ディレクトリにビルド結果が出力されます。 npm run preview でビルド結果をローカルサーバーでプレビューできます。

ビルド後の dist/ の構成

dist/
├── index.html              # エントリー HTML
├── vite.svg                # public/ から コピーされた静的ファイル
└── assets/
    ├── index-BhJk3x2F.js   # バンドルされた JavaScript（ハッシュ付き）
    ├── index-DiwrgTda.css   # バンドルされた CSS（ハッシュ付き）
    └── react-CHdo91hT.svg   # src/assets/ からバンドルされた画像

ファイル名に含まれるハッシュ（BhJk3x2F 等）は、ファイルの内容に基づいて生成されます。これにより、コードを更新するとファイル名が変わるため、ブラウザのキャッシュが古いファイルを使い続ける問題を防げます（キャッシュバスティング）。

以上で環境構築は完了です。次の章では、React の核心技術である JSX 構文について学びます。