【JavaScript入門】日付の取得と比較の方法まとめ

今日は、JavaScriptによる日付の取得について学習します。

この記事では、日付を取得する、日付をフォーマットする、日付の妥当性をチェックするなどの基本的な内容から応用的な使い方についても紹介していきます。

JavaScriptによる日付の取得をよく把握して自分のスキルとしていきましょう！

今日、昨日、明日の日付を取得する方法

今日の日付を取得する方法

今日の日付を取得するにはDateクラスをnew演算子で指定して、新しいオブジェクトを生成した際に、そのインスタンスはデフォルトで今日がセットされた状態で初期化されます。

そのまま変数に入れると、以後、今日の日を示すDateオブジェクトとして使用できます。下記コードのようにDateオブジェクトから、年、月、日、時、分、秒をそれぞれ単独でメソッドで取得できます。

window.onload = function () {
   var today = new Date();
    console.log(today);
 
    console.log("年=" + today.getFullYear());
    console.log("月=" + (today.getMonth()+1));
    console.log("日=" + today.getDate());
    console.log("時=" + today.getHours());
    console.log("分=" + today.getMinutes());
    console.log("秒=" + today.getSeconds());
}

実行結果：

Thu May 11 2017 13:23:33 GMT+0900 (東京 (標準時))
年=2017
月=5
日=11
時=13
分=23
秒=33

Date#getMonth()だけは0～11の月数を返すため、これを1～12にするには、「+1」する必要があります。また、GMT+0900 (東京 (標準時))の部分は実行環境により表示が異なります。

Internet Explorer・Microsoft Edgeの場合、(東京 (標準時))。Google Chromeの場合、 (日本標準時)。Safariでは(JST)となります。

どれも日本標準時（JST）を表しており、本質的な違いはありません。

昨日の日付を取得する方法

次に、昨日の日付を求めてみましょう。今日の日はDate#getDate()メソッドにて求めることができます。そのため、昨日の日は「getdDate() – 1」ということになります。

この昨日の日を、Date#setDate()メソッドにてセットします。setDate()は変数の日を、引数の日に設定し直します。

window.onload = function () {
    var yesterday = new Date();
    console.log("今日=" + yesterday);
    yesterday.setDate(yesterday.getDate() - 1);
    console.log("昨日=" + yesterday);
 
    console.log("年=" + yesterday.getFullYear());
    console.log("月=" + (yesterday.getMonth() + 1));
    console.log("日=" + yesterday.getDate());
    console.log("時=" + yesterday.getHours());
    console.log("分=" + yesterday.getMinutes());
    console.log("秒=" + yesterday.getSeconds());
 
    var gessho = new Date(2017, 4 - 1, 1);
    gessho.setDate(gessho.getDate() - 1);
    console.log("月初の昨日=" + gessho);
}

実行結果：

今日=Thu May 11 2017 13:35:06 GMT+0900 (東京 (標準時))
昨日=Wed May 10 2017 13:35:06 GMT+0900 (東京 (標準時))
年=2017
月=5
日=10
時=13
分=35
秒=6
月初の昨日=Fri Mar 31 2017 00:00:00 GMT+0900 (東京 (標準時))

以上のように今日の日を「-1」し再度セットすることで、昨日の日が求められていますね。また、月初日の昨日の日も「-1」することができ、前月の月末としてきちんと計算されていることが分かります。

明日の日付を取得する方法

次に明日の日の取得方法ですが、昨日が日を「-1」したのに対し、明日は日を「+1」します。

window.onload = function () {
    var tomorrow = new Date();
    console.log("今日=" + tomorrow);
    tomorrow.setDate(tomorrow.getDate() + 1);
    console.log("明日=" + tomorrow);
 
    console.log("年=" + tomorrow.getFullYear());
    console.log("月=" + (tomorrow.getMonth() + 1));
    console.log("日=" + tomorrow.getDate());
    console.log("時=" + tomorrow.getHours());
    console.log("分=" + tomorrow.getMinutes());
    console.log("秒=" + tomorrow.getSeconds());
 
    var getsumatsu = new Date(2017, 3 - 1, 31);
    getsumatsu.setDate(getsumatsu.getDate() + 1);
    console.log("月末の明日=" + getsumatsu);
}

実行結果：

今日=Thu May 11 2017 13:50:23 GMT+0900 (東京 (標準時))
明日=Fri May 12 2017 13:50:23 GMT+0900 (東京 (標準時))
年=2017
月=5
日=12
時=13
分=50
秒=23
月末の明日=Sat Apr 01 2017 00:00:00 GMT+0900 (東京 (標準時))

今日の日にDate#setDate()内で「+1」することにより、明日の日を求めることができています。また、月末の日に「+1」すると翌月の月初という明日の日が計算されていることもわかります。

曜日を漢字で取得する方法

JavaScriptの標準のメソッドでは、曜日を漢字で取得できません。そこで代替の方法を考える必要があります。ちょうど、Date#getDay()メソッドが、日～月の曜日に対応する0～6の数値を返します。

