はじめに
記事の概要
本記事では、Reactのみを使用してログイン機能を実装する方法を解説します。通常、ログイン機能の実装にはバックエンドが必要ですが、本記事ではJSONPlaceholder APIを利用し、擬似的なログイン認証を行います。ユーザーの状態管理には Context API を活用し、アプリ全体でログイン状態を共有します。
実装のゴール
本記事で実装するログイン機能のゴールは以下の通りです。
✅ ユーザー名とパスワードの入力でログイン
✅ JSONPlaceholder APIを使用して認証を模擬
✅ React Routerで画面遷移
✅ Context APIを用いたログイン状態管理
✅ ログイン失敗時のエラーハンドリング
✅ Material UIを使用したUIの作成
使用する技術
| 技術 | 用途 |
|---|---|
| React | フロントエンドフレームワーク |
| React Router | ルーティング（画面遷移） |
| Context API | グローバルな状態管理（ログイン情報の共有） |
| Material UI | UIデザイン（ボタン、メニューなど） |
| Axios | APIリクエストの送信 |
| JSONPlaceholder API | 疑似的なユーザー認証 |
本記事を読み終えることで、React単体で基本的なログイン機能を実装する方法が理解でき、より高度な認証機能（JWT認証やバックエンドとの連携）へ発展させるための基礎を身につけられます。
学習内容
- Material UIを使って画面の見た目をデザインする
- Axiosを使ってページ間でデータを受け渡しする（ログイン画面で入力したデータをホーム画面に渡して、表示する）
全体構成
Step1_ReactでLogin機能を実装：プロジェクトのセットアップ
- Reactプロジェクトの作成（
create-react-appの使用） - 必要なライブラリのインストール（
react-router-dom,@mui/material,axios） - プロジェクトのディレクトリ構成
Step2_ReactでLogin機能を実装：コンテキストを利用したログイン状態の管理
LoginUserProviderの作成useContextを用いた状態管理
Step3_ReactでLogin機能を実装：ログイン画面の作成
Login.jsの作成useStateを用いたフォーム入力管理useLoginカスタムフックの作成- ログイン処理の実装（APIを利用したユーザー認証）
Step4_ReactでLogin機能を実装：ログイン後の画面遷移とユーザー情報の表示
Home.jsの作成useLocationを用いたログイン情報の取得LoginUserContextを利用したログイン状態の管理
Step5_ReactでLogin機能を実装：ヘッダーとメニューの作成
Header.jsの作成（Material UIを使用）- メニュー (
BasicMenu.js) の実装 - ログアウト機能の実装
Step6_ReactでLogin機能を実装：ルーティングの設定
react-router-domを使ったルーティングNavigateを利用したログイン制御- 未ログイン時のリダイレクト設定
Step7_ReactでLogin機能を実装：エラーハンドリングとログイン失敗画面
- ログイン失敗時の処理 (
LoginFailed.js) - ネットワークエラー発生時の対応