JavaScriptの日付

JavaScript Date オブジェクト詳解：日付と時間操作を簡単にマスター

この記事では、JavaScript の Date オブジェクトについて、その作成、日付/時間の取得と設定、フォーマット出力、タイムゾーン処理などの実用的なテクニックを網羅して解説します。これを読めば、Web 開発における日付と時間の処理に必要な知識を身につけることができます。

1. Date オブジェクトの概要

定義: Date オブジェクトは、JavaScript における単一の時間点を表すために使用されます。

作成: new Date() コンストラクタを使用して Date オブジェクトを作成する方法を説明します。

パラメータなし: 現在の⽇付と時間を取得します。
日付文字列を渡す: 文字列を解析して、指定された日付と時間を作成します。
年、月、日などのパラメータを渡す: 日付と時間を正確に設定します。


<script>
// 現在の⽇付と時間
const now = new Date();
console.log(now); 

// ⽇付文字列から作成
const dateString = new Date('2023-12-25T08:00:00');
console.log(dateString);

// 年、月、⽇などから作成
const specificDate = new Date(2023, 11, 25, 8, 0, 0); 
console.log(specificDate);
</script>

タイムスタンプ: Date オブジェクトは、内部的に Unix エポック (1970 年 1 月 1 日 00:00:00 UTC) からの経過ミリ秒数を用いて時間を表現します。この値は、タイムスタンプと呼ばれます。

2. 日付/時間コンポーネントの取得と設定

日付/時間コンポーネントの取得:

getFullYear()、getMonth()、getDate() などのメソッドを使用して、年、月、日、時、分、秒、ミリ秒などの情報を取得できます。
getMonth() の戻り値の範囲は 0-11 であることに注意してください。0 は 1 月、11 は 12 月を表します。

日付/時間コンポーネントの設定:

setFullYear()、setMonth()、setDate() などのメソッドを使用して、年、月、日、時、分、秒、ミリ秒などの情報を変更できます。


<script>
const date = new Date();

// ⽇付/時間コンポーネントの取得
console.log("年:", date.getFullYear());
console.log("月:", date.getMonth() + 1); // 0 から始まるため +1 する
console.log("⽇:", date.getDate());

// ⽇付/時間コンポーネントの設定
date.setFullYear(2024);
date.setMonth(0); // 1 月を設定
date.setDate(1); 
console.log("更新後の⽇付:", date); 
</script>

3. 日付のフォーマット

Date オブジェクトを読みやすい文字列に変換するさまざまな方法を紹介します。

toString()、toDateString()、toTimeString() などのメソッドの出力形式と用途を説明します。

メソッド	説明	例
`toString()`	日付と時刻を現地時間に合わせて表示する	"Mon Dec 25 2023 17:38:45 GMT+0900 (日本標準時)"
`toDateString()`	日付を現地時間に合わせて表示する	"Mon Dec 25 2023"
`toTimeString()`	時刻を現地時間に合わせて表示する	"17:38:45 GMT+0900 (日本標準時)"

toLocaleDateString() および toLocaleTimeString() を使用した、ローカライズされた日付と時刻のフォーマットについて説明します。


<script>
const date = new Date();

// ローカライズされた日付と時刻のフォーマット
console.log(date.toLocaleDateString()); // 例: "2023/12/25"
console.log(date.toLocaleTimeString()); // 例: "17:53:08"
</script>

カスタムフォーマット:

Moment.js などのサードパーティライブラリを使用した、より柔軟な日付フォーマットについて簡単に紹介します。詳細については、Moment.js のドキュメントを参照してください。

4. タイムゾーン処理

UTC 時間:

UTC 時間の概念と、現地時間との違いについて説明します。
getUTCFullYear()、getUTCMonth() などのメソッドを使用して UTC 時間のコンポーネントを取得する方法について説明します。
toUTCString() を使用して日付を UTC 文字列に変換する方法について説明します。


<script>
const date = new Date();

// UTC 時間の取得
console.log("UTC 年:", date.getUTCFullYear());
console.log("UTC 月:", date.getUTCMonth() + 1);
console.log("UTC ⽇:", date.getUTCDate());

// UTC 文字列への変換
console.log(date.toUTCString()); 
</script>

タイムゾーン変換:

JavaScript の Date オブジェクト自体は、直接的なタイムゾーン変換機能を提供していないことを強調します。
Moment.js with Moment Timezone などのサードパーティライブラリを使用すると、より便利なタイムゾーン処理が可能になります。詳細については、Moment Timezone のドキュメントを参照してください。

5. Date オブジェクトの応用例

以下は、Date オブジェクトの実用的なアプリケーションシナリオの例です。

2 つの日付の間の日数を計算する。
日付に基づいて曜日を判定する。
Web ページに表示するために日付をフォーマットする。
カウントダウンタイマーまたはカウントダウンタイマーを作成する。


<script>
// 2 つの日付の間の日数を計算する
const date1 = new Date('2023-12-20');
const date2 = new Date('2023-12-25');
const diffInTime = date2.getTime() - date1.getTime();
const diffInDays = Math.floor(diffInTime / (1000 * 3600 * 24));
console.log("日数差:", diffInDays); 

// 日付に基づいて曜日を判定する
const daysOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
const dayIndex = date2.getDay();
console.log("曜日:", daysOfWeek[dayIndex]); 
</script>

6. まとめ

この記事では、Date オブジェクトの基本的な概念とよく使用されるメソッドを振り返りました。日付と時間の操作は、Web 開発において非常に一般的なタスクです。この記事で紹介したテクニックを習得することで、これらのタスクを効率的に処理することができます。さらに高度な日付と時間の操作テクニックを学びたい場合は、関連するドキュメントやチュートリアルを参照してください。