Reactの環境構築 – モダンなフロントエンド開発を始めよう

はじめに

Reactは、Facebookが開発したJavaScriptライブラリで、シングルページアプリケーション（SPA）やモバイルアプリの構築に広く使用されています。この記事では、Reactの開発環境を一から構築する方法を、初心者にもわかりやすく解説します。

Reactとは

Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。特にSPA（シングルページアプリケーション）の開発に適しており、以下の特徴があります：

• コンポーネントベース: UIを再利用可能なコンポーネントに分割
• 仮想DOM: 実際のDOMの軽量なコピーを使って効率的に描画
• 一方向データフロー: データの流れが予測しやすい
• JSX: JavaScriptの中にHTMLのような構文を書ける拡張構文

前提条件

Reactの開発環境を構築する前に、以下のツールがインストールされていることを確認してください：

1. Node.js（v14.0.0以上） – JavaScript実行環境
2. npm（v6.0.0以上）または yarn – パッケージマネージャー

インストール状況は以下のコマンドで確認できます：

node -v
npm -v
# または
yarn -v

Node.jsがインストールされていない場合は、Node.js公式サイトからダウンロードしてインストールしてください。

開発環境構築の方法

Reactの開発環境を構築するには、主に2つの方法があります：

1. Create React App – 初心者向けの公式ツール
2. 手動セットアップ – より細かい設定をカスタマイズしたい場合

今回は最も一般的で簡単な「Create React App」を使った方法を紹介します。

Create React App（CRA）を使った環境構築

ステップ1: Create React Appのインストールと新規プロジェクト作成

以下のコマンドを実行して、新しいReactプロジェクトを作成します：

# npmを使用する場合
npx create-react-app my-react-app

# yarnを使用する場合
yarn create react-app my-react-app

my-react-appは任意のプロジェクト名に変更可能です。

ステップ2: プロジェクトディレクトリに移動

cd my-react-app

ステップ3: 開発サーバーの起動

# npmを使用する場合
npm start

# yarnを使用する場合
yarn start

このコマンドを実行すると、デフォルトではhttp://localhost:3000でアプリケーションが実行されます。ブラウザが自動的に開きます。

プロジェクト構造の理解

Create React Appで作成したプロジェクトの基本的なディレクトリ構造は以下の通りです：

my-react-app/
├── node_modules/    # 依存パッケージ
├── public/          # 静的ファイル
│   ├── favicon.ico
│   ├── index.html   # メインのHTMLファイル
│   ├── manifest.json
│   └── robots.txt
├── src/             # ソースコード
│   ├── App.css      # Appコンポーネントのスタイル
│   ├── App.js       # メインのAppコンポーネント
│   ├── App.test.js  # テストファイル
│   ├── index.css    # グローバルスタイル
│   ├── index.js     # エントリーポイント
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json     # プロジェクト設定・依存関係
├── README.md
└── yarn.lock または package-lock.json

最初のコンポーネント作成

Reactの基本はコンポーネントです。最初の簡単なコンポーネントを作成してみましょう。

srcディレクトリにcomponentsというフォルダを作成し、その中にHelloWorld.jsというファイルを作成します：

// src/components/HelloWorld.js
import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>これは最初のReactコンポーネントです。</p>
    </div>
  );
}

export default HelloWorld;

次に、このコンポーネントをメインのApp.jsで利用します：

// src/App.js
import React from 'react';
import './App.css';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <HelloWorld />
      </header>
    </div>
  );
}

export default App;

主要な開発ツールの導入

ESLint – コード品質とスタイルのチェック

Create React Appには、基本的なESLint設定が含まれていますが、追加のルールを設定する場合：

npm install --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

.eslintrc.jsファイルをプロジェクトのルートに作成：

module.exports = {
  extends: ['react-app', 'react-app/jest'],
  rules: {
    // カスタムルールを追加
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
  },
};

Prettier – コードフォーマッター

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

.prettierrcファイルをプロジェクトのルートに作成：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

ESLintとPrettierを連携させるには、.eslintrc.jsを更新：

