プログラミング

React でのログイン実装

最終更新： 20/03/2025
1 分の読み

Reactを使用してアプリケーションでの「ログイン機能」を実装するためには、フロントエンド側で適切なコンポーネントを作成し、バックエンドとの通信を行い、ユーザー認証の状態を管理する必要があります。ここでは、Reactでのログイン処理を実装する方法を、初心者にもわかりやすく解説します。

1. 環境の準備

まず、Reactの開発環境を整えます。Node.jsとnpm（Node Package Manager）がインストールされていることを確認してください。次に、Reactプロジェクトを作成します。

関連記事
bash
npx create-react-app login-app
cd login-app
npm start

これで基本的なReactアプリケーションが立ち上がります。

2. ログインフォームの作成

ログインフォームは、ユーザー名とパスワードを入力するためのフィールドを持つコンポーネントです。フォームのデータを状態として管理し、送信時にバックエンドにリクエストを送る処理を実装します。

LoginForm.js

jsx
import React, { useState } from 'react';

const LoginForm = ({ onLoginSuccess }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // バリデーションチェック
    if (!username || !password) {
      setError('ユーザー名とパスワードは必須です');
      return;
    }

    try {
      const response = await fetch('https://your-api-endpoint.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
      });

      const data = await response.json();

      if (response.ok) {
        onLoginSuccess(data.token);  // 成功時にトークンを親コンポーネントに渡す
      } else {
        setError(data.message || 'ログインに失敗しました');
      }
    } catch (err) {
      setError('ネットワークエラーが発生しました');
    }
  };

  return (
    <div>
      <h2>ログインh2>
      <form onSubmit={handleSubmit}>
        <div>
          <label>ユーザー名:label>
          <input
            type="text"
            value={username}
            onChange={handleUsernameChange}
            required
          />
        div>
        <div>
          <label>パスワード:label>
          <input
            type="password"
            value={password}
            onChange={handlePasswordChange}
            required
          />
        div>
        <button type="submit">ログインbutton>
      form>
      {error && <p style={{ color: 'red' }}>{error}p>}
    div>
  );
};

export default LoginForm;

このコードでは、ユーザー名とパスワードを状態として管理し、フォームが送信されるとバックエンドのAPIにPOSTリクエストを送信します。APIからのレスポンスが成功であれば、認証トークンを親コンポーネントに渡し、エラーメッセージはユーザーに表示されます。

3. 親コンポーネントでのログイン状態管理

ログインに成功した後、認証トークンを保持して、アプリケーションの状態を更新する必要があります。このために、親コンポーネントでログイン状態を管理します。

App.js

jsx
import React, { useState } from 'react';
import LoginForm from './LoginForm';

const App = () => {
  const [authToken, setAuthToken] = useState(null);

  const handleLoginSuccess = (token) => {
    setAuthToken(token);
    localStorage.setItem('authToken', token);  // ローカルストレージにトークンを保存
  };

  const handleLogout = () => {
    setAuthToken(null);
    localStorage.removeItem('authToken');  // ログアウト時にトークンを削除
  };

  return (
    <div>
      {authToken ? (
        <div>
          <h2>ようこそ！h2>
          <button onClick={handleLogout}>ログアウトbutton>
        div>
      ) : (
        <LoginForm onLoginSuccess={handleLoginSuccess} />
      )}
    div>
  );
};

export default App;

このコンポーネントでは、ログイン後に得られた認証トークンをlocalStorageに保存し、アプリケーション内でユーザーのログイン状態を管理します。また、ログアウトボタンを表示し、ユーザーがログアウトできるようにしています。

4. ログイン状態の永続化

localStorageに保存された認証トークンを使用して、ページを再読み込みしてもユーザーがログインした状態を維持できます。アプリが起動した際に、localStorageからトークンを取得し、ログイン状態を自動的に復元します。

App.js (永続化の追加)

jsx
import React, { useState, useEffect } from 'react';
import LoginForm from './LoginForm';

const App = () => {
  const [authToken, setAuthToken] = useState(null);

  useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (token) {
      setAuthToken(token);
    }
  }, []);

  const handleLoginSuccess = (token) => {
    setAuthToken(token);
    localStorage.setItem('authToken', token);
  };

  const handleLogout = () => {
    setAuthToken(null);
    localStorage.removeItem('authToken');
  };

  return (
    <div>
      {authToken ? (
        <div>
          <h2>ようこそ！h2>
          <button onClick={handleLogout}>ログアウトbutton>
        div>
      ) : (
        <LoginForm onLoginSuccess={handleLoginSuccess} />
      )}
    div>
  );
};

export default App;

このコードでは、アプリケーションの最初のレンダリング時にlocalStorageからトークンを取得し、ログイン状態を復元します。これにより、ページを再読み込みしてもユーザーがログインした状態を維持できます。

5. 結論

Reactでログイン機能を実装するには、フォームコンポーネントを作成し、ユーザー入力を管理して、バックエンドのAPIと通信を行う必要があります。また、認証トークンをlocalStorageに保存し、ログイン状態を維持する方法も重要です。この基本的な実装をもとに、さらに高度な機能（例えば、リフレッシュトークンの管理やエラーハンドリングの強化など）を追加することができます。

最終更新： 20/03/2025
1 分の読み
Back to top button