日付処理を使い倒す! JavaScriptのDate活用法を徹底解説

こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。

WEBサイトにおいて、日付というのは重要な情報の1つですよね。そんな情報の処理について、みなさんどれくらいご存知ですか?

どうやったら日付が表示できるのかわからない…
いろいろ調べたけど、できることがいっぱいあってよくわからない…

なんて方もいるかもしれませんね。今回はそんな方必見!

JavaScriptの日付操作でよく使用されるDateオブジェクトについて解説していきます。

下記の流れで、日付処理の全てをご紹介しましょう。

  • 【基礎】「Dateオブジェクト」とは?
  • 【基礎】Dateオブジェクトの使い方
  • 【発展】Dateのフォーマット
  • 【発展】Dateオブジェクトの主要メソッド
  • 【発展】Dateオブジェクトの比較
  • 【発展】タイムゾーンを世界標準時(UTC)で取得する方法
  • 【発展】「Datepicker」を使った日付表示

項目がちょっと多いですが、具体的なサンプルコードと共に詳しく解説していきます。じっくり読んで、理解を深めていってください。

「Dateオブジェクト」とは?

それでは、「Dateオブジェクト」についての基本的な学習から始めていきましょう!

「Dateオブジェクト」はJavaScript標準で用意されている組み込みオブジェクトで、主に「日付 / 時間」を操作することができます。JavaScriptから特定の日付を算出できるのはもちろんですが、ある一定期間の経過時間を求めることも簡単です。

なぜなら、Dateオブジェクトには用途に応じて便利に使えるメソッドがたくさん用意されているからです。

本記事では、これらのメソッドの使い方や応用的な実践例も合わせて解説していきますので、ぜひ参考にしてみてください!

Dateオブジェクトの使い方

ここからは、実際にDateオブジェクトを活用したプログラミング手法を見ていきましょう!

基本的な使い方から日付の設定、加算・減算などの演算処理についても詳しく見ていきます。

newを使って現在の日時を取得する方法

「Dateオブジェクト」を使って「日付 / 時間」を操作するには、まず最初に「new」を使ってインスタンスを作成する必要があります。次のサンプル例を見てください!

var today = new Date();

console.log( today )

実行結果

Tue Nov 27 2017 11:41:24 GMT+0900 (JST)

この例では、「new Date()」と記述することでDateオブジェクトのインスタンスを作成しています。そのインスタンスを変数「today」へ代入していますよね?

この時点で「today」には現在の「日時」が格納されており、実行結果にしっかりと出力されているのが分かります。

任意の日付を設定する方法

先ほど「new Date()」と記述したように「引数なし」でそのまま利用しました。

しかし、引数を指定することでさらに3種類の取得方法があり全部で4通りの日付を求める方法があることになります。

そこで、それぞれの日付を求める方法について見てみましょう。次のサンプル例を見てください!

//①引数なしで取得
var today1 = new Date();

//②日時の文字列で取得
var today2 = new Date( '2017/11/27 20:30' );

//③年月日時分で取得
var today3 = new Date( 2017, 10, 27, 20, 30 );

//④経過ミリ秒で取得
var today4 = new Date( 1511782200000 );

console.log( today1 );
console.log( today2 );
console.log( today3 );
console.log( today4 );

実行結果

①引数なしで取得
Mon Nov 27 2017 11:51:24 GMT+0900 (JST)

②日時の文字列で取得
Mon Nov 27 2017 20:30:00 GMT+0900 (JST)

③年月日時分で取得
Mon Nov 27 2017 20:30:00 GMT+0900 (JST)

④経過ミリ秒で取得
Mon Nov 27 2017 20:30:00 GMT+0900 (JST)

実行結果を見ると分かりますが、先ほど学んだ「引数なし」の①では現在の日時が出力され、「引数を指定した」②から④では3通りすべての方法で同じ日時を出力している点に注目してください!

  • ①の引数なしで日時を求める方法はこれまで学んできた内容。
  • ②の日時を「文字列」から求める方法は、「2017/11/27」や「2017-11-27」のように一般的な日時の文字列をそのまま代入するだけ。
  • ③の「年月日時分」で求める方法は、数値を順番に「カンマ区切り」で指定していけばOK!(「月」は1引いた数になる点に注意)
  • ちょっと分かりにくいのが④の「経過ミリ秒」で日時を求める方法。

実は、Date()には「1970年1月1日 00:00:00」からミリ秒単位で経過時間を計測できる機能があるのです。

この機能を活用したメソッドも幾つか用意されており、上手に利用することでミリ秒から日時を求められるというわけです。