これを利用すると、例えば以下のように曜日を格納した配列を準備しておきます。

var weekDay = ["日", "月", "火", "水", "木", "金", "土"];

配列のインデックスに以下のように「date.getDay()」を指定すれば曜日を感じで取得できるようになります。

weekDay[date.getDay()];

他にも、

var weekDay = "日月火水木金土";
weekDay[date.getDay()];

とすることで曜日を漢字で取得できます。

window.onload = function () {
    function getWeekDay1(date) {
        // 曜日配列
        var weekDay = ["日", "月", "火", "水", "木", "金", "土"];
        return weekDay[date.getDay()];
    }
    function getWeekDay2(date) {
        // 曜日文字列
        var weekDay = "日月火水木金土";
        return weekDay[date.getDay()];
    }
 
    var dt = new Date(2020, 5 - 1, 5);
    console.log("曜日1=" + getWeekDay1(dt));
    console.log("曜日2=" + getWeekDay2(dt))
}

実行結果：

曜日1=火
曜日2=火

月初、月末を取得する方法

月初の日付を取得する方法

次に月初と月末を求める方法を学習していきます。まずは月初です。月初は、Dateのインスタンスの保持している日付に対し、Date#setDate(1)にて日を1にセットするだけで月初になります。

window.onload = function () {
    var day = new Date(2020, 3 - 1, 30);
    var today = new Date();
    console.log("before: day=" + day);
    console.log("before: today=" + today);
 
    day.setDate(1);
    today.setDate(1);
 
    console.log("after: day=" + day);
    console.log("after: today=" + today);
}

実行結果：

before: day=Mon Mar 30 2020 00:00:00 GMT+0900 (東京 (標準時))
before: today=Thu May 11 2017 15:49:37 GMT+0900 (東京 (標準時))
after: day=Sun Mar 01 2020 00:00:00 GMT+0900 (東京 (標準時))
after: today=Mon May 01 2017 15:49:37 GMT+0900 (東京 (標準時))

月末の日付を取得する方法

次は、月末を取得する方法です。Date#newメソッドを使用する際に、日を0と指定すると、0日目を指定したことになります。0日目ですから月の１日目の昨日です。つまり0日目は前月の月末です。

これを利用して、今月+1の月の0日目をDate#newに渡すことにより、今月の月末日を取得します。

window.onload = function () {
    var today = new Date();
    console.log("today=" + today);
    var getsumatsu = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    console.log("getsumatsu=" + getsumatsu);
}

実行結果：

today=Thu May 11 2017 14:42:39 GMT+0900 (東京 (標準時))
getsumatsu=Wed May 31 2017 00:00:00 GMT+0900 (東京 (標準時))

日付を比較する方法

今日と比較する

今日の日付のDate型の変数は、以下のようにDateコンストラクタにDate.now()メソッドの返値を与えて初期化することで得られます。

// 今日の日付
var date1 = new Date(Date.now());

また、任意の日付のDate型の変数は、以下のようにDateコンストラクタに年月日と時分秒を与えて初期化することで得られます。

// 2020/4/30 12:30:45
var date2 = new Date(2020, 4, 30, 12, 30, 45);

この今日の日付を、別の日付と比較してみましょう。Date型の比較には「<」「>」演算子が使用できます。注意点として、古い日付が小さく、新しい日付が大きい値です。

window.onload = function () {
    
    // 今日の日付
    var date1 = new Date(Date.now());
    // 2020/4/30 12:30:45
    var date2 = new Date(2020, 4, 30, 12, 30, 45);
 
    console.log("date1 > date2 = " + (date1 > date2));
    console.log("date1 < date2 = " + (date1 < date2));
    
    // 参考URL
    // https://www.sejuku.net/blog/23115#ltgt
}

実行結果：

date1 > date2 = false
date1 < date2 = true

以上のように、まだ2020年4月30日になっていない場合は、date1 > date2はfalseに、date1 < date2はtrueになっていますね。

もし、2020年4月30日をすぎてしまっている場合は、date1 > date2はtrueに、date1 < date2はfalseになります。注意点として、Date型の「==」演算子は「Date型の同じインスタンスかどうかを比較する」演算子であることです。

そのため、「==」演算子は「同じ日付かどうか」を比較することはできません。日付の「<」「>」演算子による比較と「==」演算子について、詳しくは下記URLを参照されてください。

任意の日付を比較する

今度は任意の日付同士を「<」「>」演算子で比較してみましょう。

window.onload = function () {
    
    // 2020/4/1  12:30:45
    var date1 = new Date(2020, 4, 1, 12, 30, 45);
    // 2020/4/30 12:30:45
    var date2 = new Date(2020, 4, 30, 12, 30, 45);
 
    console.log("date1 > date2 = " + (date1 > date2));
    console.log("date1 < date2 = " + (date1 < date2));
    
    // 参考URL
    // https://www.sejuku.net/blog/23115#ltgt
}

実行結果：

date1 > date2 = false
date1 < date2 = true

