`Date` オブジェクト

`Date` オブジェクト

この記事ではDate オブジェクトについて説明します。

Date オブジェクトについて、基本的な仕組みから実務で頻繁に使う操作までを、具体的なサンプルとともに段階的に解説します。

YouTube Video

Date オブジェクト

Dateオブジェクトとは何か

JavaScript の Date オブジェクトは、日付と時刻を扱うための標準オブジェクトです。内部的には「1970年1月1日 00:00:00 UTC からの経過ミリ秒」を元に日時を管理しています。

まずは、現在の日時を表す Date オブジェクトを生成し、その内容を確認してみましょう。

1const now = new Date();
2console.log(now);
  • このコードは、実行した瞬間の現在日時を表す Date オブジェクトを生成します。表示形式はブラウザやOSなど実行環境に依存します。

Date オブジェクトの生成方法

Date オブジェクトは、用途に応じていくつかの方法で生成できます。特にコンストラクタ引数で指定する 月(month)が 0 始まりである点は、実装時に最も間違えやすい重要な仕様です。

1const d1 = new Date();                     // Current date and time
2const d2 = new Date("2025-01-01");         // Create from an ISO date string
3const d3 = new Date(2025, 0, 1);           // January 1, 2025 (month is zero-based)
4const d4 = new Date(2025, 0, 1, 10, 30);   // January 1, 2025, 10:30
5
6console.log(d1, d2, d3, d4);
  • new Date(year, month, day) における month0が1月、11が12月 を意味します。この仕様を理解していないと、意図せず 1 か月ずれた日付を生成してしまうため、常に注意が必要です。

日付・時刻の各要素を取得する

Date オブジェクトからは、年月日や時刻、曜日などを個別に取得できます。取得系メソッドはすべて「数値」を返します。

1const date = new Date();
2
3console.log(date.getFullYear()); // Year
4console.log(date.getMonth());    // Month (0-based: 0 = January)
5console.log(date.getDate());     // Day of the month
6console.log(date.getHours());    // Hours
7console.log(date.getMinutes());  // Minutes
8console.log(date.getSeconds());  // Seconds
9console.log(date.getDay());      // Day of the week (0 = Sunday, 6 = Saturday)
  • getMonth() が 0 始まりである点は、生成時と同様に注意が必要です。表示用に使う場合は、+1 して調整することが一般的です。
  • getDay() は、曜日を 数値で返します。0 が日曜日、6 が土曜日 を表します。

日付・時刻を変更する

Date はミュータブル(変更可能)なオブジェクトであり、後から値を書き換えられます。この性質は便利ですが、意図しない副作用には注意が必要です。

set 系メソッドを使うことで、既存の Date オブジェクトの値を変更できます。

1const date = new Date("2025-01-01");
2
3date.setFullYear(2026);
4date.setMonth(5);   // June
5date.setDate(15);
6
7console.log(date);
  • setMonth() も 0 始まりです。元のオブジェクトが直接変更されます。

日付の加算・減算を行う

日付計算は「ミリ秒」または setDate() を使う方法が一般的です。特に日単位の計算では、setDate() が直感的で安全です。

1const date = new Date("2025-01-01");
2
3date.setDate(date.getDate() + 7);
4console.log(date);
  • この例では、指定した日付から 7 日後を計算しています。月をまたぐ場合も自動的に調整されます。

Date同士を比較する

Date オブジェクトは、数値として比較できます。これは内部で保持している「ミリ秒値」が比較されるためです。

1const a = new Date("2025-01-01");
2const b = new Date("2025-01-10");
3
4console.log(a < b);   // true
5console.log(a > b);   // false
  • 日付の前後関係を判定する場合は、追加の変換は不要です。そのまま比較演算子を使えます。

タイムスタンプ(ミリ秒)を扱う

Date は、ミリ秒単位の数値(タイムスタンプ)と相互に変換できます。API やデータベース連携では、この形式がよく使われます。

1const now = Date.now();
2console.log(now);
3
4const date = new Date(now);
5console.log(date);
  • Date.now() は現在時刻のミリ秒値を返します。数値として保存、比較したい場合に非常に便利です。

日付を文字列として整形する

Date をそのまま表示すると、用途に合わない形式になることが多くあります。そのため、用途に応じて明示的にフォーマットします。

1const date = new Date("2025-01-01");
2
3const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
4console.log(formatted);
  • このように、自前で整形することで表示形式を完全に制御できます。実務ではライブラリを使うケースも多いです。

UTCとローカル時間の違い

Date には「ローカル時間」と「UTC」を扱うメソッドがあります。サーバー連携や国際対応では、この違いを正しく理解することが重要です。

1const date = new Date();
2
3console.log(date.getHours());    // Local time (hours)
4console.log(date.getUTCHours()); // UTC time (hours)
  • getUTC* 系メソッドは、常に UTC 基準の値を返します。タイムゾーンをまたぐ処理では特に注意しましょう。

Dateオブジェクトを使う際の注意点

Date は便利ですが、扱いづらい面もあります。特に月の 0 始まりやミュータブルな性質は、バグの原因になりやすいです。

以下で、Date がミュータブルであることによる影響を、具体例で確認します。

1const original = new Date("2025-01-01");
2const copy = new Date(original);
3
4copy.setDate(10);
5
6console.log(original);
7console.log(copy);
  • 元の日時を保持したい場合は、必ずコピーを作成しましょう。この点を意識するだけで、意図しない不具合を防げます。

Date が扱いづらい理由とライブラリを使う判断基準

Date オブジェクトは標準機能として十分な機能を持っていますが、実務では扱いづらさを感じる場面もあります。代表的な点として、月や曜日が 0 始まりであること、ローカル時間と UTC を混同しやすいこと、そしてミュータブルである点が挙げられます。これらは日付処理が増えるほどバグにつながりやすくなります。

単純な日時取得や比較だけであれば Date で十分ですが、日付計算や表示処理が増えるとコードの可読性や保守性が下がりがちです。

次のような要件がある場合は、dayjsdate-fns などの軽量な日付ライブラリの利用も検討できます。

  • タイムゾーンを明示的に扱う必要がある
  • 日付計算や期間計算が頻繁に発生する
  • 表示フォーマットを柔軟に切り替えたい
  • イミュータブルに日時を扱いたい

まとめ

Date オブジェクトは、JavaScript で日時を扱うための基本中の基本です。仕様上のクセを理解し、適切な生成・取得・計算・整形を行うことで、実務でも安全に使えます。

基礎を押さえた上で、必要に応じて日付ライブラリを併用するのが現実的な選択です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video