【JavaScript】日付範囲を指定して配列を作成する方法

概要

日付の範囲を指定して何かの登録処理等をしたい場合、例えば、2021-06-01 〜2021-06-04と日付をセレクトボックスなりで選択しますよね。

このケースで、2021-06-01、2021-06-02、2021-06-03、2021-06-04という日付の情報を全て取得したい場合に、配列で取得することができるサンプルコードをご紹介したいと思います。

ソースコード

全体

一部Reactを使用していますが、素のjavascriptでも問題ございません。
Reactのローカルステートを使用し、あらかじめ選択した日付の開始日と終了日がこのステートに入ってくるという想定です。

内容としては、指定した日付の範囲で、カレンダーに一括でイベント自動登録するということを実現するために実装しています。

Test.jsx

const [startDate, setStartDate] = useState(""),
[endDate, setEndDate] = useState("");

const Test = () => {
  const dateArrayForAutomaticRegistration = useMemo(() => {
    const targetDateRange = [];
    // 開始日が終了日以下になるまで開始日に1日ずつ足していく
    for (
      let d = new Date(startDate);
      d <= new Date(endDate);
      d.setDate(d.getDate() + 1)
    ) {
      // 月・日ともに00詰めしてsliceで切り取る(切り取る際、負のインデックスなので、右から-1、-2...と数える)ことで1桁の際に0詰めできるよう処理
      const formatedDate =
      d.getFullYear() +
      "-" +
      ("0" + (d.getMonth() + 1)).slice(-2) + // TODO():-2の部分は変数に置き換えたい
      "-" +
      ("0" + d.getDate()).slice(-2);

      targetDateRange.push(formatedDate);
    }
    return targetDateRange;
  }, [startDate, endDate]);
};

export default Test;

最終的な戻り値を定義する

まず、targetDateRangeという最終的な戻り値をからの配列で定義します。(この中に日付の情報が入ってくる)

const Test = () => {
  const dateArrayForAutomaticRegistration = useMemo(() => { 
    const targetDateRange = [];
-省略-

繰り返し処理の開始と終了のタイミングを定義する

選択した日付の範囲分、for分を使用して配列を生成するので、処理の開始と終了のタイミングを定義しています。
dには選択した日付範囲の開始日が入るため、開始日がendDate以下になるまで開始日(2020-06-01であれば、01)に1日ずつ加算していくという処理内容です。

new Dateとしているのは、日付同士を計算したり比較したりするためには、一旦jsのDateオブジェクトにする必要があるためです。

// 開始日が終了日以下になるまで開始日に1日ずつ足していく 
for ( let d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1) ) {
-省略-

繰り返しの処理内容

実際の繰り返しの処理内容です。次の1〜4の値を日付の配列(targetDateRange)にpushしてそれをreturnします。

1. d(開始日)からgetFullYearでYYYY部分のみ切り出します
2. d(開始日)からgetMonth + 1でMM部分を切り出し、先頭に"0"を付与したうえでsliceメソッドで右から2つ文字を切り取ります。
3. d(開始日)からgetDateでDD部分を切り出し、頭に"0"を付与したうえでsliceメソッドで右から2つ文字を切り取ります。
4. 最後に1〜3の文字列を"-"で繋ぎます

for (-省略-) {
  // 月・日ともに0詰めしてsliceで切り取る(切り取る際、負のインデックスなので、右から-1、-2...と数える)ことで1桁の際に0詰めできるよう処理
  const formatedDate =
  d.getFullYear() +
  "-" +
  ("0" + (d.getMonth() + 1)).slice(-2) +
  "-" +
  ("0" + d.getDate()).slice(-2);
  
  targetDateRange.push(formatedDate);
  return targetDateRange;
}

例)2021-06-01〜2021-06-04の範囲を指定した場合

開始日が2021-06-01なので、YYYY部分の"2021"を切り出す。MM部分は6が取れるので、"0"を先頭に付与し、"06"となる。DD部分も同様に1が取れるので、"0"を先頭に付与し、"01"となる。最初の操作では、"2021-06-01"という文字列が生成され、配列に追加されることになる。
これを4回繰り返すことで、2021-06-01、2021-06-02、2021-06-03、2021-06-04という日付の情報の配列が生成できます。

<補足>
Date オブジェクトは、以下のように日付を１日進めたり、戻したりすることができます。

dateObj.setDate(date.getDate() + 1);  // 1日進む
dateObj.setDate(date.getDate() - 1);  // 1日戻る

まとめ

いかがでしたでしょうか。本記事ではjavascriptを使用してワンライナーでランダムな文字列を生成する方法について紹介しています。