Apps

012-Login+Graph｜Step6_React×FastAPI：新規登録画面を作成する

はじめに

ログイン機能に加え、新規ユーザーがアカウントを作成できるようにする必要があります。

本記事では、ReactとFastAPIを用いて新規登録画面を実装し、ユーザー情報をデータベースに保存する方法を解説します。

1. フロントエンド側の実装

新規登録画面 (Register.js) を作成し、ユーザーが username と password を入力できるフォームを用意します。
また、登録処理は useRegister フックを用いて管理し、FastAPI にリクエストを送信します。

📂 components/pages/Register.js

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

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

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

    const onClickRegister = () => {
        register(user);
    };

    return (
        <Container maxWidth="xs">
            <Box
                sx={{
                    marginTop: 8,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                }}
            >
                <Typography variant='h5'>ユーザー登録画面</Typography>

                {/* ユーザーネーム入力 */}
                <TextField
                    sx={{ marginTop: 4 }}
                    id="username"
                    name="username"
                    placeholder="sekkeiya"
                    autoComplete="username"
                    autoFocus
                    fullWidth
                    variant="outlined"
                    onChange={handleChange}
                />

                {/* パスワード入力 */}
                <TextField
                    sx={{ marginTop: 2 }}
                    name="password"
                    placeholder="••••••"
                    type="password"
                    id="password"
                    autoComplete="current-password"
                    required
                    fullWidth
                    variant="outlined"
                    onChange={handleChange}
                />

                {/* 登録ボタン */}
                <Button
                    sx={{ marginTop: 2 }}
                    color='error'
                    fullWidth
                    variant="contained"
                    onClick={onClickRegister}
                >
                    登録
                </Button>

                <Link to="/login" sx={{ alignSelf: 'center', marginTop: 2 }}>
                    登録済みの方はこちら
                </Link>
            </Box>
        </Container>
    );
};

export default Register;

2. 登録処理のカスタムフック (useRegister.js)

useRegister.js では、axios を使用して FastAPI に登録リクエストを送信します。
登録が成功すれば /registersucceeded に遷移し、失敗すれば /registerfailed に遷移します。

📂 hooks/useRegister.js

import { useNavigate } from 'react-router-dom';
import axios from "axios";

export const useRegister = () => {
    const navigate = useNavigate();

    const register = async (user) => {
        console.log("登録処理開始");
        console.log("入力されたユーザー名：", user.username);

        const endpoint = "http://127.0.0.1:8000/register/";

        try {
            const response = await axios.post(endpoint, {
                username: user.username,
                password: user.password
            }, {
                headers: { "Content-Type": "application/json" }
            });

            console.log("登録成功", response.data);
            navigate("/registersucceeded", { state: user });

        } catch (error) {
            console.log("登録エラー", error.response?.data || error.message);
            navigate("/registerfailed", { state: user });
        }
    };

    return { register };
};

📌 axios.post() を使用して FastAPI にリクエストを送信

  • state に username を含めて遷移し、登録成功・失敗画面で表示
  • try...catch を使い、エラー時の処理を適切に分岐

3. FastAPI 側のエンドポイント実装

バックエンド (FastAPI) で新規ユーザー登録を処理するエンドポイントを作成します。
データベースに保存 し、登録の成否に応じたレスポンスを返します。

📂 backend/main.py

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import Dict

app = FastAPI()

# 仮のデータベース
users_db: Dict[str, str] = {}

class UserRegister(BaseModel):
    username: str
    password: str

@app.post("/register/")
async def register(user: UserRegister):
    if user.username in users_db:
        raise HTTPException(status_code=400, detail="ユーザー名が既に存在します")
    
    # 仮のデータベースに登録
    users_db[user.username] = user.password
    return {"message": "登録成功", "username": user.username}

📌 users_db は仮のデータベース

  • 本番環境では SQLAlchemy + SQLite/PostgreSQL などのデータベース を使用する

📌 既存ユーザーのチェックを行う

  • すでに username が登録されている場合、400エラーを返す

4. ルーティングの設定

新規登録画面を React アプリに組み込み、ルーティングを設定します。

📂 src/App.js

import Register from './components/pages/Register';

function App() {
  return (
    <LoginUserProvider>
      <div className='App'>
        <Routes>
          {/* 省略 */}
          <Route path='/register' element={<Register />} /> {/* 新規登録画面 */}
          {/* 省略 */}
        </Routes>
      </div>
      <Footer />
    </LoginUserProvider>
  );
}

export default App;

まとめ

本記事では、新規ユーザーがアカウントを作成できるように、React と FastAPI を用いた新規登録機能 を実装しました。

✅ React で新規登録フォーム (Register.js) を作成
✅ カスタムフック (useRegister.js) で FastAPI にリクエストを送信
✅ FastAPI 側 (/register/) でユーザー情報をデータベースに保存
✅ React Router で /register ルートを追加し、新規登録画面を組み込み

-Apps