Javascriptにおいて配列の中の時間の最大値や最小値、及び間の時刻を取得したい。

Question

環境

Laravel 6.5.0
Homestead
使っているライブラリ
→flatpickr(日付)、datetimepicker（時間)、moment.js、holiday_jp.js

やろうとしていること

テーブルからその日の予約情報を取得して、それを参照しDatetimepickerの時間選択で予約が入っている時間は選択できないようにしたい。
今回の場合は9時13時と15時17時で予約が入っていることを前提としています。

質問したいこと

datetimepickerは

jQuery('#datetimepicker5').datetimepicker({
 datepicker:false,
 allowTimes:[
  '12:00', '13:00', '15:00', 
  '17:00', '17:05', '17:20', '19:00', '20:00'
 ]
});

とallowTimes以下に配列を指定すればその時間のみを選択できるようになるので、そのためにAjaxでPHP(Laravel)から予約情報を受けとってそれを元にallowTimesに当たる配列を作ろうと思っているのですが、返ってきた予約情報からstart_timeとend_timeキーごとに配列を分けるところまでは来たのですが、そこから各配列の中の時刻の最大値や最小値、および例えば9時~13時の間の時刻を取得するといったことをどうやればいいのかで詰まっています。
当然2つの配列の値は2つのみとは限らないので繰り返し文に条件をつけて比較をしていかないといけないのですが、間違っていることを前提で下に例示しますが、forEach文で

