環境構築

React環境構築

推奨パターン: TypeScript + Vite

2024年現在の推奨パターンは、TypeScript + Viteを使用したセットアップです。高速な開発サーバーと優れた開発体験を提供します。

# TypeScript + React + Viteでプロジェクトを作成
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

生成されるファイル構造:

my-react-app/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

vite.config.ts（TypeScript設定）:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

tsconfig.json（推奨設定）:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

メリット:

• ✅ 高速な開発サーバー: ViteのESモジュールベースの開発サーバー
• ✅ 型安全性: TypeScriptによる型チェック
• ✅ HMR（Hot Module Replacement）: 高速なホットリロード
• ✅ 最適化されたビルド: 本番環境向けの最適化されたバンドル

---

その他の最新の選択肢

1. Turbopack（Next.js 13+）

Next.jsが開発したRustベースの高速なバンドラーです。Next.jsプロジェクトで使用できます。

# Next.jsプロジェクトを作成（TypeScript）
npx create-next-app@latest my-app --typescript
cd my-app

# Turbopackを使用して開発サーバーを起動
npm run dev -- --turbo

package.jsonの設定:

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

特徴:

• ✅ 超高速: Webpackより700倍高速なインクリメンタルビルド
• ✅ Next.js統合: Next.jsと完全に統合
• ✅ Rust実装: メモリ安全性とパフォーマンス

注意: Turbopackは現在、Next.jsでのみ使用可能です。スタンドアロンのReactプロジェクトでは使用できません。

2. Bun

高速なJavaScriptランタイム、バンドラー、パッケージマネージャーを統合したツールです。

# Bunのインストール
curl -fsSL https://bun.sh/install | bash

# BunでReactプロジェクトを作成
bun create react my-app
cd my-app

# 開発サーバーを起動
bun dev

BunでのTypeScript設定:

# TypeScript + Reactプロジェクトを作成
bun create react-ts my-app
cd my-app
bun install
bun dev

特徴:

• ✅ 超高速: Node.jsより高速なランタイム
• ✅ 統合ツール: ランタイム、バンドラー、パッケージマネージャーが統合
• ✅ TypeScriptネイティブサポート: 追加設定不要でTypeScriptを使用可能
• ✅ Node.js互換: Node.jsのAPIと互換性あり

bun.config.ts（オプション）:

export default {
  entrypoints: ['./src/main.tsx'],
  outdir: './dist',
  minify: true,
  sourcemap: 'external',
};

3. Vite（JavaScript版）

TypeScriptを使わない場合のViteセットアップです。

# JavaScript + React + Viteでプロジェクトを作成
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

---

従来の選択肢

Create React App

注意: Create React Appは現在、メンテナンスモードに入っており、新規プロジェクトでは推奨されません。

# JavaScript版
npx create-react-app my-app

# TypeScript版
npx create-react-app my-app --template typescript

問題点:

• ❌ ビルドが遅い: Webpackベースで、大規模プロジェクトではビルドが遅い
• ❌ 設定のカスタマイズが困難: 設定を変更するにはejectが必要
• ❌ メンテナンスモード: 新機能の追加が停止

---

手動セットアップ（TypeScript + Vite）

プロジェクトを一から構築する場合の手順です。

# プロジェクトの初期化
npm init -y

# 依存関係のインストール
npm install react react-dom
npm install --save-dev @vitejs/plugin-react vite typescript @types/react @types/react-dom

vite.config.ts:

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

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

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true
  },
  "include": ["src"]
}

package.jsonのスクリプト:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

---

選択肢の比較

ツール	推奨度	特徴	用途
Vite + TypeScript	⭐⭐⭐⭐⭐	高速、型安全、設定が簡単	スタンドアロンのReactアプリケーション
Next.js + Turbopack	⭐⭐⭐⭐⭐	超高速、フルスタック対応	フルスタックなWebアプリケーション
Bun	⭐⭐⭐⭐	超高速、統合ツール	実験的なプロジェクト、高速性が重要
Create React App	⭐⭐	従来の標準	既存プロジェクトの維持（新規プロジェクト非推奨）

まとめ

2024年現在の推奨パターン:

1. スタンドアロンのReactアプリ: Vite + TypeScript（npm create vite@latest my-app -- --template react-ts）
2. フルスタックなWebアプリ: Next.js + TypeScript（npx create-next-app@latest my-app --typescript）
3. 実験的なプロジェクト: Bun（bun create react-ts my-app）

これらの選択肢により、高速で型安全なReactアプリケーションを構築できます。