日付を加算・減算する方法

「Date()」を使うケースで多いのが「加算・減算」などの計算処理です。

しかしながら、日付や時間などを計算することに特化したメソッドというのはDateオブジェクトに用意されていません。

なぜなら、通常の四則演算処理だけで計算することができるように設計されているからなのです!

例えば、今日の日付から「50日前」「50日後」は何月何日になるでしょうか?次のサンプル例を見てください!

var day = new Date();

console.log( day );  //今日の日付

day.setDate( day.getDate() + 50 );

console.log( day );  //50日後の日付

実行結果

Wed Nov 29 2017 15:56:43 GMT+0900 (JST)

Thu Jan 18 2018 15:56:43 GMT+0900 (JST)

この例では、まず「new Date()」で今日の日付を取得していますね。

そして、今日の日付に対して「setDate()」を記述することで日時を再設定できるようになります。

つまり、再設定する日付を50日後にすれば良いので「today.getDate() + 50」と記述すれば良いわけです。実行結果を見ると、最初の日付から50日後の日付がしっかりと表示されていますね!

月の終わりが「30日」か「31日」なのかを悩む必要がなく、すべて自動的に計算してくれるので便利ですね。この考え方を理解できれば、まったく同じ方法で「減算」も可能ですね。

var day = new Date();

day.setMonth( day.getMonth() - 3 );

console.log( day );

実行結果

Wed Aug 29 2017 16:00:43 GMT+0900 (JST)

この例では、今日の日付から「3ヶ月」を引いた結果を求めていますね。「月」の場合は、「setMonth()」で再設定できます。

あとは、「day.getMonth() - 3」と記述すれば3ヶ月前の日付を求めることが出来るわけです

また、月またぎの日数計算や「うるう年」の計算方法など、さまざまな事例について次の記事で詳しく解説しているのでぜひ参考にしてみてください!

Dateのフォーマット

ここからは、Dateオブジェクトを使って取得した日付データを任意のフォーマット(形式)に調整する手法について学んでいきます。

便利に使えるメソッドの種類や使い方、独自フォーマットに変換するための関数定義の方法などを詳しく見ていきましょう!

日付のフォーマットを設定できるメソッド一覧

日付データを取得したら、そこから任意のフォーマットへ変更するためにどんなメソッドが用意されているのかを確認しましょう!

一般的には、日付データから「年・月・日・曜日・時・分・秒」などのデータを個別に取得できるメソッドがあります。

次の表を見てください!

getFullYear() 日付の「年」を取得する(4桁)
getMonth() 日付の「月」を取得する(0 - 11)
getDate() 日付の「日」を取得する(1 - 31)
getDay() 日付の「曜日」を取得する(0 - 6)
getHours() 日付の「時」を取得する(0 - 23)
getMinutes() 日付の「分」を取得する(0 - 59)
getSeconds() 日付の「秒」を取得する(0 - 59)

これらのメソッドを使うことで、日付の個別データを取得できるわけです。

そして、これらのデータを応用すれば自分の好きな日付の形式にいくらでも変換することが可能になります。1つだけ注意点としては、「getMonth()」メソッドで取得できる数値は「0 〜 11」であるという点です!

つまり、実際の日付を得るには取得した数値に「+1」する必要があるわけです。この点は間違いやすいポイントなので、忘れないようにしておきましょう!

日付のフォーマットを設定する方法

それでは、先ほどのメソッドを活用して日付のフォーマットを設定してみましょう!

今回は、取得したDateオブジェクトを「○年○日○日」の形式に変換してみます。次のサンプル例を見てください!

var today = new Date();

var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();

console.log( year + '年' + month + '月' + day + '日');

実行結果

2018年2月1日

この例では、まず最初に今日の日付を取得してそこから「年・月・日」をそれぞれ個別に取得しているのが分かります。取得した個別の日付データは、最後に文字列と組み合わせて実行結果のように出力しています。

このように、日付データを分解して個別に取得することで、自分の好きなように日付データのフォーマット(形式)を変えられるわけです。

また、昨日・今日・明日・月末などの特定日時を取得する方法や、日付の比較などについては次の記事で詳しく解説しているので参考にしてみてください!

【JavaScript入門】日付の取得と比較の方法まとめ
更新日 : 2019年7月22日

日付を「yyyy mm dd」形式で指定する方法

実は、Dateオブジェクトには任意のフォーマットへ変換するメソッドがありません

そのため、一般的には自分で独自の関数を作成することになります。【 関数名( dateオブジェクト, フォーマット ) 】のような形式で任意の日付フォーマットに変換する関数を作るわけです。

