FesTime
<BusStatus />

バス時刻表

シャトルバスや臨時便の運行ダイヤおよび発車時刻の案内。発着地別の絞り込み、発車までのカウントダウン、直近1時間以内の便の抽出に対応。

使い方

import BusStatus from "@/features/bus/components/BusStatus";

<BusStatus />

Hooks src/features/bus/hooks/useBusData.ts

静的 JSON ファイル public/data/bus.json から時刻表データを非同期ロードし、現在時刻や乗降地フィルターに応じた運行便一覧を提供します。

プロパティ / 関数型役割
filteredBusesBusTrip[]選択された乗降地およびフィルター (1時間以内 / すべて) に適合した運行便配列
fromStop / toStopstring現在選択されている乗車停留所および降車停留所
setFromStop(stop) / setToStop(stop)(stop : string) => void乗車・降車停留所の変更
filterMode"hour" | "all"現在のフィルターモード (直近1時間以内 / 全便表示)
setFilterMode(mode)(mode : "hour" | "all") => voidフィルターモードの切り替え
stopOptions{ value: string, label: string }[]セレクトボックス用の多言語対応済み停留所選択肢
nowTimeStrstringTimeContext から取得した現在時刻の HH:mm 形式文字列
newIndexMapMap<string, number>「すべて」展開時に新規表示されるバスカードのアニメーション遅延 (Stagger) 計算用インデックスマップ

コード

カウントダウンと直近便の自動判定

現在時刻以降に出発する直近の便を検出し、出発までの残り分数バッジや出発済み表示を自動計算します。

src/features/bus/hooks/useBusData.ts
const isInHourRange = (bus: BusTrip) => {
  const isUpcoming = bus.isoTime > nowTimeStr;
  return isUpcoming && bus.isoTime <= oneHourLaterStr;
};

データ構造 public/data/bus.json

往路 (Outbound) と復路 (Inbound) の停留所名および時刻配列を定義します。

public/data/bus.json
{
  "Outbound": {
    "route": ["キャンパス 発", "中央駅 着"],
    "time": [
      ["10:00", "11:00", "12:00", "13:00"],
      ["10:30", "11:30", "12:30", "13:30"]
    ]
  },
  "Inbound": {
    "route": ["中央駅 発", "キャンパス 着"],
    "time": [
      ["10:30", "11:30", "12:30", "13:30"],
      ["11:00", "12:00", "13:00", "14:00"]
    ]
  }
}