MENU
  1. ホーム
  2. React
  3. Reactプロジェクトを新規作成する際の最適な初期設定ガイド

Reactプロジェクトを新規作成する際の最適な初期設定ガイド

React

Reactは、モダンなフロントエンド開発において非常に人気の高いJavaScriptライブラリです。しかし、Reactプロジェクトの成功は、単にフレームワークを選択するだけでなく、プロジェクト開始時の適切な初期設定にかかっています。初期設定は、開発の効率性、コードの品質、そして将来的なメンテナンス性に大きく影響します。本記事では、Reactプロジェクトを新規作成する際に必要な初期設定を、初心者にもわかりやすく徹底的に解説します。このガイドを参考にすることで、堅牢でスケーラブルなReactプロジェクトの基盤を構築できるようになります。

目次

Reactプロジェクトの新規作成方法


Reactプロジェクトを開始するには、React専用の開発環境を迅速に構築できるツールを活用するのが一般的です。本節では、Create React App (CRA) と Vite を使用したプロジェクトの新規作成方法を解説します。

Create React Appを使用した作成


CRAは、React公式が提供するツールで、最小限の設定でReactプロジェクトを素早く開始できます。以下の手順に従って、プロジェクトを作成しましょう。

手順

  1. Node.jsをインストールしていることを確認します。
   node -v
  1. プロジェクトを作成するディレクトリに移動し、以下のコマンドを実行します。
   npx create-react-app my-app
   cd my-app
   npm start
  1. ブラウザで http://localhost:3000 にアクセスすると、Reactアプリが動作していることを確認できます。

Viteを使用した作成


Viteは、より高速なビルド速度を提供するモダンなツールです。パフォーマンス重視のプロジェクトに適しています。

手順

  1. 以下のコマンドでプロジェクトを作成します。
   npm create vite@latest my-vite-app --template react
   cd my-vite-app
   npm install
   npm run dev
  1. ターミナルに表示されたローカルサーバーのURL（例: http://localhost:5173）をブラウザで開いて確認します。

選択のポイント

  • CRA: 初心者向けで、簡単に環境構築ができる。
  • Vite: パフォーマンスが高く、最新の開発手法を採用したい場合に最適。

どちらのツールを使用するかは、プロジェクトの規模や要件に応じて選択しましょう。

必要なディレクトリ構造の設定


Reactプロジェクトの効率的な開発には、適切なディレクトリ構造を設計することが重要です。本節では、一般的で柔軟性の高いディレクトリ構造を紹介します。

基本的なディレクトリ構造


Reactプロジェクトの基本的な構成は以下のようになります。

src/
├── assets/        // 静的ファイル（画像、フォント、CSSなど）
├── components/    // 再利用可能なUIコンポーネント
├── pages/         // 各画面やルートのコンポーネント
├── hooks/         // カスタムフック
├── utils/         // ヘルパー関数や共通ロジック
├── context/       // グローバルな状態管理（Context API）
├── styles/        // グローバルなスタイルやテーマ
├── App.js         // アプリケーションのルートコンポーネント
└── index.js       // アプリケーションのエントリーポイント

各ディレクトリの詳細

assets/


プロジェクトで使用する画像やアイコン、フォントファイルを格納します。ファイルを整理することで、管理が容易になります。
例:

assets/
├── images/
│   └── logo.png
├── fonts/
│   └── Roboto.ttf

components/


ボタンやフォーム、ヘッダーなどの再利用可能なUIコンポーネントをここに配置します。ディレクトリごとに分類することで、大規模なプロジェクトでも管理しやすくなります。

pages/


React Routerを使用して作成される各ページコンポーネントを格納します。これにより、アプリケーションの画面構造がわかりやすくなります。

hooks/


カスタムフック（例: データ取得や状態管理のためのロジック）を格納します。ロジックを分離することで、コードの再利用性が向上します。

utils/


共通して使用される関数やロジック（例: フォーマット関数、APIユーティリティ）を保存します。
例:

