【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日目ですから月の1日目の昨日です。つまり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を参照されてください。

【JavaScript入門】日付の比較とチェックをする方法
更新日 : 2019年3月30日

任意の日付を比較する

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

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をご参照ください。

【JavaScript入門】日付のフォーマットを指定する方法まとめ
更新日 : 2019年4月23日

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

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による日付の取得を学習しました。学習のポイントを振り返ってみましょう!

  • 今日、昨日、明日、月初、月末の日付を取得できる
  • 曜日を漢字で取得できる
  • 日付を「<」「>」演算子で比較できる
  • getTime()メソッドを使用し「<」「>」「==」演算子で比較できる
  • 日付をフォーマットして出力し文字列型に変換できる
  • 日付の妥当性チェックができる

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

貝原 輝昌

貝原 輝昌

こんにちは!貝原(@touhicomu)と申します。
現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。
現住所は、日本の西海岸、長崎県は波佐見町です。田舎ライフです。^^
地元の観光団体「笑楽井石」にボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。
以下の活動も行っています。
 ・笑楽井石のブログ
 ・エクセル関数を日本語化するソフト
 ・エクセルVBAを日本語で記述するソフト

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説