データが表示されない

空白のページ、データの欠落、空を返すAPIルートのデバッグ方法。

「データが表示されない」とはどういう状態？

ページはエラーなしで読み込まれるが、何かが欠けている：

• リストが空
• カードにコンテンツがない
• グラフにデータポイントがない
• テーブルに行がない
• APIが[]またはnullを返す

データフローの理解

データはチェーンを通って流れます。どこかのリンクが壊れると、データが表示されません：

データベース（Neon上のPostgreSQL）
  -> APIルートのSQLクエリ（app/api/...）
    -> ページまたはコンポーネントのfetch()呼び出し
      -> JSXでレンダリング

データが欠けている場合、これらのステップのどこかが壊れています。

ステップ1：ブラウザのネットワークタブを確認

ネットワークタブはAPIが正確に何を返しているか表示します：

1. Chrome DevToolsを開く（F12 または Cmd+Option+I）
2. 「Network」タブをクリック
3. ページをリロード
4. APIコールを探す（「Fetch/XHR」でフィルタ）
5. リクエストをクリックしてResponseを確認
6. レスポンスにデータがあるか、空かを確認

これで問題がどこにあるかがわかります：

ステップ2：APIルートをデバッグ

APIが空のデータを返す場合、クエリが間違っている可能性があります：

ステップ3：フロントエンドをデバッグ

APIがデータを返しているのにページが空白の場合：

データが実際に表示される場所

データは以下の環境でのみ表示されます:

• PRプレビュー環境（分離されたNeonデータベースブランチ）
• 本番環境（ライブアプリ）

アプリはローカルで動かさないので、「ローカルのデータ」を確認することはありません。変更をプッシュし、PRを開き、PRコメントに投稿されるプレビューURLでテストします。プレビュー環境には実際の（分離された）データベースが付くので、そこで本当の挙動が確認できます。

# PRコメントにあるプレビューURLに置き換える
curl https://your-app-pr-123.up.railway.app/api/your-route

よくある原因

• APIエンドポイントURLの間違い — fetchのURLのタイプミス
• データベースクエリが間違ったカラムを返す — SELECTに必要なフィールドが含まれていない
• データ形式の不一致 — APIは{ data: [...] }を返すがコンポーネントは[...]を期待
• エラーハンドリングの欠如 — fetchがサイレントに失敗しデータが表示されない
• 環境変数が未設定 — RailwayでDATABASE_URLが欠落（デプロイ設定を確認）

クイズ