Create React App入門──導入からカスタムテンプレート・デプロイまで

React

はじめに

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ただ一つのHTMLテンプレート
src/index.jsエントリーポイント
src/App.jsルートコンポーネント
src 配下JS/TS・CSS・画像など。ここに置くとWebpackが自動でバンドル

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
  1. アプリ内で参照
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
  1. ホスティング
    • GitHub Pages
    • Netlify / Vercel
    • Firebase Hosting
  2. SPAルーティング
    ルート以外の URL でも index.html を返す設定が必要。ホスティングごとのリライトルールを追加しましょう。

Q&A：よくある疑問

疑問回答
後から TypeScript に変えたいnpm i --save typescript @types/node @types/react @types/react-dom を追加し、ファイル拡張子を .tsx に変更
モジュールエイリアスを使いたいルートに jsconfig.json を追加し baseUrl と paths を設定
React 18 は使える？最新の CRA は React 18 対応。npm i react@18 react-dom@18 でアップグレード可能

まとめ

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

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

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

コメント