if文の多いJavaScript記述からif文を減らしてスッキリさせたいけど思いつかない

Question

前提・実現したいこと

指定時間の間は、指定したアプリを開かないChrome拡張機能を作成しました。指定時間は任意で複数用意することができます。
そのアプリの中で時間判定、すなわち現在時刻は設定時刻の範囲内にあるのかどうかの処理の記述があります。

発生している問題・エラーメッセージ

その記述の書き方が結果としてif文の多いものとなってしまい腑に落ちなくなってしまいました。
getTimeの中身ですが、
{'set1' : { [12, 00], [16, 00] } }
{'set2' : { [22, 00], [1, 00] } }
...
のように、開始時刻と終了時刻の順番で配列を格納しています。

function hoge(data){
//最初に呼び出される関数
  const getSort = Object.keys(data).sort(( a, b ) => data[a][0] > data[b][0] ? 1 : -1); //データを開始時刻を基準に昇順で並べ替えている
  for( let i = 0; getSort.length > i;i++ ) {
    let getTime = data[getSort[i]];
    const result = timeFind(getTime);
    (この行にあったresultがtrueだった場合にページ遷移する処理は省略しました)
    }
  }
});

const timeFind = (getTime) => {
//この関数の中でif文がたくさん出てきますがもっとシンプルに書ける気がしていますが思いつきません。
  const today = new Date();
  const nowHour = today.getHours();
  const nowMin = today.getMinutes();
  const startHour = Number(getTime[0][0]);
  const finishHour = Number(getTime[1][0]);
  const startMin = Number(getTime[0][1]);
  const finishMin = Number(getTime[1][1]);

  const termHour = finishHour - startHour;

  if(termHour < 0) {
    // 日を跨ぐ時間の処理
    if(nowHour > startHour || nowHour < finishHour) return true;
  }

  if(termHour > 0) {
    if(nowHour > startHour && nowHour < finishHour) return true;
  }

  if(termHour === 0){
    if(nowHour === startHour && nowHour === finishHour) {
      const result = nowMin >= startMin && nowMin <= finishMin ? true : false;
      return result;
    }
  }

  if(nowHour === startHour) return StartMin(startMin);
  if(nowHour === finishHour) return FinishMin(finishMin);

  function FinishMin(finishMin) {
    const result = nowMin <= finishMin ? true : false ;
    return result;
  }

  function StartMin(startMin) {
    const result = nowMin >= startMin ? true : false ;
    return result;
  }
//ここまで全てfalseであればfalseを返すためのreturn
  return false;
}

teratail投稿用にコメントをたくさん挿入しました。

試したこと

最初はif文を2,3回ほどで記述したものがあったのですが、日を跨いだり、時間判定した後に分判定を入れることを想定していなかったために思ったように動きませんでした。
それから修正バージョンも考えたのですがそれもうまく記述できず。if文をたくさん使うことにしましたがもっとスッキリさせたいです。

補足情報（FW/ツールのバージョンなど）

生JavaScript
Chrome拡張機能のローカルストレージにデータを格納

Comments

[Zuishin]

全部「分」に直したらどうでしょうか。

[think49]

awakewalkerさん
なぜ、Zuishinさんの指摘を無視しているのでしょうか。

[moimoi_sushi]

>全部「分」に直したらどうでしょうか。
試してからコメントしようと思っており保留していました。

Answer 1

こんにちは

以下、参考として回答します。使えそうなコードが一部でもあれば幸いです。

1. 一日の開始時刻を示す定数を定義

// 1日の開始を 06:00 とする
const START_HOUR_OF_DAY = 6;

上記によって、

• ["06", "00"] は今日の朝6時を表し、
• ["05", "59"]は翌日の午前5時59分を表す

ことになります。

２． サンプルデータ

サンプルデータとして以下のような配列 timeSets を考えます。

