JavaScriptフレームワークの中でも人気の高いReact。「まず動くプロトタイプを作りたいけど、BabelやWebpackの設定が面倒」という悩みを解決するのが**Create React App（CRA）**です。コマンド1本で最新の開発環境が完成し、すぐにブラウザで実行できます。本記事では公式ドキュメントを基に、基本操作から応用設定・テスト・デプロイまでをステップごとに解説します。

Create React Appの概要

なぜCRAが選ばれるのか

• 設定ファイルが不要
  Webpack・Babelなど複雑な設定を気にせず、すぐに開発を始められます。
• モダンブラウザ対応
  主要ブラウザを標準サポート。古いブラウザもポリフィルで後付けできます。
• 学習コストが低い
  React初心者でも npm start でホットリロード環境が起動し、変更が即反映されます。

プロジェクトの作成コマンド

npx create-react-app my-app
cd my-app
npm start     # localhost:3000 が自動で開く

以前グローバルに create-react-app を入れていた場合はアンインストールしてから実行してください。

フォルダ構成を理解する

public 内のファイルだけが index.html から直接参照できます。コンポーネントから画像を読み込むときは import するのが基本です。

よく使うスクリプト

npm start         # 開発用サーバー (ホットリロード付き)
npm run build     # 本番ビルド (圧縮・ハッシュ付きファイルを生成)
npm test          # テスト実行 (Jest + Testing Library)
npm run eject     # 設定ファイルを外へ出す※後戻り不可

build で生成されるファイルは build フォルダに出力され、そのまま静的ホスティングへアップロードできます。

ブラウザサポートとポリフィル

• モダンブラウザ（Chrome, Edge, Safari, Firefox）はそのまま対応
• IE11 など古いブラウザ
  react-app-polyfill を追加して index.js の先頭で読み込めば対応可能

npm i react-app-polyfill

import 'react-app-polyfill/ie11';

テスト環境：Jest + Testing Library

CRA には Jest が組み込まれており、npm test ですぐテストを実行できます。

// src/App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('タイトルが表示される', () => {
  render(<App />);
  const heading = screen.getByText(/Hello React/i);
  expect(heading).toBeInTheDocument();
});

*.test.js や *.spec.js というファイル名で自動検出され、ウォッチモードで変更分だけ再テストされます。

環境変数とビルド時の設定

1. ルートに .env ファイルを作成
2. 必ず REACT_APP_ を頭につけて記載

REACT_APP_API_URL=https://api.example.com
REACT_APP_VERSION=1.0.0

3. アプリ内で参照

const api = process.env.REACT_APP_API_URL;

カスタムテンプレートで拡張

npx create-react-app my-app --template typescript
npx create-react-app my-app --template redux

cra-template-◯◯ 形式で公開されたテンプレートを利用することで、TypeScript、Redux、Styled-Components など好みの初期構成を選べます。

「もっと細かく設定したい」と思ったら

1. npm run eject

設定をすべてプロジェクトに書き出し、Webpack/Babel を自由に編集。取り消しできないため、チームで合意してから行いましょう。

2. 公式が用意した環境変数

INLINE_RUNTIME_CHUNK=false など、ビルド挙動を変える環境変数が用意されています。軽微な調整なら eject せずに対応できます。

デプロイ手順

1. ビルド

npm run build

2. ホスティング
   • GitHub Pages
   • Netlify / Vercel
   • Firebase Hosting
3. SPAルーティング
   ルート以外の URL でも index.html を返す設定が必要。ホスティングごとのリライトルールを追加しましょう。

Q&A：よくある疑問

まとめ

Create React App は「React をすぐ始めたい」「設定で迷いたくない」という開発者の強い味方です。

• インストールは1行：npx create-react-app my-app
• 開発はnpm start、本番はnpm run build
• カスタムテンプレートや環境変数で柔軟に拡張
• 大規模開発や特殊ビルドが必要になったら npm run eject や Vite への移行を検討

まずはサンプルアプリを作り、コンポーネントを編集しながら動作を確かめてみましょう。React の学習がスムーズに進むはずです。