Object.keys(start_times).forEach(key => {
　if(moment(start_times[key]).format('YYYY-MM-DD HH:mm:ss') <　　
　　　moment(start_times[key+1]).format('YYYY-MM-DD HH:mm:ss')
  
// これは当然正しく行われない

といったように配列の値同士での比較をしたいところがmoment(start_times[key+1]).format('YYYY-MM-DD HH:mm:ss')の部分で現在の日付を取得してしまうためそれもできずに詰まってしまったという感じです。

そこでとりあえず最大や最小からどうにかしてみようとmoment.maxやMath.max.applyなどは前者はis not function、後者はNaNやinvaild dateなどのエラーが出てしまいます……これは多分私の扱いが悪いと思うのですが……

お力添えを頂けると助かります。

質問に際してやったこと・作ったもの

PHPから返ってきたテーブルから取得したデータ

start_time及びend_timeで配列を分けたもの

window.onload = function () {
  $(document).on("click", "#date-select", function () {
    init_set_reservations();
  }); // 1で発火したajaxでデータベースにアクセスして、テーブルから取得した日付の予約情報を取り出す。

  function init_set_reservations() {
    var server_url = "http://localhost:8000/"; // 使用しているサーバーのURLを定義
    // フォームで送信されるデータの確認、本番ではコメントアウト。
    // var formData = $('#test').serialize();
    // console.log(formData);
    // Ajax。今回は非同期で行いたい。

    $.ajax({
      type: 'POST',
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // CSRF対策、Ajax使う場合はLaravel側と合わせてこの項目も記載する。

      },
      url: server_url + "/get-reserve",
      datatype: 'json',
      data: {
        dateinfo: $('#dateinfo').val(),
        // 日付選択のためのinputタグからの情報
        facility_name: $('#facility_name').val() // 施設名選択のためのinputタグからの情報

      }
    }).done(function (data) {
      console.log(data);


    var data = JSON.parse(data);
    var isArray = Array.isArray;

  // オブジェクトや配列から特定のキーに該当する値を取得して配列にする
  // 引用 (https://s8a.jp/javascript-object-array-property-function)
  function property(object, path) {
    if (object == null || _typeof(object) != 'object') return;
    return isArray(object) ? object.map(createProcessFunction(path)) : createProcessFunction(path)(object);
  }

  function createProcessFunction(path) {
    if (typeof path == 'string') path = path.split('.');
    if (!isArray(path)) path = [path];
    return function (object) {
      var index = 0,
          length = path.length;

      while (index < length) {
        object = object[toString(path[index++])];
      }

      return index && index == length ? object : void 0;
    };
  }

  function toString(value) {
    if (value == null) return '';
    if (typeof value == 'string') return value;
    if (isArray(value)) return value.map(toString) + '';
    var result = value + '';
    return '0' == result && 1 / value == -(1 / 0) ? '-0' : result;
  }

  var start_times = property(data, 'start_time');
  var end_times = property(data, 'end_time');
  console.log(start_times);
  console.log(end_times);

  Object.keys(start_times).forEach(key => {
    var result2 = moment(start_times[key]).format('YYYY-MM-DD HH:mm:ss');
    
    console.log(result2);
  });

 // result2 = [];

 //  Object.keys(start_times).forEach(key => {
 //    result2.push(moment(start_times[key]).format('HH:mm:ss'));
 //  }); // 日付の部分を削除して時間のみに整形、ひとまずコメントアウト。


  // Object.keys(start_times).filter(key => {
  //   var result3 = moment.max(start_times).format('YYYY-MM-DD HH:mm:ss');

  // }); // moment.max() is not function または .format以下を削除して実行するとt[s].isvalid is not a functionとなる。

  Object.keys(end_times).forEach(key => {
    var result4 = moment(end_times[key]).format('YYYY-MM-DD HH:mm:ss');
    console.log(result4);
  }); 

追記部分

定義しているテーブル

Answer 1

こんにちは

処理対象の配列を、はじめから momentの配列にしておくと楽かもしれません。

"HH:mm"形式の文字列の配列から momentの配列を作り、その配列に対して

• 最大値（最も遅い時刻）を取得
• 最小値（最も早い時刻）を取得
• 与えられた時間帯に含まれる時刻の配列を取得

するサンプルを以下に挙げます。

const times = [
  '14:15',
  '07:00',
  '23:45',
  '11:30',
  '21:15',
  '09:15',
  '22:00',
  '18:45'
];

// moment の配列を取得
const timeMoments = times.map(t => moment(t, 'HH:mm'));

// 最大値（最も遅い時刻)を取得
const max = moment.max(timeMoments);
console.log(max.format('HH:mm')); // "23:45"

// 最小値（最も早い時刻)を取得
const min = moment.min(timeMoments);  
console.log(min.format('HH:mm')); // "07:00"


// 11:00 から 15:00までの間に含まれる時刻を昇順に取得
const MT11 = moment('11:00', 'HH:mm');
const MT15 = moment('15:00', 'HH:mm');


const momentsFrom11to15 = timeMoments
    .filter(m => m - MT11 >= 0 && m - MT15 <= 0)
    .sort((m1, m2) => m1 - m2);

console.log(momentsFrom11to15.map(m => m.format('HH:mm')));  // ["11:30", "14:15"]

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/povRjdE?editors=0012

参考になれば幸いです。

追記

コメントで頂いたコードの意図を把握しましたので、以下の 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 として、以下

[ '13:00', '14:00', '17:00', '18:00' ]

を得るためのコードを、私が書くとしたら、こう書きますというのを挙げておきます。

なお、以下の手順 **1. 〜 7. **に挙げたコードは

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/abzJjPL?editors=0012

にも上げています。

1. フォーマット文字列

はじめに、moment と文字列との変換のためのフォーマットとして以下の３つを用意しておきます。

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プロパティを持つオブジェクトです。

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 までの１時間おきの時刻の文字列を配列で得るには、以下のようにします。

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

3.JSONのパース

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

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 を得るようにします。

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 から日付の文字列を取得します。

// 日付部分の文字列を取得(例: 2019-11-30)
const dateStr = data[0].start.format(FORMAT_DATE);

5.営業時間帯の開始と終了を持つオブジェクト

上記4.で得た日付の営業開始日時と終了日時の moment を持つオブジェクトを作成します。

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 は以下のようにして得られます。

const selectableStartMoments = [...range(businessHours)].filter(m =>
  data.every(e => m.isBefore(e.start) || m.isSameOrAfter(e.end))
);

7.文字列に変換して結果を出力

上記6.で得られた selectableStartMoments の各要素のmomentを、HH:mm形式の文字列に変換すれば、目的の selectStarttime が得られます。

const selectStarttime = selectableStartMoments.map(m => m.format(FORMAT_TIME));

console.log(selectStarttime);  // => ["13:00", "14:00", "17:00", "18:00"]

Comments

[kamille-mio]

お返事ありがとうございます。
返信が遅くなって申し訳ないです。

```Javascript

var result2 = [];

Object.keys(start_times).forEach(key => {
result2.push(moment(start_times[key]).format('HH:mm:ss'));
});

var result3 = [];

Object.keys(start_times).forEach(key => {
result3.push(moment(end_times[key]).format('HH:mm:ss'));
});

Object.keys(start_times).forEach(key => {
result3.push(moment(end_times[key]).format('HH:mm:ss'));
});
```

この形でそれぞれ配列を作り、サンプルにあるコードを使ってみたところ最大と最小は取得できました。
momentの配列にし直すというのはわかっていたのですが、.mapを使うということがわからなかったみたいで大変助かりました。

ただ、「与えられた時間帯に含まれる時刻の配列を取得」という部分に関してなのですがサンプルにあるように間の時間がある配列ではなく、今回の例でいうと

var result2 =  ["09:00:00", "15:00:00"]; // start_timesの時刻の部分のみ抽出した配列
var result3 = ["13:00:00", "17:00:00"]; // end_timesの時刻の部分のみを抽出した配列

という配列になるのでつまるところ

result2[key]とresult3[key](ex.result2[0]とresult3[0]）の間に含まれる時刻を昇順に取得したいということになりここをどうしたものかと思っています。
差分の時間が何時間かはmomentのドキュメントに書いてあるとおりできるので、その差分(4時間）をforの繰り返しの上限にして1時間ずつ足していくか、引いていくかして得た時刻を配列に加えていくといった処理になるのでしょうか？

[jun68ykt]

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

> result2[key]とresult3[key](ex.result2[0]とresult3[0]）の間に含まれる時刻を昇順に取得したいということになりここをどうしたものかと思っています。

についてですが、たとえば、"09:00:00"　と "13:00:00"　が与えられた場合、

[
"09:00:00",
"10:00:00",
"11:00:00",
"12:00:00",
"13:00:00"
]

という、文字列（または各時刻を保持するmomentオブジェクト）の配列を得たい、ということでしょうか？
もしそうだとすると、基本的な考え方としては

> 1時間ずつ足していくか、引いていくかして得た時刻を配列に加えていく

という処理でよいと思います。ただし、

> その差分(4時間）をforの繰り返しの上限にして

とありますが、ループさせるときに、1時間を加算する回数（いまの例だと 4 ）を、あらかじめ求めておく必要はないかと思います。
以下は、 そのサンプルコードです。

https://codepen.io/jun68ykt/pen/NWPdEvK?editors=0012

FYI???? Is Same or Before ： https://momentjs.com/docs/#/query/is-same-or-before/

[kamille-mio]

@jun68yktさん

コメントありがとうございます。
まさにこういうことです。
助かります。

これであとは配列にあるだけresult2[key]とresult3[key]を比較して重複は外しつつ、新しい配列に加えるというところまでもってこれました。
初学者なのでこれもまた難儀することにはなりますが今回は本当にありがとうございました。

[jun68ykt]

どういたしまして。先に進められそうで、よかったです????

[kamille-mio]

とりあえず解決はしたので良かったのですが、それでも申し訳ないのでお詫びをさせてください。
質問の内容で

>>
allowTimes以下に配列を指定すればその時間を時間選択から外せる

としていますが、正しくは「allowTimes以下に配列を指定すればその時間のみ選択できるようになる」でした。
大変失礼致しました。
質問文の方は訂正させていただきます。

[kamille-mio]

そしてその上で改めてになりますが今回、時刻の取り扱いでかなり詰まっていたので本当に助かりました。
Laravel(PHP)でも結構壁なのですが、Javascriptだと余計に難しく感じました。
まだまだ基本がなってないのを痛感した次第です。

ちなみに恥を忍んでよろしければ正しいallowTimesの求め方について、一応繰り返しの処理もできたので後学のためにお聞きしたいのですが、

// 'HH:mm:ss'形式（時間だけ)に整形する。
var result2 = [];

Object.keys(start_times).forEach(key => {
result2.push(moment(start_times[key]).format('HH:mm'));
});

var result3 = [];

Object.keys(end_times).forEach(key => {
result3.push(moment(end_times[key]).format('HH:mm'));
});

console.log(result3);

// 整形したstart_times及びend_timesをさらにmoment()形式に変換して'HH:mm'の形に整形して配列にする

const start_timeMoments = result2.map(t => moment(t, 'HH:mm'));
const end_timeMoments = result3.map(t => moment(t, 'HH:mm'));
console.log(end_timeMoments);

// startとendの間の時間を取得

var timeStrings = [],i;

for( i = 0; i < start_timeMoments.length; i++) {
while (start_timeMoments[i].isSameOrBefore(end_timeMoments[i])) {
timeStrings.push(start_timeMoments[i].format('HH:mm'));
start_timeMoments[i].add(1, 'hour');
}
}
console.log(timeStrings);

// 作った配列から利用時間開始の時刻から外したい時間の配列を作る。そのためend_timeに設定している時刻は先の配列から削除する。
const rejectStarttime = timeStrings.filter(i=> result3.indexOf(i)==-1);
console.log(rejectStarttime);

// 営業時間
const business_hours = ["09:00","19:00"];
const t = moment(business_hours[0], 'HH:mm');
const max = moment(business_hours[1], 'HH:mm');

// 営業時間帯１時間ごとの時刻をmaxに達するまで取得し、文字列にして配列に追加
const business_hoursStrings = [];
while (t.isSameOrBefore(max)) {
business_hoursStrings.push(t.format('HH:mm'));
t.add(1, 'hour');
}

// 作った配列から営業時間時間の終わりの時間を削除する(利用開始時間の選択肢には入らないため)
const arr_startTime = business_hoursStrings.filter(i=> i !== business_hours[1]);
console.log(arr_startTime);

// allowTimesに登録する配列（選択可能となる時刻）
const selectStarttime = arr_startTime.filter(i=> rejectStarttime.indexOf(i)==-1);
console.log(selectStarttime);

というコードで期待している結果は得られたのですが、変数名がテスト用なので少し雑ということを除いて問題ありそうなところや冗長かもしれないところはあるでしょうか？
一応比較等に使っている変数をconsole.logした結果は以下の通りになってます。

result3 = ["13:00", "17:00"]
timeStrings = ["09:00", "10:00", "11:00", "12:00", "13:00", "15:00", "16:00", "17:00"]
rejectStarttime　= ["09:00", "10:00", "11:00", "12:00", "15:00", "16:00"]
business_hoursStrings = ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00","19:00"]
array_start_time = ["09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"]
selectStarttime(最終的に利用開始時間選択のdatetimepickerのallowTimesに設定する配列)
＝["13:00", "14:00", "17:00", "18:00"]

[jun68ykt]

上記のコードを拝読しまして、

> 問題ありそうなところや冗長かもしれないところ

を考えるための前提としてご教示いただきたいのですが、上記のコードの冒頭では、

・オブジェクト start_times の内容から 配列result2 を

・オブジェクトend_timesの内容から 配列result3 を

それぞれ作っていますが、コードから推測するに、オブジェクト start_times, end_times は以下のようなものを想像しています。

オブジェクト start_times ：

{
'2019-12-20': '2019-12-20 09:00:00',
'2019-12-21': '2019-12-21 11:00:00',
'2019-12-22': '2019-12-22 13:00:00',
'2019-12-23': '2019-12-23 10:00:00',
'2019-12-24': '2019-12-24 09:00:00',
'2019-12-25': '2019-12-25 10:00:00',
'2019-12-26': '2019-12-26 08:00:00',
'2019-12-27': '2019-12-27 10:00:00'
}

オブジェクト end_times ：

{
'2019-12-20': '2019-12-20 20:00:00',
'2019-12-21': '2019-12-21 19:00:00',
'2019-12-22': '2019-12-22 18:00:00',
'2019-12-23': '2019-12-23 18:00:00',
'2019-12-24': '2019-12-24 21:00:00',
'2019-12-25': '2019-12-25 20:00:00',
'2019-12-26': '2019-12-26 20:00:00',
'2019-12-27': '2019-12-27 19:00:00'
}

上記は、キーが YYYY-MM-DD 形式の文字列で、値が YYYY-MM-DD HH:mm:ss 形式の日時の文字列であるようなプロパティを持つオブジェクトです。このようなものを想像していますが、（だいたい）合ってますでしょうか？

もし違っていたら、オブジェクト start_times　と end_timesは、どのようなオブジェクトを想定すればよいか、ご教示ください。

[kamille-mio]

まずAjaxを用いてPHPから返ってきたデータが質問文にある通り

[
{
"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"
}
]

になります。
このデータから上手いこと今回のような処理を引き出すのは私には難しかったので
「特定のキーを持つ値を抽出して個別に配列にし直す」という処理を一回挟むのはどうかと考えたので、検索をして引用させて頂いたproperty関数を使って

var start_times = property(data, 'start_time');
var end_times = property(data, 'end_time');

として元のデータからstart_timeとend_timeがキーとなっている値を抽出してそれぞれ配列にしているため、したがって

console.log(start_times);
console.log(end_times);

上記2つの処理結果は以下の通りとなっています。

start_times = ["2019-11-30 09:00:00", "2019-11-30 15:00:00"]
end_times = ["2019-11-30 13:00:00", "2019-11-30 17:00:00"]

こちらでよろしいでしょうか？

引用部分については今回の質問内容含めて一連の処理に一応完結が見えたら、改めて処理全体含めて、自分で処理や仕組みを洗い直します。
引用部以外にも自力でコードを書き上げたとはお世辞にも言えないので……

[kamille-mio]

それと合わせてテーブル図を質問文に追記しておきました。
予約情報は上記の通り

id
(予約番号はテーブルのidカラムの値にPHP側でランダム数字列を作って結合させる形で表現しようと考えています）

user_id(外部キーでユーザー情報テーブルとリレーションしている)
facility_id(同じく外部キー、施設情報テーブルとリレーションしている)
start_time
end_time
で管理しています。
Ajaxは施設名と利用日を選択させて決定ボタンを押したら発火、施設名からfacility_idを検索して、それと利用日を参照してその施設に選択された利用日の予約が入っているか検索して、あれば質問文にある通りデータを返すというコードを書いています。

[jun68ykt]

@kamille-mioさん
ご返信ありがとうございます。
コメントで頂きましたコードやテーブルのER図から、何を意図しているのかを把握できましたので、与えられたJSONから selectStarttime を得るコードを、私ならこう書きますという案を、回答のほうに追記しました。参考になれば幸いです。

[kamille-mio]

＠jun68ykt
丁寧な解説の追記、大変助かります。とてもわかりやすいです。

書ける人が書くとここまで圧縮されるものなのですね。
余談ではありますが、本当は上記のように営業時間のテーブルも作ってあるのでAjaxで取得してこなければいけないところなのですが、今回はまず見せられるものをというのが最優先なのでコードの方で直接定義をしてしまっています。お恥ずかしい限りです。

今は今回の書き方でいうとselectEndtimeに当たる部分（利用終了時間の選択部分、今回の例なら14時、15時、18時、19時のみ選択できるようにしないといけない)の値を得るためには如何したものかと頭を捻っていますが、この追記の部分も含め大変参考にさせていただきたいと思います。
ありがとうございました。

[jun68ykt]

どういたしまして。少しでも何かヒントになれば幸いです。