Sprint Cycle 16

ダッシュボードAPI接続、
来客数時系列エンドポイント追加

2026-02-23 5 min read

概要

Sprint Cycle 16では、ダッシュボードに残っていた14箇所のTODO/プレースホルダーを全て実装に置き換え、API経由でのリアルタイムデータ取得を実現しました。来客数の時系列API（週次・時間帯別）を新規追加し、Chart.jsとの自動連携も完了。デモデータフォールバック付きでAPI未接続時も動作保証されます。

対応内容状態
ダッシュボードAPI接続（14箇所のTODO解消）完了
apiFetch()ヘルパー関数追加完了
来客数時系列API（weekly/hourly）完了
ダッシュボード機能強化（チャート・アラート・CSV等）完了
Supabase設定の構成化完了

1. ダッシュボードをAPI接続に切り替え

これまでダッシュボードの各データ表示箇所にはTODOコメントやプレースホルダーが残っていました。今回、14箇所すべてを実際のAPI呼び出しに置き換えました。

API未接続時やエラー時にはデモデータにフォールバックする設計のため、開発環境やオフライン時でも画面が正常に表示されます。本番環境ではAPIから取得したリアルタイムデータが自動的に反映されます。

2. apiFetch()ヘルパー関数

API通信を統一的に行うためのヘルパー関数を追加しました。Supabase認証トークンを自動的にリクエストヘッダーに付与し、認証状態を意識せずにAPI呼び出しが可能です。

// API通信ヘルパー
async function apiFetch(path, options = {}) {
  const token = supabase
    ? (await supabase.auth.getSession())?.data?.session?.access_token
    : null;
  const headers = { 'Content-Type': 'application/json', ...options.headers };
  if (token) headers['Authorization'] = `Bearer ${token}`;
  const resp = await fetch(`${API_BASE}${path}`, { ...options, headers });
  if (!resp.ok) throw new Error(`API ${resp.status}`);
  return resp;
}

この関数により、ダッシュボード内の全データ取得が統一的なパターンで記述でき、認証トークンの取得・付与を各呼び出し箇所で個別に行う必要がなくなりました。

3. 来客数時系列API追加

ダッシュボードのチャート表示に必要な時系列データを返す2つのエンドポイントを新規追加しました。

週次来客数（過去7日間）

GET /api/v1/stores/me/stats/weekly は過去7日間の日別来客数を返します。ダッシュボードの週次トレンドチャートに直接バインドされます。

// 週次来客数エンドポイント
#[derive(Serialize)]
struct WeeklyStats { days: Vec<DailyEntry> }
#[derive(Serialize)]
struct DailyEntry { date: NaiveDate, count: i64 }

async fn get_weekly_stats(
    AuthUser(user_id): AuthUser,
    State(state): State<AppState>,
) -> Result<Json<WeeklyStats>, ApiError> { ... }

時間帯別来客数（本日）

GET /api/v1/stores/me/stats/hourly は本日の時間帯別来客数を返します。ピーク時間帯の把握やスタッフ配置の最適化に活用できます。

db.rsには対応するデータ取得関数get_weekly_visitor_counts()とget_hourly_visitor_counts()を追加しました。

4. ダッシュボード機能強化

API接続により、ダッシュボードの各機能がリアルデータで動作するようになりました。

特にアラート機能は、APIが利用可能ならAPIから、APIが落ちていればSupabaseから直接、それもダメならデモデータを表示する3段階フォールバック構成としました。ユーザーが空の画面を見ることはありません。

5. Supabase設定の構成化

window.__MISEBAN_CONFIGオブジェクトを導入し、Supabase URLとAnon Keyを外部から注入可能にしました。これにより、環境ごとの設定切り替えが容易になり、ハードコードされた認証情報を排除しました。

デプロイ環境に応じて設定値を差し替えるだけで、開発・ステージング・本番のSupabaseインスタンスを切り替えられます。

テスト結果

全13テスト合格。既存テストへの影響はありません。

指標BeforeAfter
TODO/プレースホルダー残数14件0件
テスト合格数13/1313/13
新規APIエンドポイント-2件（weekly/hourly）

ダッシュボードのTODOを全て解消し、API経由でのリアルデータ表示を実現しました。デモデータフォールバック付きで堅牢性も確保。次のスプリントでは、取得データを活用した分析機能の拡充に取り組みます。

← ブログ一覧に戻る 無料で始める →