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

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

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

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

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

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

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

「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通りすべての方法で同じ日時を出力している点に注目してください！

実は、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日

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

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

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

日付を「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オブジェクトのフォーマットについてのさらに詳しい解説は以下の記事にまとめているので参考にしてみてください。

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の詳しい使い方はこちらの記事で解説しているので、ぜひ確認してください。

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が出力できているのが分かります。さまざまな日付の比較事例については、次の記事で詳しくまとめているのでぜひ参考にしてみてください！

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

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

「経過ミリ秒」は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と呼ばれていたからです。タイムゾーンの詳細については、以下の記事で詳しくまとめているのでぜひ参考にしてみてください！

「Datepicker」を使った日付表示

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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