JavaScript Dateの使い方を完全解説｜生成から活用まで徹底ガイド

SHARE

この記事ではJavaScriptのDateオブジェクトについて、生成方法、日時の取得・設定、文字列や数値への変換、タイムゾーン対応、比較やフォーマット方法まで体系的に解説します。日付操作での悩みを解決し、実装に役立つ知識が得られます。

目次

JavaScriptのDateオブジェクトとは

javascript+date+object

Dateオブジェクトの概要

JavaScriptにおけるDateオブジェクトは、日付や時刻を扱うための組み込みオブジェクトです。Webアプリケーションやシステム開発において「現在時刻の取得」や「指定した日付の表示」、さらには「2つの日付の差の計算」など、多様な場面で活用されます。
JavaScriptでは、ユーザーインターフェースやサーバーサイド処理を問わず、日付操作を行う上で欠かせない存在であり、標準的な方法として広く利用されています。

主な特徴は以下の通りです。

  • 現在の日時を簡単に取得できる
  • 年・月・日・時刻を個別に操作可能
  • 文字列や数値と柔軟に相互変換ができる
  • 国際的な時間表現（UTCやタイムゾーン）も対応可能

日付と時刻を扱う仕組み

JavaScriptのDateオブジェクトは、内部的には「1970年1月1日00:00:00（UTC）」からの経過時間をミリ秒単位の数値として保持しています。このため、見た目は「2024年5月10日」などの人間が理解できる形式で表示できますが、実際には数値によって管理されているのです。
この仕組みによって、日付の加算・減算や比較、フォーマット変換といった操作を効率的に行うことが可能になります。

例えば以下のようにして現在の日時を取得できます。 

const now = new Date();
console.log(now); // 現在の日付と時刻が出力される

Epoch（基準日時）とタイムスタンプ

JavaScriptの日付を正しく理解するには、Epoch（エポック）という概念が重要です。Epochとは「1970年1月1日00:00:00 UTC」を基準点とした時刻のことを指します。この基準からの経過時間をタイムスタンプと呼び、ミリ秒単位の整数値で表されます。
例えば「2024年1月1日00:00:00 UTC」は、1970年からの経過時間をミリ秒で表した数値として内部的に保持されます。

具体例として、以下のコードで現在時刻をEpochからのミリ秒に変換できます。 

const timestamp = Date.now();
console.log(timestamp); // 例: 1715328000000（ミリ秒の数値）

このタイムスタンプを利用することで、異なる日付同士の経過時間を計算したり、サーバーとの時刻同期を行ったりすることが容易になります。

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

javascript+date+object

new Date() で現在日時を作成する

JavaScriptで日付や時刻を扱う際に最もシンプルな方法が new Date() を使って現在の日時を生成する方法です。引数を与えずにコンストラクタを呼び出すと、その瞬間の日時が設定された Date オブジェクトが作成されます。これはシステムが保持している現在のローカルタイムを基準としており、タイムゾーンも自動的に反映されます。 

const now = new Date();
console.log(now); // 現在の日時が出力される

例えばログ取得やイベント発生時刻の記録など、リアルタイムで現在の日時を取得したい場面で利用されます。そのため、アプリケーション開発における 基本的な活用方法として頻繁に利用されます。

年月日や時刻を指定して生成する

Date オブジェクトは、特定の日付や時刻を指定して生成することも可能です。コンストラクタに引数を与えることで、任意の日時を持つオブジェクトを作成できます。引数の並びは 年, 月(0始まり), 日, 時, 分, 秒, ミリ秒 となっており、最低限「年」と「月」を指定すれば生成可能です。 

const specificDate = new Date(2023, 11, 25, 10, 30);
console.log(specificDate); // 2023年12月25日 10:30 の日時オブジェクト

注意点として、月は0から始まるため、1月は「0」、12月は「11」と指定する必要があります。特定の日付を扱う予定管理やスケジュール機能などで活用されます。

