トップ Chromeに関する質問 if文の多いJavaScript記述からif文を減らしてスッキリさせたいけど思いつかない

編集履歴

回答編集履歴

テキスト追加

2020/05/03 23:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -250,7 +250,7 @@
-ご質問にあった、
+回答した当初、サンプルコードや回答の文章の中で、変数名やプロパティ名の一部に `"step"` を使っていましたが、ご質問にある以下
 ```
@@ -260,4 +260,4 @@
 ```
-にあわせて、サンプルコードや回答の文章の中で、変数名やプロパティ名の一部に使っていた `"step"` を、`"set"` に修正しました。
+にあわせて、`"set"` に修正しました。

テキスト追加

2020/05/03 23:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -72,15 +72,11 @@
-ある日時と別の日時との比較や、１日加えるといった処理を楽に行うために、日時を扱うのに便利なライブラリ [moment](https://momentjs.com/) を使います。
+ある日時と別の日時との比較や、１日加えるといった処理を楽に行うために、日時を扱うのに便利なライブラリ [moment](https://momentjs.com/) を使います。(※最近では moment よりも [date-fns](https://date-fns.org/) のほうが好まれる場合もありますが、この回答では、momentを使います。)
-(※最近では moment よりも [date-fns](https://date-fns.org/) のほうが好まれる場合もありますが、この回答では、momentを使います。)
-momentを使って、上記の `timeSets` の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する時刻を入れる変数を `time` として、ここに moment オブジェクトを入れます。
+上記の `timeSets` の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する時刻を含むmomentオブジェクトを入れる変数を `time` とします。

テキスト追加

2020/05/03 03:35

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -40,27 +40,27 @@
-サンプルデータとして以下のような配列 `steps` を考えます。
+サンプルデータとして以下のような配列 `timeSets` を考えます。
 ```javascript
 // サンプルデータ
-const steps = [
+const timeSets = [
-  { step1: [["07", "00"], ["08", "30"]] },
+  { set1: [["07", "00"], ["08", "30"]] },
-  { step2: [["22", "45"], ["02", "00"]] },
+  { set2: [["22", "45"], ["02", "00"]] },
-  { step3: [["15", "00"], ["16", "30"]] },
+  { set3: [["15", "00"], ["16", "30"]] },
-  { step4: [["22", "00"], ["23", "30"]] },
+  { set4: [["22", "00"], ["23", "30"]] },
-  { step5: [["15", "30"], ["17", "00"]] },
+  { set5: [["15", "30"], ["17", "00"]] },
-  { step6: [["23", "00"], ["01", "00"]] },
+  { set6: [["23", "00"], ["01", "00"]] },
-  { step7: [["04", "30"], ["05", "45"]] }
+  { set7: [["04", "30"], ["05", "45"]] }
 ];
@@ -80,7 +80,7 @@
-momentを使って、上記の steps の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する時刻を入れる変数を `time` として、ここに moment オブジェクトを入れます。
+momentを使って、上記の `timeSets` の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する時刻を入れる変数を `time` として、ここに moment オブジェクトを入れます。
@@ -104,7 +104,7 @@
-`steps`の要素の中で、`time` が開始と終了の間にある（両端も含む）もののキーを表示するコードは以下のように書けます。
+`timeSets`の要素の中で、`time` が開始と終了の間にある（両端も含む）もののキーを表示するコードは以下のように書けます。
@@ -120,21 +120,21 @@
-// stepsの要素の中で、time が開始と終了の間にある（両端も含む）ときの stepsの要素のキーを表示
+// timeSetsの要素の中で、time が開始と終了の間にある（両端も含む）ときのキーを表示
-steps.forEach(step => {
+timeSets.forEach(set => {
-  const [[stepKey, [startAry, endAry]]] = Object.entries(step);
+  const [[key, [startAry, endAry]]] = Object.entries(set);
   const start = moment(`${startAry.join(":")}`, TIME_FORMAT),
-        end = moment(`${endAry.join(":")}`, TIME_FORMAT);
+    end = moment(`${endAry.join(":")}`, TIME_FORMAT);
-  //  hour が 日付の変わる時刻未満であれば、日付を1日加算する。
+  // hour が 日付の変わる時刻未満であれば、日付を1日加算する。
   if (start.hour() < START_HOUR_OF_DAY) {
@@ -146,15 +146,15 @@
     end.add(1, 'day');
-  }
+  }
   // time が、start以上、end以下であれば、オブジェクトのキーを表示
   if (start.isSameOrBefore(time) && end.isSameOrAfter(time)) {
-    console.log(stepKey);
+    console.log(key);
   }
@@ -170,11 +170,11 @@
-> "step2"
+> "set2"
-"step4"
+"set4"
-"step6"
+"set6"
@@ -196,7 +196,15 @@
 ```
-に変更すると、該当するstepsの要素として、`step7` だけが表示されます。
+に変更すると、該当するtimeSetsの要素として、
+> "set7"
+だけが表示されます。
@@ -239,3 +247,21 @@
 によってリファクタして、`forEach`ループ本体のコード行数を減らしたものです。
+### 追記2
+ご質問にあった、
+```
+{'set1' : { [12, 00], [16, 00] } }
+{'set2' : { [22, 00], [1, 00] } }
+```
+にあわせて、サンプルコードや回答の文章の中で、変数名やプロパティ名の一部に使っていた `"step"` を、`"set"` に修正しました。

テキスト追加

2020/05/03 03:29

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -184,7 +184,7 @@
-- **動作確認用サンプル：** [https://codepen.io/jun68ykt/pen/QWjMVmJ?editors=0012](https://codepen.io/jun68ykt/pen/QWjMVmJ?editors=0012)
+- **動作確認用サンプル1：** [https://codepen.io/jun68ykt/pen/QWjMVmJ?editors=0012](https://codepen.io/jun68ykt/pen/QWjMVmJ?editors=0012)
@@ -205,3 +205,37 @@
 以上、参考になれば幸いです。
+### 追記
+上記のサンプル1を、リファクタリングしたコードを挙げておきます。
+- **動作確認用サンプル2：** [https://codepen.io/jun68ykt/pen/qBOVZba?editors=0012](https://codepen.io/jun68ykt/pen/qBOVZba?editors=0012)
+これは、サンプル1を以下の２点
+- moment のプラグインで、２つの日時による幅を表すオブジェクトを作ることのできる [moment-range](https://github.com/rotaready/moment-range) を使用し、これの [contains](https://github.com/rotaready/moment-range#contains)メソッドを、時間帯の範囲内かどうかの判定に利用
+- 時刻を表す、文字列の配列（`["07", "00"]` や `["01", "00"]`など） から、この配列の示す時刻を含む momentオブジェクトを作る関数を `momentFromHHMM` として、`forEach` ループから切り出す。
+によってリファクタして、`forEach`ループ本体のコード行数を減らしたものです。

テキスト追加

2020/05/03 01:25

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -76,7 +76,7 @@
-(※最近では moment よりも [date-fns](https://date-fns.org/) のほうが好まれる場合もあります。これは好みで選んでください。この回答では、momentを使います。)
+(※最近では moment よりも [date-fns](https://date-fns.org/) のほうが好まれる場合もありますが、この回答では、momentを使います。)

テキスト追加

2020/05/02 10:54

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -150,7 +150,7 @@
-  // date が、開始日時以上、終了日時以下であれば、オブジェクトのキーを表示
+  // time が、start以上、end以下であれば、オブジェクトのキーを表示
   if (start.isSameOrBefore(time) && end.isSameOrAfter(time)) {

テキスト追加

2020/05/02 02:37

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -110,7 +110,7 @@
 ```javascript
-//  比較対象となる時刻のhour未満であれば、日付を1日加算する。
+//  hour が 日付の変わる時刻未満であれば、日付を1日加算する。
 if (time.hour() < START_HOUR_OF_DAY) {
@@ -134,7 +134,7 @@
-  // hour が 日付の変わる時刻のhour未満であれば、日付を1日加算する。
+  //  hour が 日付の変わる時刻未満であれば、日付を1日加算する。
   if (start.hour() < START_HOUR_OF_DAY) {

テキスト追加

2020/05/02 02:31

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -18,11 +18,11 @@
-上記によって、例えば今日が4月30日だとすると、
+上記によって、
-- `["06", "00"]` が、 4月30日の朝6時を表し、
+- `["06", "00"]` は今日の朝6時を表し、
-- `["05", "59"]`が、**翌日5月1日**の午前5時59分を表す
+- `["05", "59"]`は翌日の午前5時59分を表す
@@ -80,15 +80,21 @@
-momentを使って、上記の steps の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する日時を入れる変数を `now` として、ここに moment オブジェクトを入れます。
+momentを使って、上記の steps の各要素が表す開始時刻と終了時刻の間にあるかどうかを判定する時刻を入れる変数を `time` として、ここに moment オブジェクトを入れます。
-```javascript
+```javascript
+// 時刻のフォーマット
+const TIME_FORMAT = "HH:mm";
-// 比較対象となる日時
+// 比較対象となる時刻
-const date = moment("2020-04-30 23:15:00");
+const time = moment("23:15",TIME_FORMAT);
 ```
@@ -98,13 +104,23 @@
-`steps`の要素の中で、`date` が開始と終了の間にある（両端も含む）もののキーを表示するコードは以下のように書けます。
+`steps`の要素の中で、`time` が開始と終了の間にある（両端も含む）もののキーを表示するコードは以下のように書けます。
-```javascript
+```javascript
+//  比較対象となる時刻のhour未満であれば、日付を1日加算する。
+if (time.hour() < START_HOUR_OF_DAY) {
+  time.add(1, 'day');
+}
-// stepsの要素の中で、date が開始と終了の間にある（両端も含む）ときの stepsの要素のキーを表示
+// stepsの要素の中で、time が開始と終了の間にある（両端も含む）ときの stepsの要素のキーを表示
 steps.forEach(step => {
@@ -112,9 +128,9 @@
-  const start = moment(`${startAry.join("")}`, "HHmm"),
+  const start = moment(`${startAry.join(":")}`, TIME_FORMAT),
-        end = moment(`${endAry.join("")}`, "HHmm");
+        end = moment(`${endAry.join(":")}`, TIME_FORMAT);
@@ -136,7 +152,7 @@
   // date が、開始日時以上、終了日時以下であれば、オブジェクトのキーを表示
-  if (start.isSameOrBefore(date) && end.isSameOrAfter(date)) {
+  if (start.isSameOrBefore(time) && end.isSameOrAfter(time)) {
     console.log(stepKey);
@@ -144,6 +160,10 @@
 });
 ```
 上記を実行すると
@@ -168,6 +188,16 @@
+上記のサンプルで、比較対象となる時刻 `time` を
+```javascript
+const time = moment("05:00",TIME_FORMAT);
+```
+に変更すると、該当するstepsの要素として、`step7` だけが表示されます。

テキスト追加

2020/05/02 01:35

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -18,7 +18,19 @@
+上記によって、例えば今日が4月30日だとすると、
+- `["06", "00"]` が、 4月30日の朝6時を表し、
-上記は、例えば今日が4月30日だとすると、 `["06", "00"]` が、 4月30日の朝6時を表し、 `["05", "59"]`が、**翌日5月1日**の午前5時59分を表すことになります。
+- `["05", "59"]`が、**翌日5月1日**の午前5時59分を表す
+ことになります。