【TypeScript】任意の開始時刻〜終了時刻から15分刻みの時刻を作成する関数

背景

予約サイトで施設の予約時間を 15 分刻みで選択できるという要件があった際に、その要件を満たす予約時間の選択肢を表示させるための時刻の配列を作成したいと思いました。

前提

施設を予約できる開始時刻と終了時刻は API から取得し、それらをもとにクライアント側で 15 分刻みの時刻の配列を作成します。
取得できる時刻と表示する選択肢の時刻の表記は、09:00 のような hh:mm 方式です。

対応

関数は以下の通りです。

実装例

const getReservationTimeRange = (
  reservationStart: string,
  reservationEnd: string
): string[] => {
  const reservationStartDate: Date = new Date(
    `1999-12-31T${reservationStart}:00Z`
  );
  const reservationEndDate: Date = new Date(`1999-12-31T${reservationEnd}:00Z`);
  if (reservationStartDate > reservationEndDate) return [];
  const minuteInterval: number = 15;
  const notIncludedStartTimeItemCount: number =
    reservationStartDate.getMinutes() / minuteInterval;
  const includedEndTimeItemCount: number =
    reservationEndDate.getMinutes() / minuteInterval + 1; // ~:00の個数も含めるため+1
  const arrayLength: number =
    (reservationEndDate.getHours() - reservationStartDate.getHours()) *
      (60 / minuteInterval) -
    notIncludedStartTimeItemCount +
    includedEndTimeItemCount;
  return [...Array(arrayLength)].map((_, i) => {
    const itemDate: Date = new Date(reservationStartDate.getTime());
    itemDate.setMinutes(i * minuteInterval + reservationStartDate.getMinutes());
    return itemDate.toISOString().substring(11, 16);
  });
};

const startFromAPI: string = "15:30"; // APIから取得した開始時刻
const endFromAPI: string = "20:00"; // APIから取得した終了時刻

const reservationTimeRange: string[] = getReservationTimeRange(
  startFromAPI,
  endFromAPI
);

console.log(reservationTimeRange);

ログ

["15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00",
 "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45",
 "19:00", "19:15", "19:30", "19:45", "20:00"]

おまけ

minuteInterval の値を 30 や 10 に設定すれば、30 分刻みや 10 刻みの時刻の配列も作成できます。

ログ(minuteInterval=30)

 ["15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30",
  "19:00", "19:30", "20:00"]

ログ(minuteInterval=10)

["15:30", "15:40", "15:50", "16:00", "16:10", "16:20", "16:30",
 "16:40", "16:50", "17:00", "17:10", "17:20", "17:30", "17:40",
 "17:50", "18:00", "18:10", "18:20", "18:30", "18:40", "18:50",
 "19:00", "19:10", "19:20", "19:30", "19:40", "19:50", "20:00"]

参考資料

• 30 分刻みの時刻を動的生成
  時刻の範囲が 0 時から 23 時まで固定して良い場合は、こちらの記事を参考にするとコード量が少なくできます。