開発環境の構築

この章では、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の基本となるJSXについて学びます。

備考

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

次に読む

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

• JSXの基本