【JavaScript入門】日付の加算・減算方法まとめ(月またぎ/うるう年)

こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。

今回はJavaScriptにおける日付の加算（減算）方法について解説していきます。JavaScriptの日付の計算は扱いが独特で、初学者の方はその方法に悩まれることが多いですよね。そこで本記事では

という基礎的な内容から

など実際の開発の場で応用できる内容までを解説していきます。JavaScriptの日付の加算（減算）方法について正しく理解し、必要な場面で使いこなすことができるように、しっかり学習していきましょう。

基本的な加算・減算方法

まずは、基本的な加減算の方法を見ていくことにしましょう。一般的な日付の構成は”年、月、日、時、分、秒”であり、それぞれの値を取得/設定するメソッドがJavaScriptには用意されています。

以下の表にまとめましたので確認してみましょう。

種類	取得メソッド	設定メソッド	注意点
年	getFullYear	setFullYear
月	getMonth	setMonth	0～11の値
日	getDate	setDate
時	getHours	setHours
分	getMinutes	setMinutes
秒	getSeconds	setSeconds

注意点として、getMonth()、setMonth()は0の値から始まるということです。つまり通常のカレンダーの1月が0の値となりますので、通常のカレンダーと上記メソッドの取る値では1つずつ値がずれていることを覚えておいてください。

そして、”年、月、日、時、分、秒”を加算、減算する為の基本的な処理の構文は以下の通りです。

dt.setXXX( dt.getXXX() + DDD )
dt.setXXX( dt.getXXX() - DDD )

上記のように、getXXX()で現在のDateクラスの変数dtの日付を取得し、その日付に値（DDD）を加減算し、setXXX()で現在のdtの日付情報を取得するのが基本の流れです。

では、具体的なサンプルを見てみましょう。まずは、日付の加算の例です。

window.onload = function () {
    // 基本的な、日付の加算
    var dt = new Date(2019, 5 - 1, 5, 9, 0, 40);

    //1年後
    dt.setFullYear(dt.getFullYear() + 1);

    //2か月後
    dt.setMonth(dt.getMonth() + 2);

    //10日後
    dt.setDate(dt.getDate() + 10);

    //12時間後
    dt.setHours(dt.getHours() + 12);

    //30分後
    dt.setMinutes(dt.getMinutes() + 30);

    //10秒後
    dt.setSeconds(dt.getSeconds() + 10);

    console.log(dt);
}

実行結果：

Wed Jul 15 2020 21:30:50 GMT+0900 (東京 (標準時))

次に減算の例です。

window.onload = function () {
    // 基本的な、日付の減算
    var dt = new Date(2021, 5 + 1, 5, 12, 50, 15);

    //1年前
    dt.setFullYear(dt.getFullYear() - 1);

    //1か月前
    dt.setMonth(dt.getMonth() - 1);

    //10日前
    dt.setDate(dt.getDate() - 10);

    //12時間前
    dt.setHours(dt.getHours() - 12);

    //30分前
    dt.setMinutes(dt.getMinutes() - 30);

    //10秒前
    dt.setSeconds(dt.getSeconds() - 10);

    console.log(dt);
}

実行結果：

Tue May 26 2020 00:20:05 GMT+0900 (東京 (標準時))

ぜひ、実際に自分の環境にてサンプルの数値を変えてみるなどして、処理の流れを確認して見てくださいね。

なお、細かい話ですがGMT+0900 (東京 (標準時))の部分は実行環境により表示が異なります。Internet Explorer・Microsoft Edgeの場合、(東京 (標準時))。Google Chromeの場合、 (日本標準時)。Safariでは(JST)となります。

どれも日本標準時（JST）を表しており、本質的な違いはありません。ブラウザごとの仕様の違いということで、気にせず学習を進めていってください。

以下の実行結果も同様です。

月またぎの日数・月数の計算方法

では、ここから実践的な内容を解説していきます。

日数の加算・減算

日数の加算・減算については、月またぎの計算になってもうまく計算できます。月初から月をまたいで、1日前の日付を計算してみましょう。

