JavaScriptでDate型を使って日付や時間を操作しよう

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptでは、日付や時間を扱うためのDate型が用意されています。

Dateを使えば現在時刻の取得はもちろん、任意の日時を設定したり、日付計算を行うことができます。

本記事では、JavaScriptのDate型について初心者向けに解説します。

特にDate型を使った基本的な日時操作から、実務でよく使うテクニックまでを丁寧に説明していきます！

また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

現役のフルスタックWebエンジニアとして活躍中
プログラミングスクールで教材を執筆した経験アリ
副業でプログラミングスクール講師をしている教育のプロ

Dateオブジェクトとは

まず、JavaScriptにおけるDateの正体は「オブジェクト」です。

DateはJavaScriptの組み込みオブジェクトの1つで、主に日付と時刻を操作するために使用されます。

Dateオブジェクトをインスタンス化することで、ある特定の日時を表すオブジェクトを作成できます。

このDateオブジェクトが保持する日時の値は、内部的には「1970年1月1日 0時0分0秒 UTC」を基点とした経過ミリ秒数で管理されています。

Dateオブジェクトには日付や時刻に関する様々なメソッドが用意されており、これらを活用することで日時データを自在に操作できるようになります。

Dateオブジェクトのインスタンス生成

Dateオブジェクトを利用するには、まずnew演算子を使ってインスタンスを生成する必要があります。

基本的な書式は以下の通りです。

let today = new Date();

引数なしでDateをnewすると、現在の日時を表すDateオブジェクトが生成されます。

以下のように記述すれば、現在日時の文字列表現が得られます。

console.log(new Date());
// 実行例（実行日時により変化）
// 2023-04-28T10:00:00.000Z

また、引数の指定方法によっては任意の日時のDateオブジェクトも生成可能です。

// 日時を表す文字列から生成
console.log(new Date("2023-12-04T09:00:00"));
// 2023-12-04T09:00:00.000Z

// 年・月・日などを数値で指定して生成（月は0始まりなので注意）
console.log(new Date(2023, 11, 4, 9, 30, 0));
// 2023-12-04T00:30:00.000Z

ポイントは以下の通りです。

Dateに渡す数値の引数は、年・月は必須項目。それ以外は省略可能。
年は4桁・2桁両方指定できる（2桁指定時は1900年代になるので注意）
月は0〜11の値（1月が0、12月が11に対応）

Dateから日時情報を取得する

生成したDateオブジェクトからは、年や月、時刻などの情報をそれぞれ個別に取り出すことができます。そのためのメソッドが豊富に用意されています。

const date = new Date();

// 年を取得
console.log(date.getFullYear());

// 月を取得（0〜11の値。+1して使う）
console.log(date.getMonth());

// 日を取得
console.log(date.getDate());

// 曜日を取得（0〜6の値。0が日曜日）
console.log(date.getDay());

// 時・分・秒・ミリ秒を取得
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());

これらのメソッドの頭にgetUTCをつければ、その値をUTCのタイムゾーンで取得することもできます（例: date.getUTCHours()）。

Dateから文字列で日時情報を取得する

Dateオブジェクトが持つ日時の値は、文字列の形式で一括取得することもできます。

const date = new Date();

// 日時を文字列で取得
console.log(date.toString());
// Fri Apr 28 2023 19:00:00 GMT+0900 (日本標準時)

// 日付のみ文字列で取得
console.log(date.toDateString());
// Fri Apr 28 2023

// 時刻のみ文字列で取得
console.log(date.toTimeString());
// 19:00:00 GMT+0900 (日本標準時)

// UTCのタイムゾーンで日時文字列取得
console.log(date.toUTCString());
// Fri, 28 Apr 2023 10:00:00 GMT

ローカライズされた文字列で日時情報を取得したい場合は、toLocaleStringメソッドなどを使用します。

const date = new Date();

// ロケール（言語タグ）を指定して日時文字列取得
console.log(date.toLocaleString("ja-JP"));
// 2023/4/28 19:00:00

console.log(date.toLocaleString("en-US"));
// 4/28/2023, 7:00:00 PM

// ロケールのオプションでさらに細かくフォーマット指定可能
const options = {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    weekday: "short"
};
console.log(date.toLocaleString("ja-JP", options));
// 2023/04/28 (金)

Dateで日時計算を行う

Dateを使えば日付や時刻に関する計算を簡単に行えます。例えば現在から50日後、3ヶ月前の日付はいつかといったことが、ごく短いコードで求められます。

const date = new Date();

// 50日後
date.setDate(date.getDate() + 50);
console.log(date);
// 2023-06-17T10:00:00.000Z

// 3ヶ月前
date.setMonth(date.getMonth() - 3);
console.log(date);
// 2023-03-17T10:00:00.000Z

ポイントは、setDateやsetMonthなどのメソッドを使って日付・時刻の値を上書きすることです。

計算は通常の四則演算と同じ要領で行えます。

月末の日付や、うるう年の2月の日数なども自動で調整してくれるので、とても便利ですね。

以下のようなこともできます。

// 月初の日付取得
const date = new Date();
date.setDate(1);
console.log(date);
// 2023-04-01T10:00:00.000Z

// 月末の日付取得
const date2 = new Date();
date2.setMonth(date2.getMonth() + 1);
date2.setDate(0);
console.log(date2);
// 2023-04-30T10:00:00.000Z

ミリ秒での日時表現と計算

Dateオブジェクトが内部的に保持する日時の値は、前述の通り「1970/1/1 0:00:00」からの経過ミリ秒数で表されています。

このミリ秒値を取得・利用することで、日時の比較や日時計算をより簡潔に記述できます。

const date1 = new Date("2023-1-10");
const date2 = new Date("2023-2-15");

// ミリ秒値取得
console.log(date1.getTime());
// 1673308800000

console.log(date2.getTime());
// 1676419200000

// 2つの日付の比較
console.log(date1.getTime() < date2.getTime());
// true（date1はdate2より前）

// 差分日数の計算
const diffDays = (date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24);
console.log(diffDays);
// 36（date1とdate2の差は36日）

さらに以下のような、高度な日時操作も可能です。