空コレクションのモックレスポンス

空コレクションレスポンス

空コレクションレスポンスは、クエリが結果を返さない場合に発生します。すべてのフロントエンドが適切に処理する必要がある重要なエッジケースです。レスポンスは空でないレスポンスと同じ構造を維持する必要があります。

レスポンス構造

{
  "data": [],
  "meta": {
    "total": 0,
    "page": 1,
    "perPage": 20,
    "totalPages": 0
  }
}

これが重要な理由

空状態は最も見落とされがちなUI状態の一つです。適切に設計された空状態は：

• データが見つからなかったことを明確に伝える
• 実行可能な次のステップを提供（フィルター調整、最初のアイテム作成など）
• レイアウトの一貫性を維持してページが「ジャンプ」しないようにする
• 「このフィルターに結果がない」と「まだデータが存在しない」を区別する

構造の一貫性

レスポンスがデータが入ったレスポンスとまったく同じ構造を維持していることに注目してください。dataフィールドは空配列（nullやフィールド欠落ではない）で、metaブロックはゼロ値で存在しています。この一貫性はクライアント側の解析にとって重要です。フロントエンドコードはnullチェックなしで常に安全にresponse.data.lengthにアクセスできます。

空状態のテスト

このモックでテストする際、UIが以下を確認してください：

1. 意味のある空状態メッセージを表示する
2. totalPagesが0の場合にページネーションコントロールを非表示にする
3. 「読み込み中...」を無期限に表示しない
4. データありから空への遷移を処理する（例：最後のアイテム削除後）