// サンプルデータ
const timeSets = [
  { set1: [["07", "00"], ["08", "30"]] },
  { set2: [["22", "45"], ["02", "00"]] },
  { set3: [["15", "00"], ["16", "30"]] },
  { set4: [["22", "00"], ["23", "30"]] },
  { set5: [["15", "30"], ["17", "00"]] },
  { set6: [["23", "00"], ["01", "00"]] },
  { set7: [["04", "30"], ["05", "45"]] }
];

3. moment の使用

ある日時と別の日時との比較や、１日加えるといった処理を楽に行うために、日時を扱うのに便利なライブラリ moment を使います。(※最近では moment よりも date-fns のほうが好まれる場合もありますが、この回答では、momentを使います。)

上記の timeSets の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する時刻を含むmomentオブジェクトを入れる変数を time とします。

// 時刻のフォーマット
const TIME_FORMAT = "HH:mm";

// 比較対象となる時刻
const time = moment("23:15",TIME_FORMAT);

4. 判定するコード

timeSetsの要素の中で、time が開始と終了の間にある（両端も含む）もののキーを表示するコードは以下のように書けます。

//  hour が 日付の変わる時刻未満であれば、日付を1日加算する。 
if (time.hour() < START_HOUR_OF_DAY) {
  time.add(1, 'day');
}

// timeSetsの要素の中で、time が開始と終了の間にある（両端も含む）ときのキーを表示
timeSets.forEach(set => {
  const [[key, [startAry, endAry]]] = Object.entries(set);

  const start = moment(`${startAry.join(":")}`, TIME_FORMAT),
    end = moment(`${endAry.join(":")}`, TIME_FORMAT);

  // hour が 日付の変わる時刻未満であれば、日付を1日加算する。
  if (start.hour() < START_HOUR_OF_DAY) {
    start.add(1, 'day');
  }
  if (end.hour() < START_HOUR_OF_DAY) {
    end.add(1, 'day');
  }

  // time が、start以上、end以下であれば、オブジェクトのキーを表示
  if (start.isSameOrBefore(time) && end.isSameOrAfter(time)) {
    console.log(key);
  }
});

上記を実行すると

"set2"

"set4"
"set6"

と表示されます。 以下は上記のコードをCodePenに写したものです。

• 動作確認用サンプル1： https://codepen.io/jun68ykt/pen/QWjMVmJ?editors=0012

上記のサンプルで、比較対象となる時刻 time を

const time = moment("05:00",TIME_FORMAT);

に変更すると、該当するtimeSetsの要素として、

"set7"

だけが表示されます。

以上、参考になれば幸いです。

追記

上記のサンプル1を、リファクタリングしたコードを挙げておきます。

• 動作確認用サンプル2： https://codepen.io/jun68ykt/pen/qBOVZba?editors=0012

これは、サンプル1を以下の２点

• moment のプラグインで、２つの日時による幅を表すオブジェクトを作ることのできる moment-range を使用し、これの containsメソッドを、時間帯の範囲内かどうかの判定に利用

　　　　

• 時刻を表す、文字列の配列（["07", "00"] や ["01", "00"]など） から、この配列の示す時刻を含む momentオブジェクトを作る関数を momentFromHHMM として、forEach ループから切り出す。

によってリファクタして、forEachループ本体のコード行数を減らしたものです。

追記2

回答した当初、サンプルコードや回答の文章の中で、変数名やプロパティ名の一部に "step" を使っていましたが、ご質問にある以下

{'set1' : { [12, 00], [16, 00] } }
{'set2' : { [22, 00], [1, 00] } }

にあわせて、"set" に修正しました。

Comments

[moimoi_sushi]

サンプルまでありがとうございます。
参考にしながら当てはめて動かしてみました

試しに日付の変わる
const date = moment("2020-05-01 06:00:00")
に時間を設定し

START_HOUR_OF_DAY = 6
のままで、

①5:00 ~ 7:00 と ②7:00 ~ 6:00 の２つの日付を跨ぐパターンを当てはめてみた所、判定が出ませんでした。

