【初心者向け】JavaScriptで日付と時刻を扱う方法｜Dateオブジェクトの使い方を徹底解説

プログラミングにおいて、時間は切っても切り離せない存在です。私たちが時計やカレンダーを使って日々の予定を管理するように、プログラムも時間を記録・管理する仕組みを使って「何を、いつ実行すべきか」を判断しています。

たとえば、ブログアプリケーションは記事が作成された日時を記録する必要がありますし、カレンダーアプリケーションは登録された予定を正しい日時に表示しなければなりません。

このガイドでは、JavaScriptで日付と時刻を扱う方法について解説します。具体的なコード例を交えながら基本から丁寧に説明していきますので、ぜひ最後まで読んでみてください。

JavaScriptのDateオブジェクトとは？

JavaScriptで日付や時刻を扱うには、Dateオブジェクトを使用します。Dateオブジェクトは日付と時刻の情報を格納するための特別なオブジェクトで、日時に関するさまざまな情報を取得するためのメソッドが多数用意されています。

Dateオブジェクトは次のように記述します。

new Date();

ここで「Date」が大文字になっていることに注目してください。DateはJavaScriptに組み込まれたオブジェクト（ビルトインオブジェクト）であるため、使用する際には必ず先頭を大文字にする必要があります。

Dateオブジェクトの基本的な使い方

Dateオブジェクトを引数なしで呼び出すと、現在の日付と時刻を取得できます。この値は、OSの設定とタイムゾーンに基づいて自動的に計算されます。

現在の日付を取得するコードは次のとおりです。

var currentDate = new Date();
console.log(currentDate);

このコードを実行すると、次のようなDateオブジェクトが出力されます。

Wed Jun 24 2020 10:49:46 GMT+0100 (British Summer Time)

出力結果のタイムスタンプを見ると、この記事が2020年6月24日にイギリスで執筆されたことがわかります。Dateオブジェクトの便利な点は、人間が読みやすい形式で日付データを返してくれるところです。

getTime()メソッドでタイムスタンプを取得する

上記の出力結果は人間には読みやすい形式ですが、実はJavaScript内部では別の方法で日付を扱っています。JavaScriptは「Unixタイムスタンプ」という形式で日付を解釈します。Unixタイムスタンプとは、1970年1月1日0時0分0秒（Unixエポック）からの経過時間をミリ秒で表した数値のことです。

現在時刻をタイムスタンプとして取得するには、getTime()メソッドを使用します。

var currentDate = new Date();
console.log(currentDate.getTime());

このコードを実行すると、1592992393313のような数値が返されます。これがJavaScriptが理解できる形式のタイムスタンプです。

特定の日付を持つDateオブジェクトを作成する

Dateオブジェクトのデフォルト値は現在の日付と時刻ですが、特定の日時を指定してDateオブジェクトを作成することもできます。

日付の指定方法は主に3つあります。

• new Date(timestamp) — タイムスタンプを指定
• new Date(string) — 日付文字列を指定
• new Date(year, month, day, hours, minutes, seconds, milliseconds) — 年月日や時分秒などを数値で個別に指定

たとえば、2021年1月1日のDateオブジェクトを作成したい場合は、次のように書けます。

var nextYear = new Date("January 1 2021 12:00");
console.log(nextYear);

このコードは次のような結果を返します。

Fri Jan 01 2021 12:00:00 GMT+0000 (Greenwich Mean Time)

同じ日付は、タイムスタンプや数値を使っても作成できます。

// タイムスタンプで指定する場合
var nextYear = new Date(1609502400000);
console.log(nextYear);

// 数値で指定する場合（月は0始まりのため、1月は「0」を指定することに注意）
var nextYear = new Date(2021, 0, 1, 12, 0, 0, 0);
console.log(nextYear);

いずれの方法でも同じDateオブジェクトが生成されます。なお、数値で月を指定する場合、月は0〜11の範囲で表されるため、1月は「0」、2月は「1」となる点に注意しましょう。初心者がよく陥りやすいミスなので、覚えておくとよいでしょう。

日付の情報を取得するget系メソッド

Dateオブジェクトには、日付に関する特定の情報を取得するためのメソッドが多数組み込まれています。情報を取得するメソッドは、すべて「get」で始まる名前が付けられています。主なメソッドは以下のとおりです。

• 年：getFullYear()
• 月：getMonth()（0〜11の範囲。0が1月）
• 日：getDate()（1〜31の範囲）
• 曜日：getDay()（0〜6の範囲。0が日曜日）
• 時：getHours()（0〜23の範囲。0が午前0時）
• 分：getMinutes()
• 秒：getSeconds()
• ミリ秒：getMilliseconds()
• タイムスタンプ：getTime()

たとえば、今が何時かを知りたい場合は、次のようなコードを実行します。

const currentDate = new Date();
console.log(currentDate.getHours());

このコードは11を返します。これは、現在が1日のうち11時間経過した時点であることを意味します。

これらのメソッドを使えば、面倒な文字列操作を行うことなく、日付から必要な情報だけを簡単に取り出せます。

UTC（協定世界時）で日付を取得する

getと日付の種類の間にUTCを追加すると、UTC（協定世界時）に基づいた値を取得できます（例：getUTCHours()）。デフォルトでは、Dateオブジェクトはユーザーのローカルタイムゾーンに基づいた情報を返します。複数のタイムゾーンのユーザーを扱うアプリケーションを開発する場合は、イベントの発生時刻をUTCで記録しておくのが一般的でおすすめです。

日付を変更するset系メソッド

Dateオブジェクトが持つ日付は、set系メソッドを使って変更できます。get系メソッドに対応する形で、set系メソッドも用意されています。

• 年：setFullYear()
• 月：setMonth()
• 日：setDate()
• 時：setHours()
• 分：setMinutes()
• 秒：setSeconds()
• ミリ秒：setMilliseconds()
• タイムスタンプ：setTime()

※なお、曜日を直接設定するsetDay()というメソッドはJavaScriptには存在しないため注意してください。

たとえば、「去年の今日は何曜日だったのか」を調べたいとします。その場合は、setFullYear()でDateオブジェクトの年を2019年に設定し、getDay()で曜日を取得すればOKです。

const currentDate = new Date();
currentDate.setFullYear(2019);

const daysOfTheWeek = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
const dayLastYear = currentDate.getDay();

console.log('去年の今日は' + daysOfTheWeek[dayLastYear] + 'でした');

このコードを実行すると、「去年の今日は月曜日でした」と出力されます。処理の流れを順番に見ていきましょう。

1. new Date()で現在の日付を取得します。
2. setFullYear()メソッドで、Dateオブジェクトの年を2019年に変更します。
3. 曜日名を格納した配列daysOfTheWeekを宣言します。getDay()が返すのは0〜6の数値なので、この配列を使って数値を曜日名に変換します。
4. getDay()メソッドで2019年の同じ日付の曜日を取得し、メッセージとして出力します。

まとめ

JavaScriptで日付と時刻を扱うには、Dateオブジェクトを使用します。Dateオブジェクトには、現在の時刻に関する情報を取得するget系メソッドと、日付や時刻を操作するset系メソッドが用意されており、これらを組み合わせることで柔軟な日時処理が可能になります。この記事で紹介した内容をマスターすれば、あなたもプロのようにJavaScriptで日付と時刻を扱えるようになるでしょう！