ReactとLaravelで作るログイン機能構築の手順

はじめに

ReactとLaravelを組み合わせてログイン機能を実装する過程をまとめます。
Docker環境での構築から、フロントエンドとバックエンドの連携までをカバーし、詰まったポイントや対応策も紹介します。

---

開発環境の構築

• Dockerでの環境構築
  • Laravel（PHP 8.2）
  • React（Node.js 18）
  • MySQL 5.7

docker-compose up -d --build
docker exec -it <container_name> bash

• Laravelのセットアップ

composer install
php artisan key:generate
php artisan migrate

• Reactのセットアップ

npm install
npm start

---

LaravelでのAPI実装

AuthControllerでログインと登録機能を実装。

public function login(Request $request)
{
    $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    $user = User::where('email', $request->email)->first();

    if (!$user || !Hash::check($request->password, $user->password)) {
        return response()->json(['message' => 'Unauthorized'], 401);
    }

    $token = $user->createToken('auth_token')->accessToken;

    return response()->json(['token' => $token]);
}

---

Reactでのフロントエンド実装

Login.tsx

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import AuthCard from "../components/AuthCard";

const Login: React.FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const navigate = useNavigate();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();

    const response = await fetch("http://localhost:9000/api/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

    const data = await response.json();
    if (response.ok) {
      localStorage.setItem("token", data.token);
      navigate("/dashboard");
    } else {
      setError("ログインに失敗しました。");
    }
  };

  return (
    <AuthCard title="ログイン">
      {error && <p className="text-red-500 text-sm mb-4">{error}</p>}
      <form onSubmit={handleLogin} className="space-y-4">
        <input
          type="email"
          placeholder="メールアドレス"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full border rounded-md px-3 py-2"
          required
        />
        <input
          type="password"
          placeholder="パスワード"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full border rounded-md px-3 py-2"
          required
        />
        <button
          type="submit"
          className="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600"
        >
          ログイン
        </button>
      </form>
    </AuthCard>
  );
};

export default Login;

つなったポイント

---

1. Laravel 11から10へのダウングレードで発生したエラー

最初はLaravel 11で進めていたのですが、動作が不安定だったため、Laravel 10にダウングレードしました。

ダウングレードして発生したエラー

• Application::configureが存在しないというエラー。
• php artisanコマンドが実行できない。

対処法

• bootstrap/app.phpの内容をLaravel 10に合わせて修正。
• artisanファイルもLaravel 10に対応するように修正。

これでLaravelの環境は無事に動作するようになりました。

---

2. TailwindCSSが反映されない問題

ReactでTailwindCSSを導入する際にもトラブルが発生。Docker内でnpm installを行うと、依存関係のエラーで失敗してしまいました。

発生したエラー

• npmの依存関係で--legacy-peer-depsオプションが必要。
• tailwindcssがDocker内でうまく認識されない。

対処法

• ローカル環境でnpm install -D tailwindcss postcss autoprefixer --legacy-peer-depsを実行。
• Dockerのビルドをやり直し。
• npx tailwindcss init -pで設定ファイル（tailwind.config.jsとpostcss.config.js）を作成。
• index.cssにTailwindCSSの@tailwindディレクティブを追加。

@tailwind base;
@tailwind components;
@tailwind utilities;

これでTailwindCSSがしっかりと反映されるようになりました。

まとめ

ログイン機能の実装自体はスムーズでしたが、環境構築時のエラー解決が必要だった。
特にバージョン周りの問題は一つ一つ解決が必要。
今後のために、Dockerでのバージョン管理やエラー時のログ取得方法なども把握しておくと良いかも。