ローディング・エラー・空状態

なぜ学ぶか： 「一覧を表示して」と頼むと、AIは成功パターンの画面だけ作りがちです。でも実際は「読み込み中」「失敗した」「0件だった」が毎日起きます。データを表示するUIの「完成の条件」を、例で見てください。

まずはこの例を見てみましょう

function PostList({ loading, error, posts }: Props) {
  // 4つの状態を、上から順に処理していく（定石の形）
  if (loading) return <p>読み込み中…</p>;
  if (error) return <p>読み込めませんでした。再試行してください。</p>;
  if (posts.length === 0) return <p>まだ投稿がありません。</p>;

  // ここまで来たら正常表示
  return <ul>{posts.map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

ローディング → エラー → 空 → 正常。この4分岐が揃っていれば「完成」です。