if (start.hour() < START_HOUR_OF_DAY) {
start.add(1, 'day');
}
if (end.hour() < START_HOUR_OF_DAY) {
end.add(1, 'day');
}
ここの所で上手くいっていないのかなと。
自分で良い感じにアレンジしようと試みたのですが良い感じにできず。６時を１日の始まりとするのは不等号を使うためで良かったのでしょうか。

[jun68ykt]

@awakewalkerさん
コメントありがとうございます。

まず、お知らせですが、回答に挙げたサンプル
https://codepen.io/jun68ykt/pen/QWjMVmJ?editors=0012
を一部修正しました。
修正前は、回答を書いた４月３０日でしか正しく結果が得られないコードだったのを修正しました。また、サンプルの修正に合わせて、回答の文章も修正、追加しました。

次に頂いたコメントにある

> ①5:00 ~ 7:00 と ②7:00 ~ 6:00 の２つの日付を跨ぐパターンを当てはめてみた所、判定が出ませんでした。

との件について回答します。

まず前提として回答に挙げているコードでは moment を使っており、判定対象の time 、および steps の各要素に入っている配列データも、ともに時刻が与えられており日付は無いのですが、プログラムの中で

const time = moment("23:15",TIME_FORMAT);

であったり

const start = moment(`${startAry.join(":")}`, TIME_FORMAT),
end = moment(`${endAry.join(":")}`, TIME_FORMAT);

によって作られる、 time , start , end は、時刻だけではなく日付も持っています。そのうえで

const START_HOUR_OF_DAY = 6;

によって、1日の開始を 06:00 とするという取り決めを導入したことによって

①5:00 ~ 7:00
は、
・開始日時が明日の05:00
・終了日時が今日の07:00
という範囲を表すことになり、このような範囲にある日時は存在しないので、
if (start.isSameOrBefore(time) && end.isSameOrAfter(time)) {
の if に与えている条件式は、常に false になります。

②7:00 ~ 6:00
は、7:00 および 6:00 がともに今日の時刻を表すものとして扱われるので、
・開始日時が今日の07:00
・終了日時が今日の06:00
という範囲を表すことになり、①と同様に、このような範囲にある日時は存在しないので、
if (start.isSameOrBefore(time) && end.isSameOrAfter(time)) {
の if に与えている条件式は、常に false になります。

上記をふまえて、この後のawakewalkerさんの作業として、与えられる time としていくつかのサンプルと、stepsの要素としてもいくつかのサンプルを用意して、

いくつかのtime と いくつかのsteps要素の組み合わせに対し、時間帯の範囲内にある、またはない、と判定される期待値を整理することかなと思います。

その整理によって要件がはっきりすると思いますので、その要件しだいでは

const START_HOUR_OF_DAY = 6;

というように、（0時以外の）一日の始まりを導入すること自体があまり適していないという判断になるかもしれません。

要件の整理後、新たにコードを書くときに、回答に挙げたサンプルコードのどこか一部でもお役に立てれば幸いです。

[jun68ykt]

補足

ひとつ、ここを詰めると要件がはっきりする、と思われる点を補足しておきます。
ご質問にあるコードに

{'set2' : { [22, 00], [1, 00] } }

という要素があります。この set2 の値である

[22, 00], [1, 00]

という配列は何を表することにするのか？という点です。考えられる可能性として、（少なくとも）以下の(1),(2) の２とおりの解釈が可能です。

(1) 開始時刻がある日の 22:00 で、終了時刻が同じ日の 1:00 であることを表す

この場合、ある同じ一日の 22時に始まり、1時に終わるという時間帯は、開始時刻が終了時刻よりも後なので、このような時間帯に含まれる時刻は存在しないことになります。

または、

(2) 開始時刻がある日の 22:00 で、終了時刻がその翌日の 1:00 であることを表す

この場合、そのような時間帯はあり得ます。時間帯の幅として３時間あり、この幅の中にある時刻は、判定のプログラムによって、開始と終了の範囲内にあると判定されなければなりません。

以上のとおり、　
[22, 00], [1, 00]　
の解釈を上記の (1)または(2) のどちらにするのか？も要件を決める上での、重要な観点かなと思われました。