【React×ログイン認証】ユーザー管理アプリを誰でも簡単に作る方法を徹底解説！

「ログイン認証って難しそう」「ユーザー管理を実装できる気がしない」
そんな風に感じていませんか？

実はReactと簡単な仕組みを使えば、誰でもシンプルなユーザー管理アプリが作れるんです。

この記事では、小学生でも理解できるように、画面設計・ユーザー登録・ログイン処理・ログアウト・保護ページまで丁寧に解説します。

「Reactでログイン機能を作りたい」「認証の仕組みを学びたい」という方は、この記事を読むだけで一通りの知識が身につきます。

コードもすべて掲載しているので、コピペで動かすことも可能です。

Reactでユーザー管理を実装する意味とは？
1. ユーザー管理アプリの需要が高まる背景
2. Reactを使うメリットと適性
Reactの環境構築と基本設定方法
1. プロジェクトの作成とライブラリの準備
2. ルーティングと画面遷移の設計
Reactでログイン認証を実装する手順
1. ユーザー登録とパスワードの保存
2. ログイン処理とセッション管理の仕組み
Reactでユーザー情報を管理する仕組み
1. ユーザー状態の保持と保護ページの設定
2. ログアウト機能の作り方
Reactユーザー管理アプリの注意点と改善例
1. セキュリティ対策とその理由
2. 簡単にできる改善ポイントとは？
Reactで作るユーザー管理アプリの完成形
1. すべてのコードをまとめて紹介
  1. App.js
  2. ProtectedRoute.js
2. 応用できる機能追加アイデアも紹介
まとめ

Reactでユーザー管理を実装する意味とは？

ユーザー管理アプリの需要が高まる背景

結論：ユーザー管理はあらゆるWebサービスの基盤です。

今やオンライン上のサービスは、会員制やログイン機能が当たり前です。たとえば：

SNSや掲示板
ECサイト
オンライン学習サイト
勤怠管理・社内ツール

これらのサービスに共通するのが、「個人を識別して状態を記録する」仕組みです。
この中核にあるのがユーザー管理です。

日本でも、デジタル庁（https://www.digital.go.jp/policies/digital-id/）が「デジタルID」の重要性を訴えており、
個人認証のスキルは将来性が高い分野だといえます。

Reactを使うメリットと適性

結論：Reactは小規模から中規模まで対応できる万能な道具です。

Reactには以下の利点があります：

状態管理が得意（ログイン状態などの切り替えが簡単）
部品化しやすい（ログインフォームや保護ページを部品として再利用可能）
学習コストが比較的低い（公式ドキュメントが充実）

小中規模のアプリを作りながら、認証の流れを学ぶには最適なフレームワークです。

Reactの環境構築と基本設定方法

プロジェクトの作成とライブラリの準備

結論：CLIと必要な追加パッケージで準備は完了します。

まず、ターミナルで以下を実行してReactアプリを作成します：

npx create-react-app user-auth-app
cd user-auth-app

次に、以下のライブラリを追加しましょう：

1	`npm` `install` `react-router-dom`

これで画面遷移とルーティングができる状態になります。

ルーティングと画面遷移の設計

結論：ログインページ・登録ページ・ホームページを分けましょう。

ファイル構成例は以下の通りです：

src/
├── App.js
├── components/
│   ├── Login.js
│   ├── Signup.js
│   ├── Home.js

ルート設定はApp.jsに記述します：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
import Signup from './components/Signup';
import Home from './components/Home';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </Router>
  );
}

Reactでログイン認証を実装する手順

ユーザー登録とパスワードの保存

結論：まずは登録フォームを作りましょう。

import { useState } from 'react';
function Signup() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleSignup = () => {
    localStorage.setItem('user', JSON.stringify({ username, password }));
    alert('登録が完了しました！');
  };
  return (
    <>
      <h2>ユーザー登録</h2>
      <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="ユーザー名" />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="パスワード" />
      <button onClick={handleSignup}>登録</button>
    </>
  );
}

パスワードは暗号化するのが本来の手順ですが、今回は簡易版です。

ログイン処理とセッション管理の仕組み

結論：保存した情報と一致するか確認してログインさせます。

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = () => {
    const savedUser = JSON.parse(localStorage.getItem('user'));
    if (savedUser?.username === username && savedUser?.password === password) {
      localStorage.setItem('loggedIn', true);
      alert('ログイン成功！');
    } else {
      alert('ログイン失敗');
    }
  };
  return (
    <>
      <h2>ログイン</h2>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" />
      <button onClick={handleLogin}>ログイン</button>
    </>
  );
}

Reactでユーザー情報を管理する仕組み

ユーザー状態の保持と保護ページの設定

結論：ログイン済みかどうかを常に確認して表示を切り替えることが大切です。

保護ページは、ログインしていないとアクセスできないように制限します。

import { Navigate } from 'react-router-dom';
function ProtectedRoute({ children }) {
  const isLoggedIn = localStorage.getItem('loggedIn') === 'true';
  return isLoggedIn ? children : &lt;Navigate to="/login" />;
}

App.jsでこのように使います：

&lt;Route path="/home" element={&lt;ProtectedRoute>&lt;Home />&lt;/ProtectedRoute>} />

これで、ログインしていない状態では/homeへアクセスできなくなります。

ログアウト機能の作り方

結論：localStorageの情報を削除してログイン状態をリセットしましょう。

function Home() {
  const handleLogout = () => {
    localStorage.removeItem('loggedIn');
    alert('ログアウトしました');
  };
  return (
    <>
      <h2>ホーム画面</h2>
      <button onClick={handleLogout}>ログアウト</button>
    </>
  );
}

ボタンを押すとログアウト状態になり、再ログインが必要になります。

Reactユーザー管理アプリの注意点と改善例

セキュリティ対策とその理由

結論：パスワードは絶対に平文で保存しないこと。

今回の例は学習用としてlocalStorageを使っていますが、実際の運用では次のような対策が必要です：

パスワードは暗号化（ハッシュ化）して保存
トークンを使った認証（JWTなど）
HTTPS通信の利用
サーバー側で認証処理を行う

万が一、localStorageの情報が漏れると、全てのユーザー情報が危険にさらされます。
そのためローカルだけで認証を完結する方法は推奨されません。

簡単にできる改善ポイントとは？

改善の例を以下に挙げます：

登録時にバリデーション（未入力チェックや文字数制限）
ログイン失敗時にエラーメッセージを表示
ログイン後、自動でホームにリダイレクト
セッションの有効期限を設ける

これらを実装することで、より実践的なユーザー管理アプリになります。

Reactで作るユーザー管理アプリの完成形

すべてのコードをまとめて紹介

ここでは各ファイルの構成と内容をまとめて紹介します。

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './components/Login';
import Signup from './components/Signup';
import Home from './components/Home';
import ProtectedRoute from './components/ProtectedRoute';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/home" element={<ProtectedRoute><Home /></ProtectedRoute>} />
      </Routes>
    </Router>
  );
}
export default App;

ProtectedRoute.js

import { Navigate } from 'react-router-dom';
function ProtectedRoute({ children }) {
  const isLoggedIn = localStorage.getItem('loggedIn') === 'true';
  return isLoggedIn ? children : <Navigate to="/login" />;
}
export default ProtectedRoute;