export const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

context/


Context APIを使用してグローバルな状態を管理するためのファイルを配置します。

styles/


グローバルなCSSファイルやテーマに関連するスタイルシートを保存します。CSS ModulesやSassを利用している場合もここにまとめます。

ディレクトリ構造のカスタマイズ


プロジェクトの規模や使用するライブラリに応じて、この構造を調整することをお勧めします。例えば、状態管理にReduxを使用する場合は、redux/ディレクトリを追加することを検討します。

適切なディレクトリ構造を導入することで、開発効率が向上し、保守性が高まります。

初期依存ライブラリの選定とインストール


Reactプロジェクトの効率的な開発と保守性向上には、適切な依存ライブラリを選定しインストールすることが重要です。本節では、Reactプロジェクトの初期段階で導入すべきおすすめライブラリを紹介します。

Reactプロジェクトの基本的な依存ライブラリ

React Router


アプリケーションのページ遷移を実現するためのライブラリです。シングルページアプリケーション（SPA）のルーティングに必須です。
インストールコマンド:

npm install react-router-dom

Axios


APIとの通信を簡単に行えるHTTPクライアントライブラリです。データの取得や送信に利用されます。
インストールコマンド:

npm install axios

PropTypes


コンポーネントのプロパティの型を明示し、意図しないエラーを防ぐためのツールです。
インストールコマンド:

npm install prop-types

コード品質を向上させるライブラリ

ESLint


コードの静的解析ツールで、ベストプラクティスに沿ったコードを書くためのサポートを提供します。
インストールコマンド:

npm install eslint --save-dev

Prettier


コードフォーマッターで、コードのスタイルを一貫性のあるものにします。
インストールコマンド:

npm install prettier --save-dev

状態管理ライブラリ

Redux Toolkit


複雑な状態管理を簡単にするための公式推奨ツールキットです。
インストールコマンド:

npm install @reduxjs/toolkit react-redux

React Query


データ取得とキャッシングを効率的に行えるライブラリで、状態管理をAPI中心にしたい場合に便利です。
インストールコマンド:

npm install @tanstack/react-query

スタイリングライブラリ

Tailwind CSS


効率的なユーティリティファーストのCSSフレームワークです。
インストールコマンド:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Styled Components


CSS-in-JSを実現し、コンポーネント単位でスタイルを管理できます。
インストールコマンド:

npm install styled-components

インストール後の確認


依存ライブラリをインストール後、以下のコマンドでプロジェクトが正常に動作するか確認してください。

npm start

これらのライブラリを導入することで、開発効率が向上し、品質の高いReactアプリケーションを構築できるようになります。

ESLintとPrettierによるコード品質向上


Reactプロジェクトの開発において、コードの品質を保つことは非常に重要です。ESLintとPrettierを活用することで、コードのエラーを早期に発見し、スタイルを統一することができます。本節では、これらのツールをReactプロジェクトに導入し、設定する手順を解説します。

ESLintの導入と設定

ESLintのインストール


以下のコマンドでESLintをプロジェクトにインストールします。

npm install eslint --save-dev

初期設定


ESLintの初期設定を行います。以下のコマンドを実行し、インタラクティブなセットアップを行いましょう。

npx eslint --init

設定時に選択するオプション:

  1. JavaScriptモジュール形式（ES Modules）
  2. Reactプロジェクト向けの設定
  3. CommonJSかES Modulesを選択
  4. スタイルガイドの選択（Airbnbなどがおすすめ）
  5. 必要な依存関係を自動インストール

React向けのプラグイン設定


Reactプロジェクトに特化したESLintルールを適用するため、追加のパッケージをインストールします。

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

Prettierの導入と設定

Prettierのインストール


以下のコマンドでPrettierをインストールします。

npm install prettier --save-dev

Prettier設定ファイルの作成


プロジェクトのルートディレクトリに .prettierrc ファイルを作成し、以下の設定を記述します。

