`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)におけるmonthは0が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 で十分ですが、日付計算や表示処理が増えるとコードの可読性や保守性が下がりがちです。
次のような要件がある場合は、dayjs や date-fns などの軽量な日付ライブラリの利用も検討できます。
- タイムゾーンを明示的に扱う必要がある
- 日付計算や期間計算が頻繁に発生する
- 表示フォーマットを柔軟に切り替えたい
- イミュータブルに日時を扱いたい
まとめ
Date オブジェクトは、JavaScript で日時を扱うための基本中の基本です。仕様上のクセを理解し、適切な生成・取得・計算・整形を行うことで、実務でも安全に使えます。
基礎を押さえた上で、必要に応じて日付ライブラリを併用するのが現実的な選択です。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。