Apps

011-Login｜Step1_ReactでLogin機能を実装：プロジェクトのセットアップ

本記事では、Reactを使ってログイン機能を実装するためのプロジェクトのセットアップを行います。

まずは、Reactアプリの作成から始め、必要なライブラリをインストールし、ディレクトリ構成を整理します。

1. Reactプロジェクトの作成（create-react-app の使用）

まずは create-react-app を使って、新しいReactプロジェクトを作成します。以下のコマンドを実行してください。

npx create-react-app react-login
cd react-login

npx を使用することで、グローバルに create-react-app をインストールせずにプロジェクトを作成できます。作成が完了したら、プロジェクトフォルダ（react-login）に移動します。

補足: yarn を使用する場合は、以下のコマンドでも作成できます。

yarn create react-app react-login

2. 必要なライブラリのインストール

ログイン機能を作成するにあたって、以下のライブラリを使用します。

ライブラリ名用途
react-router-dom画面遷移（ルーティング）
@mui/materialUIデザイン（ボタン・フォームなど）
axiosAPIリクエストの送信

以下のコマンドを実行して、必要なライブラリをインストールしてください。

npm install react-router-dom @mui/material @emotion/react @emotion/styled axios

補足: yarn を使用している場合は、以下のコマンドになります。

yarn add react-router-dom @mui/material @emotion/react @emotion/styled axios

ライブラリの概要:

  • react-router-dom は、Reactで画面遷移を管理するためのライブラリです。
  • @mui/material は、GoogleのMaterial DesignをベースにしたUIコンポーネントライブラリです。
  • axios は、APIとのデータ通信を簡単に行うためのライブラリです。

3. プロジェクトのディレクトリ構成

ログイン機能を実装しやすいように、以下のようなディレクトリ構成を設定します。

react-login/
├── src/
│   ├── components/
│   │   ├── elements/       # ボタンやメニューなどのUIパーツ
│   │   │   ├── BasicMenu.js
│   │   ├── hooks/          # カスタムフック
│   │   │   ├── useLogin.js
│   │   ├── pages/          # 各ページ
│   │   │   ├── Home.js
│   │   │   ├── Login.js
│   │   │   ├── LoginFailed.js
│   │   │   ├── Register.js
│   │   │   ├── NotFound.js
│   │   ├── providers/      # Context API（ログイン状態管理）
│   │   │   ├── LoginUserProvider.js
│   │   ├── templates/      # ヘッダー・フッターなどの共通レイアウト
│   │   │   ├── Header.js
│   │   │   ├── Footer.js
│   ├── App.js
│   ├── index.js
│   ├── reportWebVitals.js
│   ├── setupTests.js
│── public/
│── package.json
│── README.md

ディレクトリの説明

  • components/elements/ … メニューやボタンなどの再利用可能なUIコンポーネント
  • components/hooks/ … カスタムフックを格納（例：ログイン処理を担当するuseLogin.js）
  • components/pages/ … 各画面コンポーネント（ログイン・ホーム・登録など）
  • components/providers/ … Context APIを用いたグローバルな状態管理
  • components/templates/ … ヘッダー・フッターなどの共通レイアウト

このようにディレクトリを整理することで、コンポーネントの責務を分け、保守しやすいコード構造にすることができます。

次のステップ

プロジェクトのセットアップが完了したので、次は実際にReact Routerの設定とページの作成を行います。
→ Step2_React Routerを設定し、画面遷移を実装する

-Apps