window.onload = function () {
    // 月初の1日前日数計算
    var date1 = new Date(2020, 4 - 1, 1);
    date1.setDate(date1.getDate() - 1);
    console.log(date1);
}

実行結果：

Tue Mar 31 2020 00:00:00 GMT+0900 (東京 (標準時))

4月1日の「-1」日目として、3月31日が設定され、表示されていますね。

次に、月末の1日後を計算してみましょう。

window.onload = function () {
    // 月末の1日後日数計算
    var date1 = new Date(2020, 3 - 1, 31);
    date1.setDate(date1.getDate() + 1);
    console.log(date1);
}

実行結果：

Wed Apr 01 2020 00:00:00 GMT+0900 (東京 (標準時))

3月31日の「+1」日目として、4月1日が設定され、表示されていますね。

月数の加算・減算

月をまたいた月の加算・減算では、以下の法則で日数が加算・減算されます。

まずは、月を1ヶ月足す場合と2ヶ月分足す場合をみていきましょう。

window.onload = function () {
    //月に1ヶ月足す
    var date1 = new Date(2020, 3 - 1, 31);
    date1.setMonth(date1.getMonth() + 1);
    console.log(date1);
    //月に2ヶ月足す
    var date2 = new Date(2020, 3 - 1, 31);
    date2.setMonth(date2.getMonth() + 2);
    console.log(date2); 
}

実行結果：

Fri May 01 2020 00:00:00 GMT+0900 (東京 (標準時))
Sun May 31 2020 00:00:00 GMT+0900 (東京 (標準時))

3月31日の1ヶ月後は3月が「+1」され4月に、日は4月が30日までであるため31日が翌月に繰り越され、結果は5月1日になっていますね。

3月31日の2ヶ月後は3月が「+2」され5月に、日は5月が31日まであるため31日が採用され、結果は5月31日になっていますね。

次に月から1ヶ月分引く場合と、月に2ヶ月分引く場合をみていきましょう。

window.onload = function () {
    //月に1ヶ月引く
    var date1 = new Date(2020, 3 - 1, 30);
    date1.setMonth(date1.getMonth() - 1);
    console.log(date1);
    //月に2ヶ月引く
    var date2 = new Date(2020, 3 - 1, 30);
    date2.setMonth(date2.getMonth() - 2);
    console.log(date2);
}

実行結果：

Sun Mar 01 2020 00:00:00 GMT+0900 (東京 (標準時))
Thu Jan 30 2020 00:00:00 GMT+0900 (東京 (標準時))

3月30日の1ヶ月前は3月が「-1」され2月に、日は2月は29日までしかないため、30日が翌月に繰り越され、結果は3月1日になっていますね。

3月30日の2ヶ月後は3月が「-2」され1月、日は1月は31日まであるため、30日が採用され、結果は1月30日になっていますね。

月初日、月末日の算出

月初日、月末日の取得については、以下ページにて解説していますので、ご参照ください。

うるう年を計算する方法

うるう年を計算するには、下記条件を満たすかどうかチェックします。

がうるう年であると判定できます。そのため、コードでは以下のように計算します。

window.onload = function () {
    //うるう年かどうか？
    function isLeapyear(year) {
        return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0);
    }

    var date = new Date(2020, 5, 5);
    console.log("isLeapYear=" + isLeapyear(date.getFullYear()));
}

実行結果：

isLeapYear=true

以上のように、2020年はうるう年ですね。このように関数化すると便利です。

日付の使い方総まとめ

日付の様々な使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

まとめ

いかがでしたか。

JavaScriptでは、日付をDate#newで作成した後、簡単に年、月、日、時、分、秒を個別に取得、設定ができ、個別に加算、減算することが可能でした。

ただし、月をまたいだ日数や月数を加算、減算する際は、日が月初日や月末日を超えている場合、日が前月や翌月に繰り越されて計算されてしまうという注意ポイントがありました。また、うるう年を計算する方法も見てきました。

うるう年は関数化してしまえば、簡単にうるう年かどうかをチェックできました。便利ですので、ぜひ、応用されてください。

JavaScriptの日付の加算、減算について忘れてしまったら、またこのページを読み返してください！