date1は「2020/4/1 12:30:45」で、date2は「2020/4/30 12:30:45」です。Date型は古い日付が小さく、新しい日付が大きい値でしたね。実行結果もその通りの結果になっています。

日付をgetTime()で比較する

Date型のgetTime()メソッドは、「1970/1/1 00:00:00」から経過したミリ秒をNumber型で返します。

このgetTime()の返値のミリ秒も古い日付が小さく、新しい日付が大きい値です。そこで、Number型の「<」「>」「==」演算子を使って、日付の大小の比較ができます。

window.onload = function () {
    var date1 = new Date(2020, 4, 1, 12, 30, 45);
    var date2 = new Date(2020, 4, 30, 12, 30, 45);
    var date3 = new Date(2020, 4, 1, 12, 30, 45);
 
    console.log("date1.getTime() > date2.getTime() = " + (date1.getTime() > date2.getTime()));
    console.log("date1.getTime() < date2.getTime() = " + (date1.getTime() < date2.getTime()));
    console.log("date1.getTime() == date3.getTime() = " + (date1.getTime() == date3.getTime()));
    
    // 参考URL
    // https://www.sejuku.net/blog/23115#getTime
}

実行結果：

date1.getTime() > date2.getTime() = false
date1.getTime() < date2.getTime() = true
date1.getTime() == date3.getTime() = true

date1はdate2より古い日付であり、date1>date2はfalse、date1<date2はtrueになっています。また、date1とdate3は同じ日付ですので「==」演算子で比較するとtrueとなっています。

日付をフォーマットして出力する方法

JavaScriptにはDate型を任意の表記にformatするメソッドが存在しません。そのため、独自に実装する必要があります。

そこで、Date型の引数date、フォーマット文字列を持つ引数formatをとるメソッドdateToStr24HPad0()を独自に実装してみます。

引数のformat文字列に対し、replace()メソッドを使用し「YYYY」や「MM」などのキーワードを「dateの年の値」や「dateの月の値」に置換しています。

format内のキーワードに対し個別にreplace()メソッドで年月日時分秒の値を置換し、Date型の値を好きなフォーマットで整形し文字列にしています。

window.onload = function () {
    // 任意の文字列にformatする
    
    // フォーマットする自作関数
    function dateToStr24HPad0(date, format) {
        
        if (!format) {
            // デフォルト値
            format = 'YYYY/MM/DD hh:mm:ss'
        }
        
        // フォーマット文字列内のキーワードを日付に置換する
        format = format.replace(/YYYY/g, date.getFullYear());
        format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
        format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
        format = format.replace(/hh/g, ('0' + date.getHours()).slice(-2));
        format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
        format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
        
        return format;
    }
 
    console.log(dateToStr24HPad0(new Date(), 'YYYY/MM/DD hh:mm:ss'));
    
    // 参考URL：
    // https://www.sejuku.net/blog/23064
}

実行結果：

2017/08/21 18:21:13

以上のようにDate型の値をformatを指定して好きなフォーマットで整形し、文字列型に変換しています。皆さんも独自のキーワードとロジックを追加して、例えば「AM/PM」や、「0埋めなし日付」などを実装されてみてください。

なお、Date型のformatの詳細については、以下のURLをご参照ください。

日付の妥当性をチェックする方法

Date型の変数の日付の値の妥当性をチェックするには、DateコンストラクタにDate型の変数の年月日を指定して初期化した、別のDate型の変数を作成します。

元のDate型の変数と、それを使って初期化したDate型の変数の年月日を比較し、両者が一致している場合は妥当、一致していない場合は妥当でないと判断します。

function validateDate(year, month, day ) {
    
    try {
    // year、month、dayの年月日をもつDate型のインスタンスを作成
    var validDate=new Date( year, month - 1, day);
    
    // year、month、dayが妥当であるかどうかのチェック
    var isValid = (
                   ( validDate.getFullYear() == year )
                && ( validDate.getMonth() == month - 1 )
                && ( validDate.getDate() == day)
            );
    
    //  妥当性をtrue、falseで返す
    return isValid;
    
    } catch( e ) {
        
        // Date型の作成で例外が発生した場合は、妥当でないのでfalse
        return false;
    }
}

では上記の日付の妥当性チェック関数を実際に使用してみましょう。

window.onload = function () {
    console.log('Is 2019/2/29 valid? : ' + validateDate( 2019, 2, 29 ));
    console.log('Is 2020/2/29 valid? : ' + validateDate( 2020, 2, 29 ));
}

実行結果：

Is 2019/2/29 valid? : false
Is 2020/2/29 valid? : true

うるう年でない2019年の2月29日は妥当でなくfalseが返ってきています。うるう年の2020年の2月29日は妥当でありtrueが返ってきています。

日付の加算・減算をする方法まとめ

日付の加算・減算をする方法についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

日付の使い方総まとめ

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

まとめ

今回は、JavaScriptによる日付の取得を学習しました。学習のポイントを振り返ってみましょう！

以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください！