概要: JavaScriptで日付を扱う際に必須となるDateオブジェクト。本記事では、Dateオブジェクトの基本から、文字列への書式設定、日付の比較・加算、タイムゾーンの考慮、そして曜日や時間の取得方法まで、網羅的に解説します。JavaScriptでの日付操作の疑問を解決しましょう。
JavaScriptでWebアプリケーションを開発する際、日付や時刻の扱いは避けて通れない要素です。イベントのスケジュール管理、ユーザーの操作ログ記録、データのタイムスタンプ表示など、さまざまな場面で日付操作が必要になります。そんな時に活躍するのが、JavaScriptに標準で備わっている Date オブジェクトです。
この記事では、JavaScriptのDateオブジェクトを徹底的に使いこなすための知識を、基礎から応用までわかりやすく解説します。書式設定の方法から、日付の比較、加算・減算、さらにはタイムゾーンの考慮や曜日の取得方法まで、実践的なテクニックを網羅しています。これを読めば、あなたのJavaScript開発における日付・時刻処理が、より正確で効率的になるはずです！
JavaScript Dateオブジェクトの基本と now()メソッド
Dateオブジェクトの役割と内部構造
Dateオブジェクトは、JavaScriptに標準で用意されている組み込みオブジェクトの一つです。特定の日付や時刻を表すオブジェクトを作成し、それらを操作するための豊富なメソッドを提供します。これにより、開発者は日付に関する複雑なロジックを比較的容易に実装できるようになります。
Dateオブジェクトが内部で時刻を管理する方法は非常に特徴的です。それは、協定世界時 (UTC) の1970年1月1日午前0時0分0秒（エポック）からの経過ミリ秒数という、単一の数値として表現されます。このミリ秒単位のタイムスタンプが、Dateオブジェクトの比較や計算の基礎となっています。
この内部構造を理解することで、なぜ日付の比較が数値として行われるのか、なぜタイムゾーンの概念が重要になるのかが明確になります。ちなみに、JavaScriptのDateオブジェクトは将来的に「レガシー機能」と見なされる可能性があり、よりモダンで高機能な Temporal APIの利用が検討されていますが、現在のところはDateオブジェクトが主流です。（参考情報より）
インスタンス作成の様々な方法
Dateオブジェクトを使い始めるには、まずインスタンスを作成する必要があります。最も一般的な方法は、引数なしでコンストラクタを呼び出すことで、現在の日付と時刻を取得することです。
const now = new Date(); // 現在の日時を取得他にも、特定の過去や未来の日時を指定してDateオブジェクトを作成する方法がいくつかあります。まず、エポックからの経過ミリ秒数を直接指定する方法です。これは、すでにミリ秒単位のタイムスタンプを持っている場合に便利です。
const dateFromMs = new Date(1678886400000); // 2023年3月15日 00:00:00 UTC を表す次に、日時を表す文字列から作成する方法です。例えば、ISO 8601形式の文字列を使用すると、特定のタイムゾーンを考慮した日時を作成できます。ただし、文字列の書式には注意が必要で、ブラウザや環境によって解釈が異なる場合があります。
const dateFromString = new Date("2023-10-27T10:30:00"); // 2023年10月27日 10時30分最後に、年、月、日、時などを個別の数値で指定する方法です。ここで重要なのは、monthIndex（月）が0から始まるという点です。つまり、1月は0、12月は11と指定します。
const specificDate = new Date(2023, 9, 27, 10, 30, 0); // 2023年10月27日 10時30分0秒 (月は9なので10月)これらの作成方法を理解することで、要件に応じたDateオブジェクトの柔軟な生成が可能になります。（参考情報より）
現在日時取得とnow()メソッドの活用
現在の日時を取得する際には、前述のnew Date()が直感的で一般的です。これは、現在時刻に基づいた新しいDateオブジェクトのインスタンスを生成します。しかし、Dateオブジェクトをインスタンス化せずに、現在時刻のミリ秒数を直接取得したい場合があります。そこで活躍するのが、Date.now() メソッドです。
const currentTimestamp = Date.now(); // エポックからの経過ミリ秒数を数値で取得Date.now()は、new Date().getTime()とほぼ同等の値を返しますが、Dateオブジェクトを生成するオーバーヘッドがないため、よりパフォーマンスが求められる場面で特に有用です。例えば、処理時間を計測するタイマーを実装する際などに使われます。
const startTime = Date.now();
// 何らかの重い処理...
const endTime = Date.now();
const elapsedTime = endTime - startTime; // 処理にかかったミリ秒数
console.log(`処理時間: ${elapsedTime}ms`);このように、Date.now()は、特定の時点間の経過時間を計算したり、ユニークなタイムスタンプを生成したりする際に非常に便利なメソッドです。Dateオブジェクトが内部的にミリ秒で管理されているという基本原理を理解していれば、このメソッドの価値を最大限に引き出すことができるでしょう。（参考情報より）
Dateオブジェクトの書式設定：文字列への変換方法
個別メソッドによる書式化の基本
Dateオブジェクトから年、月、日、時、分、秒などの個別の要素を取得するには、専用のメソッドが用意されています。これらのメソッドを組み合わせることで、任意の書式の日付文字列を自分で組み立てることが可能です。
getFullYear(): 4桁の年getMonth(): 月 (0〜11で表現されるため、表示には+1が必要です)getDate(): 日 (1〜31)getDay(): 曜日 (0〜6で、0が日曜日、1が月曜日…6が土曜日)getHours(): 時 (0〜23)getMinutes(): 分 (0〜59)getSeconds(): 秒 (0〜59)getMilliseconds(): ミリ秒 (0〜999)
これらのメソッドは、現在実行されている環境のローカルタイムゾーンに基づいて値を返します。特にgetMonth()とgetDay()は数値がそのまま日付や曜日を表さないため、表示する際には注意が必要です。例えば、「0」が1月や日曜日を意味することを知っておく必要があります。（参考情報より）
自分で書式を組み立てることで、ウェブサイトの表示要件やAPIのデータ形式など、多様なニーズに対応できる柔軟性が得られます。
特定フォーマットへの整形例
取得した年や月、日などの値を組み合わせて、特定のフォーマットで表示する具体的な例を見てみましょう。例えば、「YYYY年MM月DD日 (曜日)」のような形式で表示したい場合です。
まず、各要素を取得します。特に月や日が一桁の場合に「0」を付けて二桁表示にするテクニックは頻繁に利用されます。これは('0' + value).slice(-2)のように記述することで実現できます。
const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2); // 月は0から始まるため+1し、2桁表示に
const day = ('0' + today.getDate()).slice(-2); // 2桁表示に
const dayOfWeekNum = today.getDay(); // 曜日の数値を取得 (0:日, 1:月...)
const dayNames = ["日", "月", "火", "水", "木", "金", "土"];
const dayOfWeek = dayNames[dayOfWeekNum]; // 数値に対応する曜日の名前を取得
const formattedDate = `${year}年${month}月${day}日 (${dayOfWeek})`;
console.log(formattedDate); // 例: "2023年10月27日 (金)"このコード例では、getMonth()で取得した値に1を加えてから、文字列に変換して先頭に’0’を結合し、slice(-2)で末尾2文字を抽出しています。これにより、例えば「3月」が「03」と表示されるようになります。同様に、曜日も数値と配列をマッピングすることで、見やすい文字列に変換しています。
このような手法を用いることで、日付の表示形式を完全に制御し、ユーザーフレンドリーな形で情報を提供することが可能です。（参考情報より）
Intl.DateTimeFormatによる高度な書式設定
個別メソッドを組み合わせて書式を整形する方法は柔軟ですが、多言語対応や複雑なローカライズが必要な場合には、より強力なIntl.DateTimeFormatオブジェクトの利用が推奨されます。
Intl.DateTimeFormatは、国際化APIの一部として提供されており、ユーザーのロケール（地域や言語設定）に基づいた日付・時刻の書式設定を簡単に行うことができます。これにより、開発者が手動で書式を調整する手間を大幅に削減できます。
const today = new Date();
// 日本語ロケールで、曜日、年、月、日を表示
const formatterJP = new Intl.DateTimeFormat('ja-JP', {
weekday: 'long', // 'long'で「金曜日」のように表示
year: 'numeric',
month: 'long', // 'long'で「10月」のように表示
day: 'numeric'
});
console.log(formatterJP.format(today)); // 例: "2023年10月27日金曜日"
// アメリカ英語ロケールで、短縮形の日付と時刻を表示
const formatterUS = new Intl.DateTimeFormat('en-US', {
dateStyle: 'short', // 10/27/23 のように表示
timeStyle: 'short' // 5:30 PM のように表示
});
console.log(formatterUS.format(today)); // 例: "10/27/23, 5:30 PM" (表示は実行環境による)上記の例のように、第一引数でロケールを指定し、第二引数で表示オプション（年、月、日、曜日、時、分、秒などの表示形式）をオブジェクト形式で渡すことで、多様な表現が可能です。これにより、グローバルなアプリケーション開発において、地域ごとの日付表示規則に容易に対応できるようになります。（参考情報より）
Dateオブジェクトの比較と加算・減算
Dateオブジェクトの比較方法
JavaScriptのDateオブジェクトは、比較演算子 (“, `=`) を使用して直接比較することができます。これは、Dateオブジェクトが内部的にエポックからの経過ミリ秒数という単一の数値を保持しているためです。この数値に基づいて、どちらの日時がより古いか、新しいかが判断されます。
const date1 = new Date('2023-10-27T10:00:00');
const date2 = new Date('2023-10-28T10:00:00');
const date3 = new Date('2023-10-27T10:00:00');
console.log(date1 date2); // false
console.log(date1 <= date3); // true (date1 と date3 は同じ日時)ただし、厳密な等価演算子 (`===`) を使用して2つのDateオブジェクトを比較する場合は注意が必要です。===は、2つのオブジェクトがメモリ上で同じインスタンスを参照している場合にのみtrueを返します。つまり、同じ日時を表していても、それぞれnew Date()で作成された別々のインスタンスであればfalseとなります。
したがって、2つのDateオブジェクトが同じ日時を表すかどうかを比較したい場合は、getTime()メソッドを使用してそれぞれのミリ秒値を取得し、それを比較するのが最も確実な方法です。
console.log(date1 === date3); // false (インスタンスが異なるため)
console.log(date1.getTime() === date3.getTime()); // true (ミリ秒値が同じため)この違いを理解することが、日付比較における誤解を防ぐ鍵となります。（参考情報より）
日付・時刻の加算と減算ロジック
Dateオブジェクトには、直接的に日付や時刻を加算・減算するメソッドは提供されていません。しかし、既存のDateオブジェクトの各要素（年、月、日、時など）を取得し、setメソッド（例: setDate(), setHours()など）を使って新しい値を設定することで、日付の加算・減算を実現できます。
例えば、現在の日付からN日後を計算したい場合、以下のようにsetDate()メソッドを使用します。このメソッドは、指定された日付が月の範囲を超えた場合でも、自動的に月や年を調整してくれるため便利です。
const today = new Date();
console.log(`今日: ${today}`); // 例: Fri Oct 27 2023 ...
// 7日後を計算
const sevenDaysLater = new Date(today); // 元のオブジェクトを直接変更しないよう複製
sevenDaysLater.setDate(today.getDate() + 7);
console.log(`7日後: ${sevenDaysLater}`); // 例: Fri Nov 03 2023 ...
// 3日前を計算
const threeDaysAgo = new Date(today);
threeDaysAgo.setDate(today.getDate() - 3);
console.log(`3日前: ${threeDaysAgo}`); // 例: Tue Oct 24 2023 ...同様に、setHours(), setMinutes(), setSeconds()などを利用して、時間単位の加算・減算も行えます。例えば、現在時刻から2時間後を計算するには、setHours(today.getHours() + 2)のように記述します。
もう一つの方法は、getTime()メソッドで取得したミリ秒値に対して直接加減算を行うことです。例えば、1日分のミリ秒数を加えることで1日後を計算できます。
const oneDayInMs = 24 * 60 * 60 * 1000; // 1日のミリ秒数
const nextDay = new Date(today.getTime() + oneDayInMs);
console.log(`ミリ秒で計算した明日: ${nextDay}`);このアプローチは、特に大きな期間の計算や、異なる単位（日と時間など）を組み合わせた複雑な計算に適しています。
経過時間や期間の計算
2つのDateオブジェクト間の差を計算することで、経過時間や期間を求めることができます。この計算の基礎となるのは、やはりgetTime()メソッドで取得できるミリ秒単位のタイムスタンプです。
2つの日付の差分は、単にミリ秒値を引き算するだけで得られます。その結果を適切な単位で割ることで、秒、分、時間、または日数に変換できます。
const startDate = new Date('2023-10-01T10:00:00');
const endDate = new Date('2023-10-27T15:30:00');
const diffMs = endDate.getTime() - startDate.getTime(); // 差分をミリ秒で取得
const diffSeconds = Math.floor(diffMs / 1000); // 秒に変換
const diffMinutes = Math.floor(diffMs / (1000 * 60)); // 分に変換
const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); // 時間に変換
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // 日数に変換
console.log(`経過ミリ秒: ${diffMs}`);
console.log(`経過日数: ${diffDays}日`); // 例: 26日
console.log(`経過時間: ${diffHours}時間`); // 例: 630時間
この計算ロジックは、例えば「あるイベントが開始してから何日経過したか」や、「ユーザーが登録してから何時間経ったか」といった、特定の期間を計測する場面で非常に役立ちます。ただし、夏時間（DST）の切り替わりなど、タイムゾーンの影響を受ける日数を計算する際には注意が必要です。
より複雑な期間計算（例えば、月や年単位の差）には、上記のような単純な引き算では不十分な場合があるため、ライブラリの利用も検討すると良いでしょう。（参考情報より）
タイムゾーンを考慮した日付操作
ローカルタイムとUTCの理解
Dateオブジェクトの内部では、時刻は協定世界時 (UTC) のミリ秒数で管理されています。しかし、getFullYear()やgetHours()といった多くの「get」メソッドは、実行されている環境のローカルタイムゾーンに基づいて結果を返します。
このローカルタイムゾーンへの変換があるため、同じUTC時刻を表すDateオブジェクトでも、東京のPCとニューヨークのPCでは表示される「時」や「日」が異なる場合があります。例えば、UTCで2023年10月27日午前0時を示すDateオブジェクトは、東京（JST, UTC+9）では2023年10月27日午前9時として表示され、ニューヨーク（EDT, UTC-4）では2023年10月26日午後8時として表示されることになります。
このローカルタイムとUTCの概念を理解することは、特に国際的なアプリケーションを開発する上で非常に重要です。ユーザーがどの地域にいても、日付や時刻を正しく表示し、一貫性のあるデータ処理を行うためには、このタイムゾーンの違いを意識した操作が不可欠となります。（参考情報より）
UTCメソッドの利用シーン
ローカルタイムゾーンの影響を受けずに、常にUTCでの日付と時刻を取得したい場合、DateオブジェクトにはUTCに対応したメソッドが用意されています。これらはメソッド名の前に「getUTC」が付きます。
getUTCFullYear()getUTCMonth()getUTCDate()getUTCDay()getUTCHours()getUTCMinutes()getUTCSeconds()getUTCMilliseconds()
これらのメソッドは、ローカルタイムゾーンの影響を一切受けず、常にUTCでの日付や時刻の要素を返します。例えば、データベースに保存するタイムスタンプや、異なるタイムゾーンのユーザー間でイベント時刻を共有するような場面で非常に有用です。
const date = new Date('2023-10-27T10:30:00Z'); // 末尾のZはUTCであることを示す
console.log(`ローカル時間: ${date.getHours()}時`); // 環境のタイムゾーンによる
console.log(`UTC時間: ${date.getUTCHours()}時`); // 常にUTCの10時を返すサーバーサイドで時刻を管理する場合、データベースには常にUTCで保存し、クライアント側でDateオブジェクトのローカルメソッドやIntl.DateTimeFormatを使ってユーザーのタイムゾーンに合わせて表示するのが一般的なプラクティスです。これにより、データの整合性を保ちつつ、ユーザーにとって最適な表示を提供できます。（参考情報より）
タイムゾーン問題を避けるための考慮点
タイムゾーンが絡む日付操作は非常に複雑になりがちです。問題を避けるためには、いくつかのベストプラクティスを覚えておくことが重要です。
まず、日付や時刻データを保存したり、API経由でやり取りしたりする際には、一貫してUTC形式を使用することを強く推奨します。特に、ISO 8601形式の文字列（例: "2023-10-27T10:30:00Z"）は、タイムゾーン情報が明示的に含まれるため、非常に安全です。DateオブジェクトのtoISOString()メソッドを利用すると、簡単にこの形式の文字列を取得できます。
const now = new Date();
console.log(now.toISOString()); // 例: "2023-10-27T01:30:00.000Z" (UTCで表現)また、new Date(dateString)で日付文字列からDateオブジェクトを作成する際、タイムゾーン情報を含まない文字列（例: "2023-10-27"）は、ブラウザや環境によってUTCとして解釈されたり、ローカルタイムゾーンとして解釈されたりする可能性があります。これにより予期せぬ日付のずれが発生することがあるため、可能な限り明確なタイムゾーン指定を含んだ文字列を使用しましょう。
複雑なタイムゾーン変換や夏時間（DST）の考慮が必要な場合は、自前で実装するよりも、Moment.jsやdate-fnsといった日付ライブラリの利用を検討することも賢明です。これらのライブラリは、タイムゾーンに関する複雑な問題を抽象化し、より安全で簡潔なコードを提供してくれます。
タイムゾーンの問題は、一度誤るとデバッグが非常に困難になるため、開発の初期段階から意識して取り組むことが大切です。（参考情報より）
曜日や時間を取得する便利なメソッド
曜日 (getDay()) の取得と活用
Dateオブジェクトから曜日を取得するには、getDay()メソッドを使用します。このメソッドは、ローカルタイムゾーンに基づいた曜日を数値で返します。返される数値と曜日の対応は以下の通りです。
| 数値 | 曜日 |
|---|---|
| 0 | 日曜日 |
| 1 | 月曜日 |
| 2 | 火曜日 |
| 3 | 水曜日 |
| 4 | 木曜日 |
| 5 | 金曜日 |
| 6 | 土曜日 |
この数値はそのままでは読みにくいため、通常は曜日の名前を格納した配列と組み合わせて使用します。これにより、ユーザーにとってわかりやすい形で曜日を表示できます。
const today = new Date();
const dayOfWeekNum = today.getDay(); // 今日の曜日の数値を取得
const dayNames = ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"];
const dayOfWeek = dayNames[dayOfWeekNum];
console.log(`今日は ${dayOfWeek} です。`); // 例: 「今日は金曜日です。」getDay()メソッドは、ウェブサイト上で特定曜日の情報を表示したり、営業日や休業日の判定を行ったりする際に非常に重宝します。例えば、週末は特別なメッセージを表示するといったロジックに活用できます。（参考情報より）
時間、分、秒の取得と利用
日付だけでなく、正確な時刻情報（時、分、秒、ミリ秒）もDateオブジェクトから個別に取得できます。これらは、デジタル時計の表示や、特定の時間帯に応じた処理を行う際に不可欠なメソッドです。
getHours(): 時 (0〜23)getMinutes(): 分 (0〜59)getSeconds(): 秒 (0〜59)getMilliseconds(): ミリ秒 (0〜999)
これらのメソッドも、ローカルタイムゾーンに基づいて値を返します。例えば、「HH:mm:ss」のような形式で時刻を表示したい場合、各値を2桁表示に整形するテクニックを適用できます。
const now = new Date();
const hours = ('0' + now.getHours()).slice(-2);
const minutes = ('0' + now.getMinutes()).slice(-2);
const seconds = ('0' + now.getSeconds()).slice(-2);
console.log(`現在の時刻: ${hours}:${minutes}:${seconds}`); // 例: 「現在の時刻: 15:30:45」この機能は、リアルタイムで更新される時計ウィジェットや、特定の時間帯（例: 午前9時から午後5時まで）のみ利用可能なサービスを提供するといった時間ベースのロジックを実装する際に役立ちます。また、ログ記録やイベントトリガーなど、正確な時刻情報が必要なバックエンド処理にも利用されます。（参考情報より）
その他の便利な取得メソッドと注意点
上記以外にも、Dateオブジェクトには様々な便利なメソッドが用意されています。これらを活用することで、より高度な日付・時刻操作が可能になります。
getTime(): エポック（1970年1月1日00:00:00 UTC）からの経過ミリ秒数を返します。日付の比較や、他のシステムとの連携でミリ秒単位のタイムスタンプが必要な場合に非常に重要です。（参考情報より）getTimezoneOffset(): ローカルタイムゾーンとUTCの差を分単位で返します（常に負の値か0）。これにより、ローカルタイムゾーンがUTCからどれだけずれているかを知ることができます。toDateString(),toTimeString(),toLocaleString(),toISOString()など:Dateオブジェクトを様々な形式の文字列に変換するメソッド群です。特にtoISOString()は、タイムゾーン情報を含むISO 8601形式のUTC時刻文字列を返し、データ保存やAPI連携で重宝します。
注意点として、getMonth()は0始まりであること、getDay()は0が日曜日であることを常に意識しておく必要があります。これらのメソッドは直感的ではないため、値を表示する際には必ず+1したり、配列でマッピングしたりする処理を忘れないようにしましょう。
また、2桁の年指定（例: new Date(99, 5, 24)）は、1900年代と解釈される（1999年になる）ため、現代のアプリケーションでは4桁で年を指定することを推奨します。古い日付を扱う場合を除き、意図しない年になることを避けるために常に4桁で指定するようにしましょう。（参考情報より）
これらのメソッドを適切に組み合わせることで、JavaScriptでの日付・時刻操作は格段に効率的になり、より洗練されたアプリケーション開発が可能になります。
JavaScriptのDateオブジェクトは、そのシンプルさゆえに奥が深く、タイムゾーンの概念など複雑な側面も持ち合わせています。しかし、この記事で解説した基本的な使い方から書式設定、比較、加算・減算、そして曜日や時間の取得方法までをマスターすれば、あなたのJavaScript開発における日付・時刻処理は飛躍的に向上するはずです。
将来的に導入が検討されているTemporal APIにも注目しつつ、まずは現在のDateオブジェクトを使いこなし、ユーザーフレンドリーで正確な日付・時刻機能をあなたのアプリケーションに実装していきましょう。この知識が、あなたの開発の一助となれば幸いです！
まとめ
よくある質問
Q: JavaScriptで現在の日時を取得するにはどうすればいいですか？
A: new Date() または new Date().now() で現在の日時を表すDateオブジェクトを取得できます。
Q: Dateオブジェクトを分かりやすい文字列形式に変換するには？
A: DateオブジェクトのtoString()、toDateString()、toTimeString()、toISOString()などのメソッドを利用することで、様々な書式で文字列に変換できます。
Q: JavaScriptで2つの日付を比較するにはどうすればいいですか？
A: DateオブジェクトのgetTime()メソッドで取得できるミリ秒単位の数値を比較することで、日付の大小を判定できます。
Q: Dateオブジェクトで日付の加算や減算はできますか？
A: Dateオブジェクト自体に直接加算・減算するメソッドはありませんが、getDate()などで日数を取得し、数値を加減した後に、setMonth()やsetDate()などのメソッドで再設定することで実現できます。
Q: Dateオブジェクトで曜日を取得するにはどうしますか？
A: getDay()メソッドを使用します。このメソッドは、日曜日を0、月曜日を1、…、土曜日を6として数値で返します。必要に応じて、曜日配列などと組み合わせて文字列に変換します。
