📚
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でのバージョン管理やエラー時のログ取得方法なども把握しておくと良いかも。
Discussion