例えば、フォーマットの箇所に「YYYY年MM月DD日」という風に指定したら「2018年2月1日」のような形式に変換される関数を作ってみましょう!

function sampleDate(date, format) {

    format = format.replace(/YYYY/, date.getFullYear());
    format = format.replace(/MM/, date.getMonth() + 1);
    format = format.replace(/DD/, date.getDate());

    return format;
}

console.log( sampleDate(new Date(), 'YYYY年MM月DD日') );

実行結果

2018年2月1日

この例では、sampleDate()を作ってコンソールログへ指定したフォーマットで日付を出力するようにしています。

仕組みは簡単で、フォーマットの「YYYY」という部分を「replace()」メソッドを使って「年」に置換しているだけです。「月・日」も同様に置換すれば、フォーマットで指定した形式の日付が取得できるというわけです。

この関数を応用すれば、「時:分:秒」の出力や「AM / PM」の付与なども簡単にできますね。

なお、Dateオブジェクトのフォーマットについてのさらに詳しい解説は以下の記事にまとめているので参考にしてみてください。

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

Dateオブジェクトの主要メソッド

Dateオブジェクトには多数のメソッドが用意されているわけですが、特に日付に関するプログラミングでよく使われるものをご紹介します!

now()で現在の日付を求める方法

now()メソッドは、現在の日時データを「経過ミリ秒」で取得することができます。

一般的な記述方法としては、【 Date.now() 】のようにDate型にそのままnow()メソッドを実行すればOKです。次のサンプル例を見てください!

var day = Date.now();

console.log( day );

実行結果

1517557599943

この例では、now()メソッドを実行して現在の日時を経過ミリ秒で取得しています。

「new Date()」と記述しても現在の日時を取得できますが、now()はミリ秒で取得できるという違いがあるのを覚えておきましょう!

getTime()で経過ミリ秒を取得する方法

「getTime()」メソッドは、任意の日付が持っている「経過ミリ秒」を取得することができます。

一般的な記述方法としては、【 Date.getTime() 】のようにDate型へ直接getTime()を実行します。

var day = new Date('2020/8/1');

console.log( day.getTime() );

実行結果

1596207600000

この例では、「2020年8月1日」という日付データを持つDateオブジェクトに対してgetTime()を実行しています。実行結果を見ると、指定の日付データが持つ経過ミリ秒を取得できているのが分かりますね。

JavaScriptではこの「ミリ秒」を使ってさまざまな[]b比較や演算処理ができるので、いつでも利用できるように慣れておきましょう!

parse()で文字列を日付に変換する方法

「parse()」メソッドは、文字列の日付データをDateオブジェクトの形式に変換することができます。

ただし、変換された結果は「経過ミリ秒」になるという点に注意が必要です。一般的な記述方法としては、【 Date.parse( 日付の文字列 ) 】のように引数へ文字列で記述された日付を指定します。

次のサンプル例を見てください!

var day = Date.parse('2020/8/1');

console.log( day );

実行結果

1596207600000

この例では、「2020年8月1日」の日付データが持つ経過ミリ秒をparse()で取得しています。実行結果を見ると、経過ミリ秒が取得できているのが分かりますね。

ただし、parse()メソッドはブラウザによって解釈が少し異なるため結果が微妙に異なるケースがあります。

そのため、現在では先ほどご紹介した「getTime()」を使ったミリ秒を取得する方が良いでしょう。

toString()で日付を文字列に変換する方法

「toString()」メソッドは、Dateオブジェクトで作られた日付データを文字列に変換してくれるメソッドになります。

基本的な使い方としては、【 日付.toSting() 】のように変換したい日付に対してtoString()を実行するだけです。

次のサンプル例を見てください!

var today = new Date();

console.log( today.toString() );

実行結果

Fri Jun 01 2018 17:36:22 GMT+0900 (JST)

この例では、現在の日付を取得したあとにtoString()を実行しているのが分かりますね。コンソールには文字列として変換された日付データが出力されていることに注目してください。

注意点としては、出力される日付は必ず英語になるので必要に応じて日本語に変換する処理を行いましょう!

toStringの詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

【JavaScript入門】toStringで数値を文字列に変換(日付/基数変換)
更新日 : 2019年5月17日

Dateオブジェクトの比較

Dateオブジェクトの日付は、簡単な記述で比較を行うことが可能です。

複数の日付を比較する方法や、経過ミリ秒による比較手法を詳しく見ていきましょう!

日付を比較する方法

Dateオブジェクトは、比較演算子の「<」「>」によって日付同士を比較することができます。

