回答編集履歴

テキスト修正

2019/12/20 14:42

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -252,7 +252,7 @@
-上記1.と2.を用意しておいたうえで、下記のようなJSON文字列を処置して、`selectStarttime` を得ることを考えます。
+上記1.と2.を用意しておいたうえで、下記のようなJSON文字列を処理して、`selectStarttime` を得ることを考えます。
 ```javascript

テキスト修正

2019/12/20 14:42

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -196,7 +196,7 @@
-次に、momentで与えられる２つの日時（開始日時と終了日時）との間にある日時を１時間おきに取得する仕組みとして、ジェネレータを使います。発生する日時に、開始は含み、終了は含まない**ものとします。また、引数は、ともにmomentである`start`と`end`プロパティを持つオブジェクトです。
+次に、momentで与えられる２つの日時（開始日時と終了日時）との間にある日時を１時間おきに取得する仕組みとして、ジェネレータを使います。発生する日時に、**開始は含み、終了は含まない**ものとします。また、引数は、ともにmomentである`start`と`end`プロパティを持つオブジェクトです。

テキスト修正

2019/12/20 14:35

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -109,3 +109,277 @@
 参考になれば幸いです。
+# 追記
+コメントで頂いたコードの意図を把握しましたので、以下の JSON
+```json
+[
+   {
+      "id":"1",
+      "start_time":"2019-11-30 09:00:00",
+      "end_time":"2019-11-30 13:00:00"
+   },
+   {
+      "id":"2",
+      "start_time":"2019-11-30 15:00:00",
+      "end_time":"2019-11-30 17:00:00"
+   }
+]
+```
+から、 配列`selectStarttime` として、以下
+```javascript
+[ '13:00', '14:00', '17:00', '18:00' ]
+```
+を得るためのコードを、私が書くとしたら、こう書きますというのを挙げておきます。
+なお、以下の手順 **1. 〜 7. **に挙げたコードは
+- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/abzJjPL?editors=0012](https://codepen.io/jun68ykt/pen/abzJjPL?editors=0012)
+にも上げています。
+### 1. フォーマット文字列
+はじめに、moment と文字列との変換のためのフォーマットとして以下の３つを用意しておきます。
+```javascript
+const FORMAT_DATE = 'YYYY-MM-DD';
+const FORMAT_DATETIME = 'YYYY-MM-DD HH:mm:ss';
+const FORMAT_TIME = 'HH:mm';
+```
+### 2. 開始と終了の間にある日時を１時間おきに発生するジェネレータ
+次に、momentで与えられる２つの日時（開始日時と終了日時）との間にある日時を１時間おきに取得する仕組みとして、ジェネレータを使います。発生する日時に、開始は含み、終了は含まない**ものとします。また、引数は、ともにmomentである`start`と`end`プロパティを持つオブジェクトです。
+```javascript
+function* range({ start, end }) {
+  let m = start;
+  while (m.isBefore(end)) {
+    yield m;
+    m = moment(m).add(1, 'hour');
+  }
+}
+```
+上記を使うと、たとえば `2019-12-20 11:00` から `2019-12-20 16:00` までの１時間おきの時刻の文字列を配列で得るには、以下のようにします。
+```javascript
+const sample = {
+  start: moment('2019-12-20 11:00:00', FORMAT_DATETIME),
+  end: moment('2019-12-20 16:00:00', FORMAT_DATETIME)
+};
+const timeStrings = [...range(sample)].map(m => m.format(FORMAT_TIME));
+// => ["11:00", "12:00", "13:00", "14:00", "15:00"]  (※ "16:00" は含まれない）
+```
+- 動作確認用CodePen: [https://codepen.io/jun68ykt/pen/PowpBby?editors=0012](https://codepen.io/jun68ykt/pen/PowpBby?editors=0012)
+### 3.JSONのパース
+上記1.と2.を用意しておいたうえで、下記のようなJSON文字列を処置して、`selectStarttime` を得ることを考えます。
+```javascript
+const responseJson = `
+[
+   {
+      "id":"1",
+      "start_time":"2019-11-30 09:00:00",
+      "end_time":"2019-11-30 13:00:00"
+   },
+   {
+      "id":"2",
+      "start_time":"2019-11-30 15:00:00",
+      "end_time":"2019-11-30 17:00:00"
+   }
+]
+`;
+```
+上記の JSONをパースした結果を変数`data` に入れますが、単にパースするだけではなく、配列の各要素の`start_time` と `end_time` の文字列形式の日時を moment に変換したプロパティを持つ要素の配列として、`data` を得るようにします。
+```javascript
+const data = JSON.parse(responseJson).map(e => ({
+  start: moment(e.start_time, FORMAT_DATETIME),
+  end: moment(e.end_time, FORMAT_DATETIME)
+}));
+```
+ここでは、上記のように、`data` の要素には `id` は含めませんでした。これは `selectStarttime` を得るためには不要なためです。もし他の何らかの処理のために必要であれば含めるようにします。
+### 4.日付部分の文字列の取得
+上記で得られた`data` の先頭要素の `start` から日付の文字列を取得します。
+```javascript
+// 日付部分の文字列を取得(例: 2019-11-30)
+const dateStr = data[0].start.format(FORMAT_DATE);
+```
+### 5.営業時間帯の開始と終了を持つオブジェクト
+上記4.で得た日付の営業開始日時と終了日時の moment を持つオブジェクトを作成します。
+```javascript
+const businessHours = {
+  start: moment(`${dateStr} 09:00:00`, FORMAT_DATETIME),
+  end: moment(`${dateStr} 19:00:00`, FORMAT_DATETIME)
+};
+```
+### 6.営業時間帯に含まれる日時の中で、選択可能なものだけを取得
+上記5.で作成した営業時間帯に含まれる日時の中で、選択可能なものだけを含む配列 `selectableStartMoments` を得ることを考えます。
+先の２．に書いたジェネレータ関数 `range` を使って、`[...range(businessHours)]`とすると、9時始まりで（１９時は含まない）営業時間帯に含まれる、１時間おきのmomentの配列が得られますので、これをfilterします。filter に与える条件は、ある時刻が、`data` のどの要素`e`についても、`e.start`未満の時刻であるか、`e.end`以上の時刻となっていることですので、`selectableStartMoments` は以下のようにして得られます。
+```javascript
+const selectableStartMoments = [...range(businessHours)].filter(m =>
+  data.every(e => m.isBefore(e.start) || m.isSameOrAfter(e.end))
+);
+```
+### 7.文字列に変換して結果を出力
+上記6.で得られた `selectableStartMoments` の各要素のmomentを、`HH:mm`形式の文字列に変換すれば、目的の `selectStarttime` が得られます。
+```javascript
+const selectStarttime = selectableStartMoments.map(m => m.format(FORMAT_TIME));
+console.log(selectStarttime);  // => ["13:00", "14:00", "17:00", "18:00"]
+```