タイムスタンプ（数値）から生成する

UNIXタイムスタンプ（1970年1月1日 0時0分0秒 UTCからの経過ミリ秒）を利用して Date オブジェクトを生成することも可能です。この方法はシステム間で日時データをやりとりする際によく使われます。 

const timestamp = 1700000000000;
const dateFromTimestamp = new Date(timestamp);
console.log(dateFromTimestamp);

これにより、APIレスポンスやデータベースに保存された数値形式の日時を簡単にDateオブジェクトへ変換できます。ミリ秒単位での計算が必要なケースにおいても便利です。

日付文字列から生成する

Date では日付を表す文字列を解析してオブジェクトを生成することができます。例えば "2023-12-25T10:30:00" のようなISO 8601形式の文字列はブラウザ間でも高い互換性を持ちます。一方で、ローカルな形式（例: “2023/12/25″）は環境によって解釈が異なる場合があるため注意が必要です。 

const dateFromString = new Date("2023-12-25T10:30:00");
console.log(dateFromString); // 2023-12-25 10:30:00

文字列から生成する方法は、フォーム入力値や外部APIから受け取った日付情報を処理する際に頻繁に利用されます。

Dateオブジェクトをコピーする

JavaScriptではオブジェクトは参照渡しになるため、単純に代入すると同一の参照が共有されてしまい、意図しないデータ変更が発生することがあります。そのため、Dateオブジェクトをコピーする場合は、新たにインスタンスを生成する必要があります。 

const original = new Date();
const copy = new Date(original.getTime());

console.log(original); // オリジナルの日時
console.log(copy);     // コピーも同じ日時

コピーを作ることで元のオブジェクトには影響を与えず、独立して操作することが可能になります。日付のバージョン管理や差分計算を行う際に便利なテクニックです。

Dateオブジェクトのプロパティとメソッド

javascript+date+datetime

静的メソッド

Date.now() で現在時刻を取得する

Date.now() は、現在の日時を「1970年1月1日00:00:00 UTC」からの経過ミリ秒として返す静的メソッドです。JavaScriptでタイムスタンプを取得する最も手軽な方法であり、処理時間の計測やログ記録などで頻繁に用いられます。 

const timestamp = Date.now();
console.log(timestamp); // 例: 1717465823456

処理の開始時と終了時の Date.now() を比較すれば、簡易的なパフォーマンス測定にも利用できます。

Date.parse() で文字列を日付に変換する

Date.parse() は、日付文字列をミリ秒に変換するためのメソッドです。返り値は、エポック（1970-01-01 00:00:00 UTC）からの経過ミリ秒になります。ISO 8601 形式など標準的なフォーマットであれば確実に解釈されますが、ブラウザや環境によって挙動に違いが出る非標準フォーマットには注意が必要です。 

const ms = Date.parse("2024-06-04T12:00:00Z");
console.log(ms); // 例: 1717502400000

文字列から直接 new Date() を利用する方法もよく用いられますが、数値（ミリ秒）が必要な場合は Date.parse() を活用すると便利です。

Date.UTC() でUTC時間を生成する

Date.UTC() は、指定した年・月・日・時・分・秒を UTC 基準で表すときのミリ秒を返すメソッドです。ローカルタイムの影響を受けないため、国際的に一貫した日付処理を行いたい場合に有効です。 

const utcMilliseconds = Date.UTC(2024, 5, 4, 12, 0, 0);
console.log(utcMilliseconds); // 例: 1717502400000

なお、Date.UTC() の月指定は 0 始まり（1月が0、12月が11）である点に注意が必要です。これは Date コンストラクタと同様のルールです。

インスタンスプロパティ

タイムゾーンやオフセットの取得

Date オブジェクトには、直接タイムゾーン名を返すプロパティは存在しませんが、オフセットを取得するためのメソッドが利用できます。例えば getTimezoneOffset() は、協定世界時（UTC）とローカルタイムの差を「分」で返します。プラス値はローカルタイムがUTCより遅れていることを、マイナス値は進んでいることを意味します。 