{
  "singleQuote": true,
  "trailingComma": "all",
  "semi": false
}

ESLintとPrettierの統合


ESLintとPrettierを一緒に利用することで、競合するルールを解消できます。

統合プラグインのインストール


以下のコマンドを実行します。

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

ESLint設定ファイルの更新


.eslintrc.json または .eslintrc.js ファイルを編集し、Prettierのルールを追加します。

{
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

VS Codeでの自動フォーマット設定


VS Codeを利用している場合、保存時に自動フォーマットを実行するよう設定できます。

設定手順

  1. VS Codeの拡張機能で「ESLint」と「Prettier」をインストール。
  2. 設定ファイル settings.json に以下を追加します。
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

動作確認


以下のコマンドでESLintを実行し、コードが適切に検証されるか確認します。

npx eslint src/

PrettierとESLintを導入することで、コードスタイルが統一され、エラーを事前に防ぐことが可能になります。これは、開発効率とコード品質の両方を大きく向上させるでしょう。

BabelとWebpackの基本設定


Reactプロジェクトでは、モダンなJavaScriptコードを幅広いブラウザで動作させるために、BabelとWebpackを使用します。Babelはトランスパイラとして最新のJavaScript構文を変換し、Webpackはモジュールバンドラーとしてコードとアセットを効率的にまとめます。本節では、ReactプロジェクトにおけるBabelとWebpackの基本設定を解説します。

Babelの導入と設定

インストール


以下のコマンドでBabel関連のパッケージをインストールします。

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Babel設定ファイルの作成


プロジェクトのルートに .babelrc ファイルを作成し、以下の内容を記述します。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

設定内容の解説

  • @babel/preset-env: 最新のJavaScript構文をトランスパイル。
  • @babel/preset-react: ReactのJSX構文を変換。

Webpackの導入と設定

インストール


以下のコマンドでWebpackと必要なプラグインをインストールします。

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

Webpack設定ファイルの作成


プロジェクトのルートに webpack.config.js ファイルを作成し、以下の設定を記述します。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // エントリーポイント
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js', // 出力ファイル名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // JavaScriptファイルを対象
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // Babelを利用
        },
      },
      {
        test: /\.css$/, // CSSファイルを対象
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // HTMLテンプレート
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 3000,
    hot: true,
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 拡張子省略対応
  },
};

設定内容の解説

  • entry: アプリケーションのエントリーポイント。
  • output: バンドルファイルの出力先とファイル名を指定。
  • module.rules: BabelやCSSローダーを設定。
  • plugins: HtmlWebpackPluginでHTMLテンプレートを生成。
  • devServer: 開発サーバーの設定。

開発サーバーの起動


以下のコマンドでWebpack Dev Serverを起動し、プロジェクトの動作を確認します。

npx webpack serve

ブラウザで http://localhost:3000 にアクセスして、Reactアプリが表示されることを確認してください。

最適化のポイント

  • 圧縮プラグインの追加: 本番環境では TerserPlugin を利用してコードを圧縮。
  • 環境変数の設定: dotenv を使って環境ごとの設定を簡素化。

BabelとWebpackを適切に設定することで、最新の開発技術を活用しつつ、幅広いブラウザで動作するReactアプリを構築できます。

ホットリロード環境の構築


ホットリロードは、コードを変更した際にブラウザを手動でリロードすることなく、リアルタイムで変更内容を確認できる開発環境です。これにより、Reactプロジェクトの開発効率が大幅に向上します。本節では、ホットリロード環境をWebpackとReactに導入する手順を解説します。

ホットリロードの仕組み


ホットリロードは、Webpack Dev ServerとReact Fast Refreshを利用して実現します。Webpack Dev Serverがファイルの変更を検知し、変更箇所をブラウザに即時反映します。React Fast Refreshは、Reactコンポーネントの状態を保持しつつ、変更を適用します。

Webpack Dev Serverの設定

必要なパッケージのインストール


Webpack Dev Serverをインストールしていない場合、以下のコマンドでインストールします。

