開発環境の構築

この章では、Vite + React + TypeScript の開発環境を構築します。

なぜViteなのか？

React の開発環境にはいくつかの選択肢がありますが、本書では Vite を採用しています。

ツール	特徴
Vite	高速な起動、シンプルな設定、モダンなESMベース
Create React App	公式だが非推奨（保守のみ）、起動が遅い
Next.js	フルスタックフレームワーク、SSR/SSG対応

備考

Create React App（CRA）は 2025 年 2 月に公式に非推奨化されました（現在はメンテナンスモードで、React 19 のサポートのみ追加されています）。新規プロジェクトでは Vite または Next.js が推奨されています。Next.js については 25 章で解説します。

必要なツール

Node.js

Node.js 22 以上を推奨します。以下のコマンドでバージョンを確認してください。

node -v
# v22.x.x または v24.x.x と表示されればOK

備考

本書で使用する Vite 8 は Node.js 20.19 以上を要求しますが、Node.js 20 はすでにサポート終了を迎えたため、長期的な学習にはNode.js 22以上（推奨は Node.js 22.12+ / 24.x LTS）を使ってください。

警告

Node.js がインストールされていない場合は、公式サイトから LTS 版（22.x）をダウンロードしてください。

Node.jsのバージョン管理ツール

プロジェクトごとに異なる Node.js バージョンを使い分けたい場合は、バージョン管理ツールの導入を検討してください。

ツール	特徴
nvm	最も普及、macOS/Linux向け
fnm	高速、Rust製、クロスプラットフォーム
Volta	プロジェクト単位で自動切り替え
nodebrew	シンプルで軽量、macOS/Linux向け

# fnmの例
fnm install 22
fnm use 22

# nodebrewの例（macOS）
brew install nodebrew
nodebrew setup
nodebrew install-binary v22.12.0
nodebrew use v22.12.0

パッケージマネージャー

本書では npm を使用しますが、pnpm や yarn でも同様に進められます。

プロジェクトの作成

プロジェクトを作成する方法は 2 つあります。

方法1: 新規作成（推奨）

本書の内容を実際に手を動かしながら学ぶ場合は、Vite を使って新規プロジェクトを作成します。

npm create vite@latest react-learning -- --template react-ts

コマンド実行時に Use rolldown-vite (Experimental)? と尋ねられた場合は No を選びます。

備考

rolldown-vite は、Vite 7 系で次世代バンドラー「Rolldown」を先行利用するための実験的パッケージです。本書が使う Vite 8 では Rolldown が標準バンドラーとして本体に統合済みのため、この実験的パッケージを別途有効化する必要はありません（No を選んでも、Vite 8 なら Rolldown による高速ビルドが利用できます）。

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

cd react-learning
npm install

方法2: リポジトリをクローン

完成形のコードを参照しながら学ぶ場合は、本書のリポジトリをクローンできます。

git clone https://github.com/rasshii/react-intro-2026.git
cd react-intro-2026
git checkout start  # 03章の開始時点
npm install

ブランチの説明

本書のリポジトリには、学習の開始時点と完了時点のコードがブランチとして用意されています。

ブランチ	内容
main	03章開始時点（Viteデフォルト）
start	mainと同じ（エイリアス）
end	全章完了後のサンプル（単一SPA統合版）

03 章から学習を始める場合は、mainまたはstartブランチで作業してください。書籍の最終形を参照したい場合は git checkout end で end ブランチに切り替えてください。

開発サーバーの起動

以下のコマンドで開発サーバーを起動します。

npm run dev

ブラウザで http://localhost:5173 にアクセスすると、React アプリケーションが表示されます。

プロジェクト構成

Vite が生成するプロジェクト構成を確認しましょう。

react-learning/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts

重要なファイル

ファイル	役割
src/main.tsx	アプリケーションのエントリーポイント
src/App.tsx	ルートコンポーネント
index.html	HTMLテンプレート
vite.config.ts	Viteの設定ファイル
tsconfig.json	TypeScriptの設定ファイル

備考

create-vite のテンプレートは tsconfig.app.json で verbatimModuleSyntax: true が有効です。型だけを import するときは import type { ReactNode } from 'react' のように import type を使ってください。本書のコード例を写すときに error TS1484 が出た場合は、この設定が原因です。

main.tsxの確認

src/main.tsxを見てみましょう。

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

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

• createRoot: React のルート DOM ノードを作成
• StrictMode: 開発時に潜在的な問題を検出するラッパー
• App: アプリケーションのルートコンポーネント

!（Non-null assertion）とは？

document.getElementById('root')!の末尾にある!は、TypeScript の「Non-null assertion operator」です。

// TypeScriptに「この値はnullではない」と伝える
document.getElementById('root')!

getElementByIdは要素が見つからない場合nullを返しますが、index.htmlに<div id="root">が必ず存在することがわかっているため、!で「null ではない」と TypeScript に伝えています。

警告

!は「null ではないことを開発者が保証する」という意味です。実際に null の場合はランタイムエラーになるため、確実に null でないとわかる場合のみ使用してください。

StrictModeの詳細

StrictModeは本番環境には影響しませんが、開発時に以下のチェックを行います：

• コンポーネントの純粋性チェック: 同じ props で 2 回レンダリングし、結果が同じか確認
• 非推奨APIの警告: 古いライフサイクルメソッドなどを使用していると警告
• 副作用の検出: useEffect を 2 回実行して副作用の問題を検出

特に useEffect の 2 回実行は初学者を混乱させることがありますが、これは意図的な動作です。※useEffect は 11 章で詳しく解説します。

Viteの特徴

Hot Module Replacement（HMR）

Vite は高速な HMR を提供します。ファイルを保存すると、ブラウザが自動的に更新されます。

ESモジュールベース

Vite は開発時にネイティブ ES モジュールを使用するため、バンドルなしで高速に起動します。

最適化された本番ビルド

本番用ビルドでは、Rolldown（Rust 製バンドラー）を使用して最適化されたバンドルを生成します。

npm run build

エディタの設定（VSCode推奨）

VSCode を使用する場合、以下の拡張機能をインストールすると開発効率が上がります。

拡張機能	用途
ES7+ React/Redux/React-Native snippets	Reactコンポーネントのスニペット
ESLint	コードの静的解析
Prettier	コードフォーマッター
Auto Rename Tag	HTMLタグの自動リネーム

推奨するsettings.json

以下の設定を.vscode/settings.jsonに追加すると、保存時に自動フォーマットされます。

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

次のステップ

開発環境が整いました。

備考

本書のコードは上から順に読み進めることを想定していますが、すでに React の基礎を知っている方は Hooks 詳細（11 章〜）から始めることもできます。各章の冒頭で前提知識を明記しているので、自分のレベルに合わせて読み進めてください。

次に読む

React 基礎 へ進みます。JSX、コンポーネント、Props、State、イベント、フォームなど React の基本要素を学びます。

• JSXの基本