const date = new Date();
const offset = date.getTimezoneOffset();
console.log(offset); // 例: -540 （日本標準時はUTC+9時間）

この情報を利用すれば、ユーザー環境に依存しない日時表示や、グローバルサービスにおける時差調整を行う際に役立ちます。また、ES2021以降では Intl.DateTimeFormat().resolvedOptions().timeZone を使用すると、実際のタイムゾーン名（例: “Asia/Tokyo”）を補足的に取得することも可能です。

インスタンスメソッド（取得系）

年・月・日を取得する

日付要素を個別に扱う場合、次のメソッドを利用します。

  • getFullYear() : 西暦年を4桁で取得
  • getMonth() : 月を0～11で取得（注意: 0 = 1月）
  • getDate() : 日を1～31で取得
const d = new Date("2024-06-04");
console.log(d.getFullYear()); // 2024
console.log(d.getMonth());    // 5 （= 6月）
console.log(d.getDate());     // 4

曜日を取得する

getDay() を利用すれば曜日を取得できます。返り値は0（日曜）から6（土曜）までの数値です。アプリケーションによっては、この数値を配列にマッピングして「日」「月」などの表記に変換することが多いです。 

const dayOfWeek = d.getDay();
console.log(dayOfWeek); // 例: 2（火曜日）

時・分・秒・ミリ秒を取得する

時間要素を細かく扱う場合は以下を利用します。

  • getHours(): 時（0～23）
  • getMinutes(): 分（0～59）
  • getSeconds(): 秒（0～59）
  • getMilliseconds(): ミリ秒（0～999）
const now = new Date();
console.log(now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());

UTC基準での取得メソッド

ローカル時間ではなく UTC 時刻を基準に情報を取得する場合、getUTCFullYear() や getUTCHours() など getUTC* 系のメソッドを利用します。これにより、グローバルに統一された基準時刻を扱うことが可能となります。 

console.log(now.getUTCHours()); // UTC基準の時刻を取得

インスタンスメソッド（設定系）

年・月・日を設定する

日時要素は setFullYear()、setMonth()、setDate() で個別に設定可能です。日付が範囲外に設定されると、自動的に繰り上げ・繰り下げが行われます。 

const date2 = new Date();
date2.setFullYear(2025);
date2.setMonth(0); // 1月
date2.setDate(15);
console.log(date2);

時・分・秒・ミリ秒を設定する

時間部分も setHours()、setMinutes()、setSeconds()、setMilliseconds() で自由に設定できます。これにより、スケジュール設定など細かな処理が可能です。 

date2.setHours(10, 30, 0, 0); // 10:30:00.000 に設定
console.log(date2);

UTC基準での設定メソッド

グローバルアプリケーションやサーバーサイドで多用されるのが、UTC基準での設定メソッドです。例えば setUTCFullYear() や setUTCHours() を用いることで、ローカルタイムに依存せず日時を管理できます。 

date2.setUTCFullYear(2030);
date2.setUTCHours(15);
console.log(date2.toUTCString()); // UTC基準の日付を確認

このように、JavaScript の Date オブジェクトはローカル・UTCの両方に対応する豊富なプロパティとメソッドを持ち、柔軟な日付処理を実現します。

Dateオブジェクトのフォーマットと変換

javascript+date+time

文字列への変換メソッド

toString() で文字列形式に変換

JavaScriptの Date オブジェクトをもっとも汎用的な文字列形式に変換する方法が toString() メソッドです。これを利用すると、ブラウザやJavaScriptの実行環境に依存した人間が読みやすい日付文字列を取得できます。特にデバッグ時に確認する用途として便利ですが、フォーマットは環境により異なるため、システム間でのデータやり取りにはあまり適していません。

toISOString() でISO形式に変換