JavaScriptでは、古い日時が小さい値になり新しい日時が大きい値になるように設計されています。次のサンプル例を見てください!

var date1 = new Date('2020/8/1');
var date2 = new Date('2020/9/1');

console.log('date1 > date2 = ' + (date1 > date2));
console.log('date1 < date2 = ' + (date1 < date2));

実行結果

date1 > date2 = false
date1 < date2 = true

この例では、2つの日付を比較演算子を使って比べているのが分かります。「date1」には8月の日付が格納されており、「date2」は9月の日付データが格納されています。

つまり、date1の日付よりもdate2の日付の方が大きい値ということになりますね。

実行結果を見ると、正しくtrue / falseが出力できているのが分かります。さまざまな日付の比較事例については、次の記事で詳しくまとめているのでぜひ参考にしてみてください!

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

経過ミリ秒を使って日付を比較する方法

今度は、経過ミリ秒を使って日付同士を比較してみましょう!

「経過ミリ秒」はNumber型の数値であるため、比較演算子の「<」「>」に加えて「===」の利用も可能です。経過ミリ秒の取得は一般的に「getTime()」メソッドを利用するのが簡単です。

次のサンプル例を見てください!

var date1 = new Date('2020/8/1');
var date2 = new Date('2020/8/1');

if(date1.getTime() === date2.getTime()) {
    console.log('日付は同じです');
}
else {
    console.log('日付が異なります');
}

実行結果

日付は同じです

この例では、まったく同じ日付同士の経過ミリ秒を使って比較しているのが分かります。経過ミリ秒が同じなので、当然ですが結果はtrueとなりまったく同じであることが実行結果からも分かりますね。

このように、日付データは四則演算で計算するだけでなく、比較も簡単に行えるという点を覚えておきましょう!

タイムゾーンを世界標準時(UTC)で取得する方法

Dateオブジェクトでは、世界標準時(UTC)のタイムゾーンの日時を取得できます。UTCフォーマットの文字列を取得するには「toUTCString()」メソッドを使用するのが一般的です。

ちなみに、拡張表記のISO形式にも対応しており「toISOString()」メソッドを使用します。

実際にサンプルコードを見ていきましょう。

// UTCの日時を取得
var utc = new Date();
console.log( utc.toUTCString() );

// ISO形式の日時を取得
var iso = new Date();
console.log( iso.toISOString() );

実行結果

Fri, 18 Aug 2017 05:15:06 GMT


2017-08-18T05:15:06.278Z

実行結果を見ると、UTC・ISOフォーマットの文字列を取得していますね。

なお、UTCの出力にGMTとあるのは、以前はUTCがGMTと呼ばれていたからです。タイムゾーンの詳細については、以下の記事で詳しくまとめているのでぜひ参考にしてみてください!

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

「Datepicker」を使った日付表示

最後に、日付を扱うことの多いカレンダーを使った処理についても合わせて解説をしておきます!

一般的によく使われるのは「Datepicker」というjQuery UIのライブラリにある機能です。初心者でも簡単に実装できるのが特徴で、独自フォーマットなども標準でサポートされています。

使い方も簡単で、まずはカレンダーを表示させたい箇所に次のようなHTMLを記述します。

<input type="text" id="datepicker">

ポイントは「id属性」を指定するという点です。

名称は何でも構いませんが、次のようにjQueryから設定する必要があります!

$('#datepicker').datepicker();

先ほど指定したid属性に対して、「datepicker()」を実行すればカレンダーが表示されます。

そして、カレンダーから日付を選択してフォームへ入力することもできるわけです。

さらに「datepicker」を使った応用技や活用事例について、次の記事で詳しくまとめているのでぜひ参考にしてみてください!

【jQuery入門】Datepickerの使い方とオプション設定まとめ!
更新日 : 2019年4月24日

まとめ

今回は、JavaScriptで日付データを扱う「Dateオブジェクト」を学習しました!

最後に、学習のポイントを振り返ってみましょう!

  • Dateオブジェクトを利用すると任意の日付データを取得できる
  • Dateオブジェクトは簡単な記述で加算・減算ができる
  • 日付を任意のフォーマットに変換できるメソッドが用意されている
  • 日付データは簡単な記述で比較を行うことができる
  • Dateオブジェクトは世界標準時の取得にも対応している
  • Datepickerを使えばカレンダーから日付を操作できる

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

LINEで送る
Pocket

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



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

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

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

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

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

書いた人

貝原 輝昌

貝原 輝昌

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

おすすめコンテンツ

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

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