ChatGPTを使用したアプリ開発記【編集したアイコンを投稿画面に反映】

🔧【UI部分】アイコンの表示場所（ようこそ〜ログアウト）

App.js

{user.photoURL ? (
  <img src={profilePhotoURL} alt="アイコン" className='w-8 h-8 rounded-full inline-block mr-2' />
) : (
  <img src="/default-icon.png" alt="アイコン" className='w-8 h-8 rounded-full inline-block mr-2' />
)}

解説：
• user.photoURL ?：Firebase Authのuserオブジェクトに写真URLがあればそれを使う。
• img src={profilePhotoURL} ... /：Firestoreのusersコレクションに保存されているプロフィール画像（profilePhotoURL）を表示。
• className='w-8 h-8 rounded-full inline-block mr-2'：幅8、高さ8（=32px）、丸型、インラインブロック、右にマージン（スペース）2。
• elseブロック：写真URLが無ければデフォルトアイコン/default-icon.pngを表示。

🔧【UI部分】投稿者一覧でのアイコン表示

App.js

{user.photoURL ? (
  <img
    src={post.photoURL || "/default-icon.png"} alt="アイコン"
    className='w-8 h-8 rounded-full inline-block mr-2'
  />
) : (
  <img src="/default-icon.png" alt="アイコン" className='w-8 h-8 rounded-full inline-block mr-2' />
)}

解説：
• user.photoURL を条件に分岐しているが、本来 post.photoURL の有無で分岐すべきかもしれません（※改善の余地あり）。
• src={post.photoURL || "/default-icon.png"}：投稿時に保存されたアイコン画像 or デフォルト。
• 以降のクラス指定は上と同じ。

🔁【ロジック部分】ログインユーザーのアイコン読み込み（useEffect）

Appp.js

const unsub = onAuthStateChanged(auth, (currentUser) => {
  setUser(currentUser);

• Firebaseのログイン状態監視。ログインユーザーが変更されたら currentUser を取得し、状態に保存。

Appp.js

if (currentUser) {
  const profileDoc = await getDoc(doc(db, 'users', currentUser.uid));

• Firestoreの users コレクションからログインユーザーのプロフィールを取得。

Appp.js

if (profileDoc.exists()) {
  const data = profileDoc.data();
  setProfileName(data.name || currentUser.displayName || '匿名');
  setProfilePhotoURL(data.photoURL || currentUser.photoURL || '');
}

• プロフィール情報が存在すれば name と photoURL を状態に保存。
• データが無い場合は Firebase Auth のデフォルト値を代用。

🔁【ロジック部分】投稿一覧取得時のアイコン読み込み

Appp.js

const userDoc = await getDoc(doc(db, 'users', postData.uid));

• 投稿ごとに、投稿者の uid を使って users コレクションからプロフィール取得。

Appp.js

if (userDoc.exists()) {
  const userData = userDoc.data();
  nameFromUserCollection = userData.name || nameFromUserCollection;
  profilePhotoURL = userData.photoURL || profilePhotoURL;
}

• Firestoreにあれば名前とアイコンURLを上書き。

Appp.js

return {
  id: docSnap.id,
  ...postData,
  displayName: nameFromUserCollection,
  photoURL: profilePhotoURL || postData.photoURL || ''
};

• 投稿データのオブジェクトに photoURL を含めて setPosts() に渡す。

📝【投稿処理】投稿時にプロフィール画像を保存

Appp.js

let profileName = '匿名';
let profilephoto = '';
if (user) {
  const profileDoc = await getDoc(doc(db, 'users', user.uid));
  if (profileDoc.exists()) {
    const data = profileDoc.data();
    profileName = data.name || user.displayName || '匿名';
    profilephoto = data.photoURL || user.photoURL || '';
  }
}

• 投稿時にも Firestoreからユーザー情報（名前・アイコン）を取得し、投稿データに含める。

Appp.js

const newPost = {
  ...
  displayName: profileName,
  photoURL: profilephoto || user?.photoURL || '',
  ...
};

• 投稿に photoURL を付けて保存 → 他ユーザーが読み取るために使う。

UI