5分刻みで時間を選択するセレクトボックスの作り方

はじめに

時間割アプリの開発にあたって、9:00~21:00までを5分刻みで選択できるセレクトボックスを作成しました。
その際に記述したコードとその解説をしていきます。

機能の詳細

• 完成時の画面表示
  

• 実装する機能
  セレクトボックスをクリックすると、9:00~21:00までを5分刻みで選択できる

• 最終的なコード
  コンポーネント名はTimeTableForm、呼び出し関数名はgenerateTimeOptions。

関数部分.jsx

export const TimeTableForm = ({ day, isInvalid }) => {
  const generateTimeOptions = () => {
    const options = [];
    for (let hour = 9; hour <= 21; hour++) {
      for (let minute = 0; minute < 60; minute += 5) {
        const time = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
        options.push(<option key={time}>{time}</option>);
      }
    }
    return options;
  };    

呼び出し部分.jsx

              <div>
                <SelectWrapper contains="LargeSelectBox">
                  <LargeSelectBox>{generateTimeOptions()}</LargeSelectBox>
                </SelectWrapper>
                ~
                <SelectWrapper contains="LargeSelectBox">
                  <LargeSelectBox>{generateTimeOptions()}</LargeSelectBox>
                </SelectWrapper>
              </div>

解説

時間(時と分)を文字列にして<option>タグ内に埋め込み選択肢として生成している。
1.空の配列optionを作成

 const options = [];

2.外側のforループで 9時から21時（9:00～21:00）までの時間を 1 時間刻みで繰り返す

for (let hour = 9; hour <= 21; hour++) {}

3.内側の for ループで、各時間に対して、0分、5分、10分...と5分刻みで繰り返す

 for (let minute = 0; minute < 60; minute += 5) {}

4.時と分を padStart(2, "0") を使って2桁に揃え、例えば 9 時を "09" とし、: で結合した文字列を作成
（例: "09:00", "09:05", "09:10"...）

const time = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;

5.生成した時間をkeyとして持つ<option>タグを配列optionsに追加

options.push(<option key={time}>{time}</option>);

6.最終的にoptions配列を返しコンポーネント内で使用できる

export const TimeTableForm = ({ day, isInvalid }) => {
  const generateTimeOptions = () => {
    const options = [];
    for (let hour = 9; hour <= 21; hour++) {
      for (let minute = 0; minute < 60; minute += 5) {
        const time = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
        options.push(<option key={time}>{time}</option>);
      }
    }
    return options;
  };    

さいごに

もし言葉不足や誤解を生む表現、誤った描写があれば教えていただけると助かります。
また、別のもっと適切な方法があればぜひ教えていただきたいです。

時間割アプリで使用した他の機能はこちら