npm install webpack-dev-server --save-dev

Webpack設定ファイルの更新


webpack.config.js に以下を追加または修正します。

devServer: {
  static: path.join(__dirname, 'dist'),
  port: 3000,
  hot: true, // ホットリロードを有効化
},

React Fast Refreshの導入

必要なパッケージのインストール


React Fast Refreshの設定には、以下のパッケージをインストールします。

npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

Webpack設定ファイルへのFast Refreshプラグインの追加


webpack.config.js にReact Fast Refreshのプラグインを追加します。

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new ReactRefreshWebpackPlugin(), // Fast Refreshプラグインを追加
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['react-refresh/babel'], // BabelにFast Refreshを追加
            },
          },
        ],
      },
    ],
  },
};

開発サーバーの起動


以下のコマンドでWebpack Dev Serverを起動します。

npx webpack serve

ブラウザで http://localhost:3000 を開き、コンポーネントを編集して変更がリアルタイムで反映されることを確認します。

動作確認

  1. コンポーネントファイルを開き、以下のようにテキストを編集します。
   const App = () => {
     return <h1>Hello, React Hot Reload!</h1>;
   };
  1. 保存後、ブラウザをリロードせずに更新内容が即時反映されることを確認します。

ホットリロードのメリット

  • 開発速度の向上: ページ全体のリロードが不要。
  • 状態の保持: コンポーネントの状態を保持したまま更新可能。
  • 即時フィードバック: 変更結果をリアルタイムで確認できる。

ホットリロード環境を構築することで、Reactプロジェクトの開発体験が大幅に改善され、効率的に作業を進めることができます。

テストフレームワークの導入と初期設定


Reactプロジェクトで品質を保証するためには、テストフレームワークの導入が不可欠です。本節では、Reactでよく使用されるテストフレームワークであるJestとReact Testing Libraryの導入と初期設定について解説します。

Jestの導入

Jestとは


Jestは、Facebookが開発したJavaScript向けのテストフレームワークで、シンプルな設定と高機能なテスト機能を提供します。

インストール


以下のコマンドを実行して、Jestをインストールします。

npm install jest --save-dev

Jest設定ファイルの作成


package.json に以下を追加して、Jestの基本設定を行います。

"scripts": {
  "test": "jest"
},
"jest": {
  "testEnvironment": "jsdom",
  "moduleFileExtensions": ["js", "jsx"]
}

React Testing Libraryの導入

React Testing Libraryとは


Reactコンポーネントのテストに特化したライブラリで、ユーザーの操作に基づくテストを簡単に記述できます。

インストール


以下のコマンドでReact Testing Libraryをインストールします。

npm install @testing-library/react @testing-library/jest-dom --save-dev

セットアップファイルの作成


React Testing Libraryのセットアップを簡単にするため、jest.setup.js ファイルを作成し、以下の内容を記述します。

import '@testing-library/jest-dom';

package.json に以下を追加してセットアップファイルを読み込むよう設定します。

"jest": {
  "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"]
}

テストの基本的な書き方

テスト用コンポーネントの例


以下のようなシンプルなReactコンポーネントを例にします。

// src/components/HelloWorld.js
const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

テストコードの例


上記のコンポーネントをテストするコードを作成します。

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