module.exports = {
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:prettier/recommended'
  ],
  rules: {
    'react/jsx-uses-react': 'error',
    'react/jsx-uses-vars': 'error',
  },
};

CSSスタイリングの選択肢

Reactでのスタイリング方法はいくつかあります：

1. 通常のCSSファイル

/* src/components/HelloWorld.css */
.hello-container {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.hello-title {
  color: #333;
}

コンポーネントでインポート：

import React from 'react';
import './HelloWorld.css';

function HelloWorld() {
  return (
    <div className="hello-container">
      <h1 className="hello-title">Hello, React World!</h1>
      <p>これは最初のReactコンポーネントです。</p>
    </div>
  );
}

export default HelloWorld;

2. CSS Modules

CSSをコンポーネントにスコープするための方法です：

/* src/components/HelloWorld.module.css */
.container {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.title {
  color: #333;
}

コンポーネントでの使用：

import React from 'react';
import styles from './HelloWorld.module.css';

function HelloWorld() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, React World!</h1>
      <p>これは最初のReactコンポーネントです。</p>
    </div>
  );
}

export default HelloWorld;

3. Styled-components（CSS-in-JS）

まず、ライブラリをインストール：

npm install styled-components

コンポーネントでの使用：

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
`;

const Title = styled.h1`
  color: #333;
`;

function HelloWorld() {
  return (
    <Container>
      <Title>Hello, React World!</Title>
      <p>これは最初のReactコンポーネントです。</p>
    </Container>
  );
}

export default HelloWorld;

プロジェクトのビルドと本番デプロイ

開発が完了したら、本番用のビルドを作成します：

# npmを使用する場合
npm run build

# yarnを使用する場合
yarn build

このコマンドは、最適化されたプロダクションビルドをbuildフォルダに作成します。

静的ホスティングサービスへのデプロイ

ビルドされたアプリケーションは、以下のようなサービスにデプロイできます：

1. Netlify
2. Vercel
3. GitHub Pages
4. Firebase Hosting
5. AWS Amplify

例えば、Netlifyへのデプロイは、GitHubリポジトリと連携するか、ドラッグ＆ドロップでbuildフォルダをアップロードするだけで完了します。

トラブルシューティング

よくある問題と解決策

1. 「’react’ must be in scope when using JSX」エラー
   • 解決: コンポーネントファイルの先頭にimport React from 'react';を追加
2. 環境変数が読み込めない
   • 解決: 環境変数はREACT_APP_プレフィックスが必要
   • 例: .envファイルにREACT_APP_API_URL=https://api.example.comを追加
3. ビルド時の「Module not found」エラー
   • 解決: パスが正しいか確認し、必要なパッケージがインストールされているか確認
4. Hot Reloadingが機能しない
   • 解決: 開発サーバーを再起動するか、ブラウザキャッシュをクリア

パフォーマンス最適化のヒント

1. コンポーネントのメモ化

import React, { memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent(props) {
  // レンダリングコストが高いコンポーネント
  return <div>{/* ... */}</div>;
});

export default ExpensiveComponent;

2. レンダリングの最適化

import React, { useState, useMemo, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  // 値のメモ化
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(count);
  }, [count]);
  
  // 関数のメモ化
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  
  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive value: {expensiveValue}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

便利なReactライブラリ

1. React Router – ルーティング npm install react-router-dom
2. Redux/React Context – 状態管理 npm install redux react-redux # または Context APIを使用（React組み込み）
3. Axios – APIリクエスト npm install axios
4. Material-UI/Chakra UI – UIコンポーネント npm install @mui/material @emotion/react @emotion/styled # または npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

まとめ

この記事では、Reactの開発環境の構築から、基本的なコンポーネントの作成、スタイリング、本番デプロイまでを解説しました。Reactは学習曲線があるものの、一度基本を理解すれば、効率的かつ柔軟なUI開発が可能になります。

次回は、ReactとAPIの連携や、より実践的なアプリケーション開発について解説する予定です。

質問やコメントがあれば、ぜひコメント欄でお知らせください！

参考リンク

• React公式ドキュメント
• Create React App公式ドキュメント
• React Router ドキュメント
• React DevTools