前回の記事でReactの基礎とシンプルな環境構築を学びましたが、実際の開発現場では、より充実した開発環境を整えることが重要です。
この記事では、各ツールの役割を深く理解し、複数の環境構築方法を比較しながら、プロフェッショナルな開発環境を構築していきます。
Contents
1. 開発に必要なツールの理解
Node.jsとは？
Node.jsは、JavaScriptをブラウザ外（サーバーサイドやローカル環境）で実行するためのランタイム環境です。
Reactの開発でNode.jsが必要な理由：
- ビルドツール（ViteやWebpack）を動かすため
- パッケージ管理ツール（npm）を使うため
- 開発サーバーを起動するため
- JSXをブラウザが理解できるJavaScriptに変換するため
重要： ReactはブラウザでJavaScriptとして動作しますが、開発時にNode.jsが必要になります。
Node.js入門については以下の入門シリーズでまとめています。
npmとは？
npm（Node Package Manager）は、JavaScriptのパッケージ管理ツールです。
npmの役割：
- ライブラリのインストール（React、React Router、Axiosなど）
- プロジェクトの依存関係の管理
- スクリプトの実行（開発サーバー起動、ビルドなど）
npm以外の選択肢：
- yarn: Facebookが開発した高速なパッケージマネージャー
- pnpm: ディスク容量を節約できる効率的なパッケージマネージャー
どれを使っても問題ありませんが、この記事ではnpmを使用します。
Viteとは？
Vite（ヴィート）は、次世代のフロントエンド開発ツールです。
Viteの特徴：
- 高速な起動: 数秒で開発サーバーが起動
- 高速なHMR（Hot Module Replacement）: コード変更が即座に反映
- 最適化されたビルド: 本番環境用に最適化されたファイルを生成
- モダンな設定: 最小限の設定で始められる
従来のツール（Create React App）との違い：
- Create React App（CRA）: 長年使われてきた公式ツールだが、起動が遅い
- Vite: モダンで高速、最近の主流
2. Node.jsのインストール
インストール方法
バージョン確認：
ターミナルから以下のコマンドバージョンが表示されるようであれば、インストールはスキップしてください。
node -v
# v25.5.0 のような表示が出ればOK
npm -v
# 11.8.0 のような表示が出ればOK公式サイトからインストール：
- Node.js公式サイトにアクセス
- LTS版（Long Term Support）をダウンロード
- 安定版で長期サポートがある
- 現在は25.x系が推奨
- インストーラーを実行してインストール
Node.jsのバージョンの変更をするには？（最新バージョンへの切り替えも）
複数のNode.jsバージョンを切り替えたい場合は、バージョン管理ツールを使います。
nvm（Node Version Manager）:バージョン管理ツール（任意だが推奨）
macOS / Linux:
# nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
# ⚠️一度ターミナルを閉じるか、別の新しいターミナルを開いてから以下のコマンドを実行してください。
# Node.jsのインストール
nvm install 25
nvm use 25Windows:
- nvm-windowsをダウンロードしてインストール
nvmの便利な使い方：
# 利用可能なバージョンを確認
nvm ls-remote
# 特定バージョンをインストール
nvm install 18.19.0
# バージョン切り替え
nvm use 18
# 現在のバージョン確認
nvm current3. プロジェクト作成方法の比較
ここでは、”3つのプロジェクト作成方法”をご紹介しますが、今後の学習用には方法❶（Vite）でプロジェクトを作成して話を進めましょう。
方法❶: Vite（推奨）
メリット：
- 起動が非常に高速
- モダンで軽量
- TypeScript対応が標準
- シンプルな設定
デメリット：
- 歴史が浅い（ドキュメントがCRAより少ない）
JavaScript版：
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run devTypeScript版：
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run devインストールの過程で、yes/noといった選択をいくつか聞いてきますが、全てエンター（デフォルト選択）でも良いです。
学習には影響しません。
方法❷: Create React App（従来の方法）
メリット：
- 公式ツールで長年の実績
- ドキュメントが豊富
- 初心者に優しい
デメリット：
- 起動が遅い
- ビルドが遅い
- 設定の変更が難しい
- メンテナンスが停滞気味
作成方法：
npx create-react-app my-react-app
# TypeScript版
npx create-react-app my-react-app --template typescript注意： 2024年以降、Reactの公式ドキュメントではCRAよりもViteやNext.jsが推奨されています。
方法❸: Next.js（フルスタックフレームワーク）
Next.jsはReactベースのフレームワークで、サーバーサイドレンダリング（SSR）やルーティングが組み込まれています。
メリット：
- SEO対策が簡単
- ルーティングが組み込み
- APIルートも作れる
- 本番環境への最適化が充実
デメリット：
- 学習コストが高い
- React単体より複雑
作成方法：
npx create-next-app@latest my-next-appいつNext.jsを選ぶべきか：
- SEOが重要なサイト（ブログ、ECサイトなど）
- サーバーサイドの機能も必要
- 本格的なWebアプリケーション
初心者へのアドバイス： まずはViteでReactを学び、Next.jsは後で学習するのがおすすめです。
方法4: オンライン開発環境
ローカル環境を構築せずにブラウザだけで開発できるサービスもあります。
CodeSandbox:
- codesandbox.io
- ブラウザだけで完結
- すぐに始められる
- 共有が簡単
StackBlitz:
- stackblitz.com
- VS Codeライクなエディタ
- Node.jsがブラウザで動く
- 高速で安定
いつオンライン環境を使うべきか：
- 学習の最初の段階
- コードの共有やデモ
- 環境構築のトラブルを避けたい
4. エディタのセットアップ（VS Code）
VS Codeのインストール
VS Codeのセットアップ例を紹介します。
開発効率を上げる拡張機能を上げるための準備なので、省略しても学習はできます。
Visual Studio Code公式サイトからダウンロードしてインストールします。
必須の拡張機能
1. ES7+ React/Redux/React-Native snippets
- React開発用のコードスニペット
rafceでコンポーネントの雛形を一瞬で作成
2. ESLint
- コードの問題を自動検出
- コーディング規約のチェック
3. Prettier – Code formatter
- コードの自動フォーマット
- チーム内でコードスタイルを統一
4. Path Intellisense
- ファイルパスの自動補完
TypeScript開発におすすめの拡張機能
5. JavaScript and TypeScript Nightly
- 最新のTypeScript機能
- より正確な型チェック
6. Pretty TypeScript Errors
- TypeScriptのエラーメッセージを読みやすく表示
VS Codeの設定（settings.json）
VS Codeで Cmd/Ctrl + , を押して設定を開き、右上のアイコンからsettings.jsonを開いて以下を追加：
{
// 保存時に自動フォーマット
"editor.formatOnSave": true,
// デフォルトのフォーマッターをPrettierに
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存時にESLintで自動修正
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// タブサイズ
"editor.tabSize": 2,
// ミニマップを非表示（お好みで）
"editor.minimap.enabled": false,
//開始タグを変更すると終了タグも自動変更
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
}5. ESLintとPrettierの設定
ESLintとは？
コードの品質をチェックするツールです。
バグの原因になりやすいコードを警告してくれます。
Prettierとは？
コードを自動整形するツールです。
インデント、改行、スペースなどを統一します。
Viteプロジェクトへの追加
1. パッケージのインストール：
# ESLint関連
npm install -D eslint eslint-plugin-react eslint-plugin-react-hooks
# Prettier関連
npm install -D prettier eslint-config-prettier eslint-plugin-prettierTypeScriptプロジェクトの場合：
上記のパッケージインストール後にTypeScript対応の拡張パッケージもインストール
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser2. Prettierの設定ファイル作成（.prettierrc）：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}使い方：
# コードチェック
npm run lint
# 自動修正
npm run lint:fix
# フォーマット
npm run format6. package.jsonの理解
プロジェクトのルートにあるpackage.jsonは、プロジェクトの設定ファイルです。
{
"name": "my-react-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^5.1.1",
"vite": "^7.2.4"
//・・・省略
}
}主要な項目：
name: プロジェクト名scripts: 実行可能なコマンドdependencies: 本番環境で必要なパッケージdevDependencies: 開発時のみ必要なパッケージ
バージョン番号の意味：
^19.2.0: 19.xの最新版を許可（メジャーバージョン固定）~19.2.0: 19.2.xの最新版を許可（マイナーバージョン固定）19.2.0: 完全に固定
7. よくあるトラブルシューティング
問題1: npm installが失敗する
原因：
- ネットワークの問題
- キャッシュの問題
- 権限の問題
解決方法：
# キャッシュをクリア</em>
npm cache clean --force
# node_modulesとpackage-lock.jsonを削除して再インストール
rm -rf node_modules package-lock.json
npm install問題2: ポート3000/5173が既に使用中
エラーメッセージ：
Port 5173 is in use解決方法：
# 別のポートを指定
npm run dev -- --port 3001
# または、使用中のプロセスを終了
## macOS/Linux
lsof -ti:5173 | xargs kill -9
## Windows
netstat -ano | findstr :5173
taskkill /PID <PID番号> /F問題3: モジュールが見つからない
エラーメッセージ：
Cannot find module 'react'解決方法：
# 依存関係を再インストール
npm install
# 特定のパッケージを再インストール
npm install react react-dom問題4: TypeScriptのエラーが多すぎる
解決方法：
// tsconfig.jsonで厳格さを調整
{
"compilerOptions": {
"strict": false, // 一旦緩める
"noImplicitAny": false
}
}学習が進んだら徐々に厳格化していきましょう。
8. おすすめのディレクトリ構成
プロジェクトが大きくなってきたら、ファイルを整理しましょう。
src/
├── assets/ # 画像、フォントなど
├── components/ # 再利用可能なコンポーネント
│ ├── common/ # 共通コンポーネント（Button、Inputなど）
│ └── layout/ # レイアウトコンポーネント（Header、Footerなど）
├── pages/ # ページコンポーネント
├── hooks/ # カスタムフック
├── utils/ # ユーティリティ関数
├── types/ # TypeScriptの型定義（TS使用時）
├── styles/ # グローバルスタイル
├── App.tsx
└── main.tsx9. 便利なnpmコマンド
# パッケージのインストール
npm install <package-name>
npm i <package-name> # 短縮形
# 開発用パッケージのインストール
npm install -D <package-name>
# パッケージのアンインストール
npm uninstall <package-name>
# 全パッケージの更新確認
npm outdated
# パッケージの更新
npm update <package-name>
# プロジェクトの初期化
npm init -y
# インストール済みパッケージ一覧
npm list --depth=0まとめ
この記事では、Reactの開発環境を詳しく学びました。
学んだこと：
- Node.js、npm、Viteの役割と重要性
- 複数の環境構築方法（Vite、CRA、Next.js）
- VS Codeの推奨設定と拡張機能
- ESLintとPrettierによるコード品質管理
- トラブルシューティングの方法
推奨する開発環境：
- エディタ: VS Code
- プロジェクト作成: Vite
- コード品質: ESLint + Prettier
- バージョン管理: Git（次回以降で解説）
次のステップ：
次回は、propsを使ったコンポーネント間のデータ受け渡しと、useStateを使った状態管理について学びます。
今回整えた開発環境で、より実践的なReact開発に進んでいきましょう！
開発環境の構築は最初は大変ですが、一度整えれば快適な開発体験が得られます。
わからないことがあれば、公式ドキュメントやコミュニティを活用してください。
関連記事