test('renders the Hello, World! message', () => {
  render(<HelloWorld />);
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

テストの実行


以下のコマンドを実行して、テストを実行します。

npm test

ターミナルにテスト結果が表示され、「Hello, World!」が正しくレンダリングされていることを確認できます。

テストフレームワークの追加設定

カバレッジレポートの生成


テストのカバレッジレポートを確認するには、以下のコマンドを実行します。

npm test -- --coverage

生成されたカバレッジレポートで、コードがどれだけテストされているかを確認できます。

モックの活用


APIのテストや非同期処理を模擬する場合、jest.mock を使用してモックを作成します。

jest.mock('./api', () => ({
  fetchData: jest.fn(() => Promise.resolve({ data: 'mocked data' })),
}));

テスト導入のメリット

  • バグの早期発見: コードの意図しない変更を検出。
  • リファクタリングの安心感: テストがあることでコード修正時に安心感を得られる。
  • コード品質の向上: プロジェクト全体の信頼性を向上。

JestとReact Testing Libraryを活用することで、高品質なReactアプリケーションの構築が可能になります。

バージョン管理とCI/CDの基本構築


Reactプロジェクトの開発では、バージョン管理とCI/CD（継続的インテグレーションと継続的デリバリー）が不可欠です。これにより、コードの品質を保ちながら迅速な開発とデプロイが可能になります。本節では、Gitによるバージョン管理と、GitHub Actionsを使ったCI/CDの基本構築方法を解説します。

Gitによるバージョン管理

Gitの初期化

  1. プロジェクトのルートディレクトリで以下のコマンドを実行し、Gitリポジトリを初期化します。
   git init
  1. .gitignore ファイルを作成し、バージョン管理に含めないファイルやディレクトリを指定します。例として以下を追加します。
   node_modules/
   dist/
   .env

コミットとリモートリポジトリの設定

  1. 変更をステージングし、コミットします。
   git add .
   git commit -m "Initial commit"
  1. リモートリポジトリを追加します（例: GitHub）。
   git remote add origin https://github.com/username/repository.git
   git branch -M main
   git push -u origin main

GitHub ActionsによるCI/CD構築

GitHub Actionsのセットアップ

  1. プロジェクトのリポジトリ内に .github/workflows ディレクトリを作成します。
  2. ci.yml という名前のファイルを作成し、以下の内容を記述します。

CI設定ファイルの例


以下は、Reactプロジェクトのテストとビルドを行うGitHub Actionsの設定例です。

name: React CI/CD

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Check out code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test -- --coverage

      - name: Build project
        run: npm run build

      - name: Upload production build (optional)
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: build/

CI/CDの動作確認

  1. 設定をプッシュすると、GitHubのリポジトリの「Actions」タブにワークフローが表示されます。
  2. ワークフローが正常に実行され、テストやビルドが成功したことを確認します。

CD（継続的デリバリー）の追加設定

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


Reactプロジェクトのホスティングには、VercelやNetlify、GitHub Pagesが一般的です。以下にGitHub Pagesを例とした設定方法を示します。

  1. gh-pages パッケージをインストールします。
   npm install gh-pages --save-dev
  1. package.json に以下を追加します。
   "homepage": "https://username.github.io/repository",
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   }
  1. 以下のコマンドでデプロイを実行します。
   npm run deploy

バージョン管理とCI/CDのメリット

  • コードの信頼性向上: 自動化されたテストとビルドでエラーを防止。
  • 迅速なデプロイ: 手動作業を減らし、開発サイクルを短縮。
  • チームの協力強化: 変更が安全に統合され、効率的なコラボレーションが可能。

バージョン管理とCI/CDを適切に設定することで、Reactプロジェクトの品質と開発速度を大幅に向上させることができます。

まとめ


本記事では、Reactプロジェクトを新規作成する際に必要な初期設定について、手順を詳しく解説しました。Reactプロジェクトの作成方法から始まり、ディレクトリ構造の設定、依存ライブラリの選定、コード品質向上のためのツール導入、ビルド環境の構築、効率的な開発を可能にするホットリロード、テスト環境の整備、そしてバージョン管理とCI/CDまで幅広くカバーしました。

これらの設定を適切に行うことで、開発効率とコード品質を向上させ、スケーラブルで保守性の高いReactプロジェクトを構築する基盤が整います。次のステップとして、これらの環境を活用しながら、実際のアプリケーション開発に取り組んでみてください。Reactの可能性を最大限に引き出す環境が整った今、効率的で楽しい開発体験をスタートさせましょう！

React
React フロントエンド開発 プロジェクト初期設定

コメント

コメントする

目次