標準化されたフォーマットが必要な場合には、toISOString() を利用します。このメソッドは、UTC基準で YYYY-MM-DDTHH:mm:ss.sssZ というISO 8601形式の文字列を返し、シリアライズやAPIとのやり取りに最適です。そのため、バックエンドとの通信やJSONでの保存時によく使用されます。

toLocaleString() でローカライズされた形式に変換

利用者のロケール（言語や地域設定）に合わせたフォーマットで日付を文字列に変換するには toLocaleString() を使います。例えば日本語環境では「2024/02/15 10:30:00」のように、日本の一般的な表記に基づいた日付文字列として出力されます。さらにオプションを指定することで、年・月・日のみ、時刻のみなど柔軟にフォーマット可能です。ユーザーインターフェースに表示する日付は、このメソッドを使うと自然な形になります。

toDateString(), toTimeString() で日付・時刻のみ出力

日付部分だけ、または時刻部分だけを取り出したい場面では、それぞれ toDateString() と toTimeString() を利用できます。toDateString() は「Mon Feb 15 2024」のように日付のみを文字列化し、toTimeString() は「10:30:00 GMT+0900 (Japan Standard Time)」のように時刻部分を含む文字列を返します。用途ごとに分けて利用すると、不要な情報を省いた分かりやすい出力が可能です。

toJSON() でシリアライズに利用

オブジェクトをJSON形式に変換する際、Date オブジェクトは自動的に toJSON() メソッドが呼ばれます。このメソッドは内部的に toISOString() を利用しているため、標準化されたISO形式で日付を文字列化できます。結果的に、API応答やデータ保存などJSONシリアライズ時に統一された形で日付を扱える利点があります。

数値形式への変換

getTime() と valueOf() でミリ秒取得

日付演算や比較を行いたいとき、Date オブジェクトを数値に変換する必要があります。getTime() メソッドを使うと、Epoch（1970年1月1日00:00:00 UTC）からの経過時間をミリ秒単位で取得できます。valueOf() も同様の結果を返すため、暗黙的な型変換での利用に適しています。これらの数値を使えば、日時の差分計算や並び替えが容易になります。

setTime() で時間を設定

逆に、既存の Date オブジェクトに対して任意の時刻を設定する場合は setTime() を使います。このメソッドは、ミリ秒単位の数値を引数に取り、その値を基にオブジェクトの日付や時刻を更新します。getTime() と対で利用すると、特定の基準日時を簡単に保持・変更できるため、日付操作に柔軟性をもたらします。

Dateオブジェクトの活用方法

javascript+date+object

経過時間を計算する

JavaScriptのDateオブジェクトを扱う上でよく使われる用途の一つが「経過時間の計算」です。開始時刻と終了時刻の差を算出することで、処理時間やユーザーの利用時間を計測できます。例えば、ウェブアプリにおけるログイン時間の追跡や、処理のベンチマーク計測などに活用できます。

経過時間を求める際には、getTime()メソッドを用いて両方のDateオブジェクトをミリ秒単位の数値に変換し、その差分を算出します。以下はその例です。 

// 開始時刻を取得
const start = new Date();

// 何らかの処理（例: ループ）
for (let i = 0; i < 1000000; i++) {
  // ダミー処理
}

// 終了時刻を取得
const end = new Date();

// 経過時間（ミリ秒）を計算
const elapsed = end.getTime() - start.getTime();

console.log(`処理にかかった時間: ${elapsed}ミリ秒`);

上記のコードでは、処理開始時と終了時のDateオブジェクトを生成し、それぞれをミリ秒に変換して差分を計算しています。これにより、処理時間を容易に可視化できます。

  • ミリ秒 → 秒 に変換: elapsed / 1000
  • ミリ秒 → 分 に変換: elapsed / 1000 / 60
  • より詳細な形式: 経過時間を分・秒・ミリ秒ごとに整形して表示する

このようにして算出した値は、パフォーマンス改善やユーザーエクスペリエンスを高めるための指標として活用できます。特に、処理の最適化やユーザーアクションのログ解析においては、JavaScript Dateの精度と利便性が大きな強みとなります。

