【保存版】JavaScriptで現在の日付と時刻を取得・表示・書式設定する方法

JavaScriptで現在の日付と時刻を取得する方法

new Date() を使う

最も簡単な方法は、new Date() コンストラクタを使うことです。これは、現在の日付と時刻を含む新しい Date オブジェクトを作成します。

const now = new Date();
console.log(now); // 2024-05-23T02:12:00.000Z

このコードは、現在の時刻をコンソールに出力します。出力結果は、ブラウザやシステムの設定によって多少異なる場合があります。

個別のプロパティとメソッドを使う

Date オブジェクトには、年、月、日、時、分、秒などの個別のプロパティとメソッドがあります。これらのプロパティとメソッドを使って、現在の日付と時刻の各要素を個別に取得することができます。

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月は 0 から始まるので、1 を加える
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

console.log(`${year}年${month}月${day}日 ${hour}:${minute}:${second}`); // 2024年5月23日 02:12:00

このコードは、現在の年、月、日、時、分、秒を個別に取得し、それをフォーマットされた文字列としてコンソールに出力します。

書式設定

Date オブジェクトには、日付と時刻を様々な形式で文字列に変換するためのメソッドが用意されています。例えば、toLocaleString() メソッドを使うと、ブラウザのロケール設定に基づいた形式で文字列に変換することができます。

const now = new Date();
const formattedDate = now.toLocaleString();
console.log(formattedDate); // 2024/05/23 02:12:00

このコードは、現在の時刻をブラウザのロケール設定に基づいた形式でコンソールに出力します。

タイムゾーン

Date オブジェクトは、ローカルタイムゾーンの日付と時刻を保持します。もし、別のタイムゾーンの日付と時刻を取得したい場合は、getTimezoneOffset() メソッドと setTimezone() メソッドを使うことができます。

const now = new Date();
const timezoneOffset = now.getTimezoneOffset() / 60; // 分単位のオフセットを取得
console.log(`タイムゾーンオフセット: ${timezoneOffset} 時間`);

// UTC時間で新しい Date オブジェクトを作成
const utcDate = new Date(now.getTime() + timezoneOffset * 60 * 60 * 1000);
console.log(`UTC時間: ${utcDate.toLocaleString()}`);

このコードは、現在のタイムゾーンオフセットと、UTC時間の日付と時刻を出力します。

JavaScriptで現在の日付と時刻を取得するには、様々な方法があります。それぞれの方法の長所と短所を理解し、状況に合わせて適切な方法を選択することが重要です。

new Date() を使う

// 現在の日付と時刻を取得
const now = new Date();
console.log(now); // 2024-05-23T02:13:28.000Z

// 年を取得
const year = now.getFullYear();
console.log(year); // 2024

// 月を取得 (1 から 12)
const month = now.getMonth() + 1;
console.log(month); // 5

// 日を取得
const day = now.getDate();
console.log(day); // 23

// 時を取得
const hour = now.getHours();
console.log(hour); // 2

// 分を取得
const minute = now.getMinutes();
console.log(minute); // 13

// 秒を取得
const second = now.getSeconds();
console.log(second); // 28

// ミリ秒を取得
const milliseconds = now.getMilliseconds();
console.log(milliseconds); // 0

個別のプロパティとメソッドを使う

// 現在の日付と時刻を取得
const now = new Date();

// 年、月、日、時、分、秒を個別に取得
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

// フォーマットされた文字列を作成
const formattedDate = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
console.log(formattedDate); // 2024年5月23日 02:13:28

toLocaleString() メソッドを使う

// 現在の日付と時刻を取得
const now = new Date();

// ブラウザのロケール設定に基づいてフォーマットされた文字列を取得
const formattedDate = now.toLocaleString();
console.log(formattedDate); // 2024/05/23 02:13:28

タイムゾーンを扱う

// 現在の日付と時刻を取得
const now = new Date();

// タイムゾーンオフセットを取得 (分単位)
const timezoneOffset = now.getTimezoneOffset() / 60;
console.log(`タイムゾーンオフセット: ${timezoneOffset} 時間`); // -7 (太平洋夏時間)

// UTC時間で新しい Date オブジェクトを作成
const utcDate = new Date(now.getTime() + timezoneOffset * 60 * 60 * 1000);
console.log(`UTC時間: ${utcDate.toLocaleString()}`); // 2024-05-22T19:13:28.000Z

これらのコードはあくまでも例であり、状況に合わせて様々なバリエーションが考えられます。

• 複雑な日付と時刻の処理には、Moment.js のようなライブラリを使うこともできます。

JavaScriptで現在の日付と時刻を取得するその他の方法

Date.now() メソッドは、現在の日付と時刻をミリ秒単位のタイムスタンプとして返します。

const timestamp = Date.now();
console.log(timestamp); // 1653469608000

このタイムスタンプを使って、新しい Date オブジェクトを作成することができます。

const now = new Date(timestamp);
console.log(now); // 2024-05-23T02:13:28.000Z

Unix エポックタイムは、1970年1月1日0時0分0秒 (UTC) を 0 とした時刻です。現在の日付と時刻を Unix エポックタイムに変換するには、Date.now() メソッドの値を 1000 で割ることができます。

const timestamp = Date.now();
const unixTimestamp = timestamp / 1000;
console.log(unixTimestamp); // 1653469608

const now = new Date(unixTimestamp * 1000);
console.log(now); // 2024-05-23T02:13:28.000Z

パフォーマンスカウンターを使う

ブラウザによっては、パフォーマンスカウンターを使って現在の日付と時刻を取得することができます。この方法は、高精度なタイミングが必要な場合に役立ちます。

if (performance.now) {
  const timestamp = performance.now();
  console.log(timestamp); // 1653469608000
} else {
  console.error('パフォーマンスカウンターがサポートされていません');
}

const now = new Date(timestamp);
console.log(now); // 2024-05-23T02:13:28.000Z

これらの方法は、それぞれ異なる長所と短所があります。状況に合わせて適切な方法を選択することが重要です。