ChatGPTでアプリ開発記 20250506

✅ ステップ 1：Post にコメント配列を追加

App.js

const newPost = {
  text: text,
  time: formattedTime,
  likes: 0,
  user: user?.email,
  imageUrl,
  videoUrl,

// コメントを配列として追加
  comments: [], 
};

✅ ステップ 2：posts.map の中にコメント入力欄と表示を追加

App.js

              {/* コメント一覧表示 */}
              <h4>コメント</h4>
              <ul>
              // post.comments（各投稿のコメント配列）を .map() で繰り返し処理。
	          // comment がコメントの中身、cIndex がそのインデックス番号。
                {post.comments.map((comment, cIndex) => (

                // key={cIndex} は React がリストの要素を追跡するために必要。
                  <li key={cIndex} style={{ fontSize: '0.9rem' }}>{comment}</li>
                ))}
              </ul>
              {/* コメント入力欄 */}
              <textarea
                placeholder='コメントを追加...'
                rows={3}

                // 	ユーザーが入力したときに実行される処理。
	            // setPosts を使って、状態 posts を更新。
                onChange={(e) => setPosts((prev) => {

                // 現在の posts 配列をコピーして編集可能にします。
                  const updated = [...prev];

             // 対象の投稿（index）の draftComment プロパティに、入力中の値を保存します。
                  updated[index].draftComment = e.target.value;

                  // 編集した投稿配列を返し、React の状態として更新します。
                  return updated;
                })}
                // テキストエリアに表示する値を、post.draftComment から取得。
	            // 未入力なら空文字列を表示。
                value={post.draftComment || ''}
                style={{ width: '100%', marginTop: '0.5rem' }}
              />
              <button

              // ボタンがクリックされたときの処理。
	          // コメントが空でない場合のみ処理を進めます。
                onClick={() => {
                  if ((post.draftComment || '').trim()) {
                    handleAddComment(index, post.draftComment);
                    
                    // 入力欄をリセット（空文字にする）ために、draftComment を空に更新。
                    setPosts((prev) => {
                      const updated = [...prev];
                      updated[index].draftComment = ``;
                      return updated;
                    });
                  }
                }}
                style={{ marginTop: '0.0rem' }}
              >
                コメントする
              </button>
</button>

✅ ステップ 3：handleAddComment 関数を追加

App.js

// postIndex は、どの投稿にコメントを付けるかを示すインデックス（番号）。
// commentText は、実際に追加するコメントのテキスト内容。
const handleAddComment = (postIndex, commentText) => {

// 直接 posts を変更すると React の再レンダリングが正しく動かないため、安全に状態を更新するためにコピーを作成しています（イミュータブルな更新）。
  const updatedPosts = [...posts];

// 	指定された投稿（postIndex）の comments 配列に、新しいコメント（commentText）を追加しています。
  updatedPosts[postIndex].comments.push(commentText);

// コメントを追加した posts を React の状態として更新します。
// これにより、UI が最新の状態（コメントが追加された投稿）に再描画されます。
  setPosts(updatedPosts);
};

UI