ChatGPTを使用したアプリ開発記【ヘッダー導入】

ロジックコード

Header.js

import React from "react";
import { useNavigate } from "react-router-dom";

	//	profileName: ヘッダーに表示するユーザー名（propsで渡される）
	//	profilePhotoURL: ユーザーのアイコン画像URL（propsで渡される）
	//	useNavigate: React Router の navigate() を使って画面遷移
	//	currentUserId: ログイン中のユーザーID（localStorageから取得）
function Header({ profileName, profilePhotoURL }) {
  const navigate = useNavigate();
  const currentUserId = localStorage.getItem('currentUserId');

  	//	localStorage の currentUserId を削除してログアウト状態にする
	//	/login に遷移してログイン画面に戻る
  const handleLogout = () => {
    localStorage.removeItem('currentUserId'); // ログイン情報削除
    navigate('/login'); // ログイン画面へ遷移
  };

  return (

  	//	fixed top-0 left-0: ページ上部に固定
	//	z-50: 前面に表示（他要素より上）
	//	w-full: 幅100%
	//	bg-white: 背景白
	//	shadow-md: シャドウ（立体感）
	//	px-6 py-3: パディング（左右・上下）
    <header className="fixed top-0 left-0 z-50 w-full bg-white shadow-md px-6 py-3">
      
      <div className="max-w-4xl mx-auto flex items-center justify-between h-10">
        {/* 左ロゴ */}
        <div className="flex items-center space-x-4 cursor-pointer" onClick={() => navigate('/')}>
          <img
            src="/Tomomitsu_keruma_SNS_logo.png"
            alt="SNS Logo"
            className="h-14 w-auto"
          />
          <h1 className="text-xl font-bold text-gray-700">Tomomitsu SNS</h1>
        </div>

        {/* 右 プロフィール情報 */}
        <div className="flex items-center space-x-4">
          <img
            src={profilePhotoURL || "/default-icon.png"}
            alt="アイコン"
            className="w-10 h-10 rounded-full border"
          />
          <span
            className="text-blue-600 font-semibold cursor-pointer hover:underline"
            onClick={() => navigate(`/profile/${currentUserId}`)}
          >
            {profileName || 'ゲスト'}さん
          </span>
          {/* 🔵 ログアウトボタン */}
          <button
            onClick={handleLogout}
            className="bg-blue-500 text-white px-4 py-2 rounded-2xl hover:bg-blue-600 transition duration-200 shadow-md"
          >
            ログアウト
          </button>
        </div>
      </div>
    </header>
  );
}

export default Header;

UIコード

App.js

import Header from './Header';

// この部分でHeaderコンポーネントを呼び出しており、Appコンポーネントのstateで保持しているプロフィールの名前・アイコン画像URLを渡しています。
        {/* ロゴを左上に固定表示 */}
        <Header
          profilePhotoURL={profilePhotoURL}
          profileName={profileName}
          user={user}
          setUser={setUser}
        />

UI