Apps

011-Login｜Step3_ReactでLogin機能を実装：ログイン画面の作成

ログイン機能を実装するために、以下の要素を作成・実装します。

  1. Login.js の作成
  2. useState を用いたフォーム入力管理
  3. useLogin カスタムフックの作成
  4. APIを利用したユーザー認証の実装

1. Login.js の作成

ログインページのコンポーネントを作成し、ユーザー名とパスワードの入力フォームを用意します。

src/components/pages/Login.js

import React, { useState } from 'react';
import { Container, Box, Typography, TextField, Button } from '@mui/material/';
import { Link } from 'react-router-dom';
import { useLogin } from "../hooks/useLogin";

const Login = () => {
    const { login } = useLogin();
    const [user, setUser] = useState({
        username: "",
        password: "",
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setUser({ ...user, [name]: value });
    };

    const onClickLogin = () => {
        login(user);
    };

    return (
        <Container maxWidth="xs">
            <Box sx={{
                marginTop: 8,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
            }}>
                <Typography variant="h5">ログイン画面</Typography>

                <TextField
                    margin="normal"
                    id="username"
                    name="username"
                    type="text"
                    placeholder="ユーザー名"
                    autoFocus
                    fullWidth
                    variant="outlined"
                    onChange={handleChange}
                />

                <TextField
                    margin="normal"
                    id="password"
                    name="password"
                    type="password"
                    placeholder="パスワード"
                    fullWidth
                    variant="outlined"
                    required
                    onChange={handleChange}
                />

                <Button
                    fullWidth
                    variant="contained"
                    sx={{ mt: 3, md: 2 }}
                    onClick={onClickLogin}
                >
                    ログイン
                </Button>

                <Link to="/register">新規登録はこちら</Link>
            </Box>
        </Container>
    );
};

export default Login;

2. useState を用いたフォーム入力管理

上記の Login.js の useState によって、フォームの入力値を管理します。

const [user, setUser] = useState({
    username: "",
    password: "",
});

handleChange 関数を使い、入力された値を user ステートに反映させます。

const handleChange = (e) => {
    const { name, value } = e.target;
    setUser({ ...user, [name]: value });
};

この処理によって、入力フィールドの値が変更されるたびに user ステートが更新されます。

3. useLogin カスタムフックの作成

ログイン処理を useLogin カスタムフックとして作成し、ログイン処理を Login.js から分離します。

src/components/hooks/useLogin.js

import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { LoginUserContext } from "../providers/LoginUserProvider";

export const useLogin = () => {
    const { setLoginUser, setIsLogined } = useContext(LoginUserContext);
    const navigate = useNavigate();

    const login = async (user) => {
        console.log("ログイン処理開始");
        console.log("入力されたユーザー名:", user.username);

        const endpoint = "https://jsonplaceholder.typicode.com/users";

        try {
            const res = await axios.get(endpoint);
            const foundUser = res.data.find(u => 
                u.username === user.username && String(u.id) === user.password
            );

            if (foundUser) {
                console.log("ログイン成功:", foundUser);
                setLoginUser(foundUser.username);
                setIsLogined(true);
                navigate("/", { state: { username: foundUser.username } });
            } else {
                console.log("ユーザーが見つかりません");
                navigate("/loginfailed");
            }
        } catch (error) {
            console.error("ログインエラー:", error);
        }
    };

    return { login };
};

4. APIを利用したユーザー認証

ログイン時に jsonplaceholder の API を利用してユーザー認証を行います。

処理の流れ

  1. Login.js の onClickLogin で useLogin の login 関数を呼び出す。
  2. login 関数で API からデータを取得。
  3. 入力された username と password が一致するユーザーを検索。
  4. 一致すれば setLoginUser と setIsLogined(true) を実行し、ホーム画面へ遷移。
  5. 一致しなければ loginfailed 画面へ遷移。

まとめ

  • Login.js でフォームの入力を管理し、useLogin を使ってログイン処理を実行。
  • useLogin.js で API を利用したユーザー認証を実装し、状態を LoginUserContext で管理。

これで Reactを用いたログイン画面の作成 が完了しました！ 🎉

-Apps