実際のユースケース

javascript+date+timestamp

ログや監査での日付管理

システム開発において、ログや監査ログに残す日付情報は非常に重要です。特にセキュリティや障害対応の観点から、いつ何が起こったのかを正確に追跡できることが求められます。JavaScriptの Date オブジェクトを活用することで、ミリ秒精度でのタイムスタンプを簡単に生成でき、監査証跡として利用できます。

  • エラーログに現在時刻を記録して、問題発生のタイミングを明確化
  • ユーザーの操作履歴を日付とともに保存し、不正利用を検出
  • APIのアクセスログにタイムスタンプを付与してリクエストの追跡を容易に

特に Date.now() で取得したUNIXタイムスタンプをログに保存すると、タイムゾーンに左右されず統一的に扱えるため、サーバー環境が複数に分散している場合にも解析が簡単になります。

ユーザーインターフェースでの日付表示と入力

Webアプリケーションでは、ユーザーに日付を表示したり、逆に日付を入力してもらうUIを提供する場面が多くあります。例えばカレンダー表示や日付ピッカーと呼ばれる入力フィールドは定番です。JavaScriptの Date オブジェクトを利用すれば、取得した日時をローカライズして表示したり、日付計算を行ってカレンダーを生成することが可能です。

  • toLocaleDateString() を用いて利用者の言語や地域に合わせた日付表示
  • フォーム入力値を new Date() で変換し、データベース用の形式に整形
  • カレンダーUIコンポーネントと連携し、スケジュール選択を実現

特に国際的に利用されるサービスでは、アメリカ式の MM/DD/YYYY と日本やヨーロッパで一般的な YYYY/MM/DD の違いを意識する必要があり、JavaScriptのローカライズ機能が大きな助けになります。

スケジュールや予約システムでの活用

スケジュール管理や予約システムでは、日付や時刻の正確な取り扱いが中心的な役割を担います。例えば、カレンダー上にイベントを配置したり、予約の重複を防いだりするために、 Date オブジェクトを用いた比較や加算・減算が不可欠です。

  • 予約可能な時間帯を計算し、ユーザーが選択できるように動的に生成
  • イベント開始時刻と終了時刻を比較して、予定の重複をチェック
  • 定期的なスケジュール（例：毎週月曜10時）を繰り返し生成

また、タイムゾーンの違いはスケジュール管理の難しいポイントです。国際的なビジネスでは、現地のタイムゾーンに合わせて予定を表示する必要があります。JavaScriptの Date をUTC基準で処理しつつ、表示時にローカル時刻へ変換することで、ユーザーにとって自然な形で予定を扱うことができます。

よくあるエラーや注意点

javascript+date+guide

西暦2桁の扱いに関する問題

JavaScriptのDateオブジェクトで日付文字列を解析する場合、西暦を2桁で指定すると期待通りの結果にならないことがあります。例えば「new Date("01/01/20")」のような形式を使うと、「2020年」ではなく「1920年」と解釈されることがあります。これは仕様やブラウザの実装に依存するため、特に古い形式の日付データを扱う際には注意が必要です。

このような誤解釈を避けるためには、必ず西暦を4桁で指定することを推奨します。例えば「new Date("2020-01-01")」のように明示的に指定することで、思わぬエラーを防ぐことができます。

  • 2桁の西暦は避け、常に4桁で記載する
  • ISO 8601形式（YYYY-MM-DD）での指定がもっとも安全
  • 異なるブラウザや環境での挙動を必ず確認する

月のインデックスが0始まりな点

JavaScriptのDateオブジェクトでは、月のインデックスが0から始まるという点も、開発者がつまずきやすいポイントです。たとえば「1月」を指定する場合は0を、「12月」を指定する場合は11を設定する必要があります。これはプログラミングにおける配列のインデックスに似た仕様ですが、直感的ではないためミスにつながりやすいです。

例えば「new Date(2024, 1, 1)」は「2024年2月1日」を表します。これは「月=1」が「2月」を意味するためで、誤って「1月1日」と勘違いしてしまうケースが多く見受けられます。

  • 月を指定する際は 0=1月、11=12月 であることを意識する
  • ユーザー入力や外部データを扱う場合には、-1や+1の補正処理を組み込むと安全
  • 月の扱いをわかりやすくするため、ライブラリ利用も検討可能

ブラウザや環境による差異

Dateオブジェクトは便利な反面、ブラウザや実行環境（例えばNode.jsとブラウザ）によって挙動が異なる場合があります。特に日付文字列をパースする際、どの書式を正しく解釈できるかは環境依存です。そのため、ある環境では正しく動作しても、他の環境ではInvalid Dateとなることがあります。

また、OSやランタイムのロケール設定、タイムゾーンの違いによっても結果がズレるケースがあるため、グローバルに利用されるシステムを開発する際には十分な検証が必要です。

  • 日付文字列はISO 8601形式を用いると環境依存のリスクが減少
  • 異なるブラウザやNode.jsで一貫した挙動を得るための単体テストを実施する
  • タイムゾーンやロケールの違いに敏感な処理には、標準のDateのみではなく補助ライブラリも活用する

Date操作を補助するライブラリ

javascript+date+library

moment.js

JavaScriptの標準的なDateオブジェクトは強力ですが、フォーマットや複雑な日付計算を行う際には冗長なコードが必要になるケースがあります。その課題を解決する代表的なライブラリが moment.js です。
moment.jsは豊富なAPIを提供しており、日付の生成・解析・操作・表示を一貫してシンプルに記述できる点が魅力です。

  • 直感的な構文：moment()で現在日時を作成し、add()やsubtract()で簡単に加算・減算が可能です。
  • 多彩なフォーマット機能：format()を使い、任意のパターンで日付文字列を整形できます。
  • ロケール対応：日本語を含む多言語フォーマットに対応しており、UI表示で便利です。
  • タイムゾーン管理：Moment Timezoneの拡張を利用することで、世界各地の時差を考慮した時間を扱えます。

ただし、moment.jsは比較的「重量級」なライブラリであり、現在は積極的な開発が終了しています。そのため、新規プロジェクトでは軽量な代替ライブラリを検討する方が推奨されています。しかし既存のシステムやレガシープロジェクトでは、依然として高い利用価値があります。

まとめ

javascript+date+object

JavaScriptのDateオブジェクトは、日付や時刻を扱うための非常に重要な機能であり、Webアプリケーションやシステム開発において欠かせない存在です。現在時刻の取得から日付の計算、フォーマット変換、タイムゾーンへの対応まで、幅広いシーンで活用できます。その反面、月が0始まりである点やブラウザ間の挙動の差異など、注意すべきポイントも存在します。

本記事では、Dateオブジェクトの基本的な仕組みから、生成方法、メソッドやプロパティの使い方、フォーマットや変換方法、実際の利用シーンや注意点、さらには便利なライブラリまで幅広く解説しました。これらを活用することで、JavaScriptにおける日付処理をより効率的かつ確実に行うことができます。

最後にまとめると、JavaScriptで日付や時間を確実に扱いたい場合には以下の点を意識すると良いでしょう。

  • Dateオブジェクトの内部構造と基準（Epochやタイムスタンプ）を理解する
  • 状況に応じた生成方法やメソッドを適切に選択する
  • 日付フォーマットや国際化対応を意識して扱う
  • 複雑な処理や高度な日付操作が必要な場合には外部ライブラリの導入を検討する

これらを踏まえてDateオブジェクトを使いこなせば、堅牢でユーザーフレンドリーな時間管理機能を実装できます。今後の開発において、ぜひ本記事の内容を活用してみてください。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

JavaScript for文の基本から活用法まで徹底解説【初…

次の記事

JavaScript filterメソッド徹底解説｜使い方と実…