ログイン・会員登録機能 実装ロードマップ(2025/07/13)
現在のUIコンポーネントを、実際に機能するWebアプリケーションにするための手順
フェーズ1: バックエンドAPIサーバーの構築 (Python/Flask)
まず、フロントエンドからのリクエストを処理するための「脳」となる部分を作ります。
ステップ1: プロジェクトの準備
- Flaskプロジェクト用のフォルダを作成し、仮想環境を有効化する
-
必要なライブラリをインストールする
pip install Flask Flask-SQLAlchemy Flask-Migrate Flask-CORS Flask-JWT-Extended python-dotenv -
基本的なFlaskアプリケーションファイル (
app.py) を作成する
ステップ2: データベースのセットアップ
- Flask-SQLAlchemy を使って、SQLiteに接続する設定を書く
- Userモデル（id, name, email, password_hash）を作成する
- Flask-Migrate を使ってデータベースに User テーブルを作成する
ステップ3: 認証APIの作成
-
/api/register- 名前、メールアドレス、パスワードを受け取る
- メール重複チェック
- パスワードのハッシュ化
- DB保存
-
/api/login- メールとパスワードを受け取る
- ユーザー確認とパスワード検証
- JWTトークン発行
-
CORS設定（例：
http://localhost:3000を許可）
フェーズ2: フロントエンドとバックエンドの連携 (React)
APIを呼び出して画面の状態を動的に変化させます。
ステップ4: API通信の準備
-
axiosインストール
npm install axios -
LoginForm.tsxとRegisterForm.tsxにhandleSubmit実装 - 通信中のローディングやエラーメッセージ表示を追加
ステップ5: グローバルなログイン状態の管理
-
AuthContextを Context API で作成 -
AuthProviderをアプリ全体に適用 (例：App.tsxやmain.tsx) -
login関数：JWTを localStorage に保存し Context を更新 -
logout関数：localStorage を削除し Context を未ログイン状態に
ステップ6: ログイン状態に応じたUIの切り替え
-
Header.tsx- ログイン状態に応じて人型アイコン or ユーザー名＋ログアウトボタンを表示
-
HeroSection.tsx- ログイン済みならセクション非表示
-
main.tsx- HeroSection の表示制御を実装