はじめに#
Webアプリケーション開発において、日付や時刻の操作は避けて通れません。投稿日時の表示、予約システムの日付選択、締め切りまでのカウントダウンなど、日付処理が必要な場面は数多くあります。
JavaScriptには、日付・時刻を扱うための組み込みオブジェクトとして Date が用意されています。本記事では、以下の内容を初心者向けにわかりやすく解説します。
- Dateオブジェクトの生成方法
- 年月日・時分秒の取得と設定
- 日付のフォーマット（文字列変換）
- 日付の加算・減算
- タイムゾーンの扱い方
- Dateオブジェクトを使う際の注意点
Dateオブジェクトとは#
Date オブジェクトは、1970年1月1日 00:00:00 UTC（協定世界時）を基準として、そこからの経過ミリ秒数で日時を内部的に管理しています。この基準時点を「エポック（epoch）」または「UNIX元期」と呼びます。
1
2
3
4
5
6
|
// 現在日時のDateオブジェクトを作成
const now = new Date();
console.log(now); // 例: Sat Jan 04 2026 21:00:00 GMT+0900 (日本標準時)
// 内部的にはミリ秒で管理されている
console.log(now.getTime()); // 例: 1767526800000
|
Dateオブジェクトの生成方法#
Dateオブジェクトを生成する方法は複数あります。用途に応じて使い分けましょう。
引数なしで現在日時を取得#
1
2
|
const now = new Date();
console.log(now); // 現在の日時
|
日時文字列から生成#
ISO 8601形式の文字列を使用すると、確実に動作します。
1
2
3
4
5
6
7
8
9
10
11
|
// ISO 8601形式（推奨）
const date1 = new Date("2026-01-04T21:00:00");
console.log(date1); // Sat Jan 04 2026 21:00:00 GMT+0900 (日本標準時)
// タイムゾーン付き
const date2 = new Date("2026-01-04T12:00:00Z"); // UTC時刻
console.log(date2); // Sat Jan 04 2026 21:00:00 GMT+0900 (日本標準時)
// タイムゾーンオフセット付き
const date3 = new Date("2026-01-04T21:00:00+09:00");
console.log(date3); // Sat Jan 04 2026 21:00:00 GMT+0900 (日本標準時)
|
日付のみの形式（YYYY-MM-DD）はUTC時刻として解釈されるため注意が必要です。
1
2
3
4
|
// 日付のみの形式はUTCとして解釈される
const dateOnly = new Date("2026-01-04");
console.log(dateOnly); // Sat Jan 04 2026 09:00:00 GMT+0900 (日本標準時)
// UTCの0時 = 日本時間の9時
|
年月日・時分秒を個別に指定#
コンストラクタに数値を渡して生成することもできます。月は0始まり（0が1月、11が12月）である点に注意してください。
1
2
3
4
5
6
7
8
|
// new Date(年, 月, 日, 時, 分, 秒, ミリ秒)
// 月は0始まり（0 = 1月, 11 = 12月）
const date = new Date(2026, 0, 4, 21, 30, 0);
console.log(date); // Sun Jan 04 2026 21:30:00 GMT+0900 (日本標準時)
// 時分秒は省略可能（省略すると0になる）
const dateSimple = new Date(2026, 5, 15); // 2026年6月15日 00:00:00
console.log(dateSimple);
|
タイムスタンプ（ミリ秒）から生成#
1
2
3
4
5
6
7
|
// エポックからのミリ秒を指定
const date = new Date(1767526800000);
console.log(date); // Sat Jan 04 2026 21:00:00 GMT+0900 (日本標準時)
// 負の値を指定すると1970年より前の日時も表現可能
const past = new Date(-86400000); // 1日前
console.log(past); // Wed Dec 31 1969 09:00:00 GMT+0900 (日本標準時)
|
年月日・時分秒の取得#
Dateオブジェクトから各要素を取得するメソッドが用意されています。
ローカル時刻での取得#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
const date = new Date("2026-01-04T21:30:45.123");
// 年を取得
console.log(date.getFullYear()); // 2026
// 月を取得（0始まり）
console.log(date.getMonth()); // 0（1月）
console.log(date.getMonth() + 1); // 1（人間が読む月）
// 日を取得
console.log(date.getDate()); // 4
// 曜日を取得（0 = 日曜日, 6 = 土曜日）
console.log(date.getDay()); // 0（日曜日）
// 時を取得
console.log(date.getHours()); // 21
// 分を取得
console.log(date.getMinutes()); // 30
// 秒を取得
console.log(date.getSeconds()); // 45
// ミリ秒を取得
console.log(date.getMilliseconds()); // 123
// タイムスタンプを取得（エポックからのミリ秒）
console.log(date.getTime()); // 1767528645123
|
UTC時刻での取得#
各取得メソッドには getUTC で始まるUTC版があります。
1
2
3
4
5
6
7
8
9
10
|
const date = new Date("2026-01-04T21:30:45+09:00");
// UTC時刻での時を取得
console.log(date.getUTCHours()); // 12（日本時間 - 9時間 = UTC時間）
// UTC時刻での日を取得
console.log(date.getUTCDate()); // 4
// UTC時刻での月を取得
console.log(date.getUTCMonth()); // 0
|
曜日を日本語で表示する例#
1
2
3
4
|
const date = new Date("2026-01-04");
const dayNames = ["日", "月", "火", "水", "木", "金", "土"];
const dayOfWeek = dayNames[date.getDay()];
console.log(dayOfWeek); // "日"
|
年月日・時分秒の設定#
取得メソッドに対応する設定メソッドも用意されています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const date = new Date("2026-01-04T12:00:00");
// 年を設定
date.setFullYear(2027);
console.log(date); // Sat Jan 04 2027 12:00:00
// 月を設定（0始まり）
date.setMonth(5); // 6月に変更
console.log(date); // Wed Jun 04 2027 12:00:00
// 日を設定
date.setDate(15);
console.log(date); // Sun Jun 15 2027 12:00:00
// 時を設定
date.setHours(18);
console.log(date); // Sun Jun 15 2027 18:00:00
// 分を設定
date.setMinutes(45);
console.log(date); // Sun Jun 15 2027 18:45:00
// 秒を設定
date.setSeconds(30);
console.log(date); // Sun Jun 15 2027 18:45:30
|
日付のフォーマット（文字列変換）#
Dateオブジェクトを文字列に変換する方法はいくつかあります。
標準的な文字列変換メソッド#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const date = new Date("2026-01-04T21:30:45");
// 完全な文字列表現
console.log(date.toString());
// "Sun Jan 04 2026 21:30:45 GMT+0900 (日本標準時)"
// 日付部分のみ
console.log(date.toDateString());
// "Sun Jan 04 2026"
// 時刻部分のみ
console.log(date.toTimeString());
// "21:30:45 GMT+0900 (日本標準時)"
// ISO 8601形式（UTC）
console.log(date.toISOString());
// "2026-01-04T12:30:45.000Z"
// UTC文字列
console.log(date.toUTCString());
// "Sun, 04 Jan 2026 12:30:45 GMT"
|
ロケール対応の文字列変換#
toLocaleString 系のメソッドを使うと、ロケールに応じた形式で日時を表示できます。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const date = new Date("2026-01-04T21:30:45");
// ロケールに応じた日時
console.log(date.toLocaleString("ja-JP"));
// "2026/1/4 21:30:45"
// ロケールに応じた日付のみ
console.log(date.toLocaleDateString("ja-JP"));
// "2026/1/4"
// ロケールに応じた時刻のみ
console.log(date.toLocaleTimeString("ja-JP"));
// "21:30:45"
|
オプションを使った詳細なフォーマット#
toLocaleDateString や toLocaleString にはオプションを渡して表示形式を細かく指定できます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
const date = new Date("2026-01-04T21:30:45");
// 和暦表示
console.log(date.toLocaleDateString("ja-JP-u-ca-japanese", {
era: "long",
year: "numeric",
month: "long",
day: "numeric"
}));
// "令和8年1月4日"
// 曜日付きの表示
console.log(date.toLocaleDateString("ja-JP", {
year: "numeric",
month: "2-digit",
day: "2-digit",
weekday: "short"
}));
// "2026/01/04(日)"
// 12時間制での時刻表示
console.log(date.toLocaleTimeString("ja-JP", {
hour: "2-digit",
minute: "2-digit",
hour12: true
}));
// "午後9:30"
|
カスタムフォーマット関数の作成#
標準メソッドでは対応できない形式が必要な場合は、自作関数を用意します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function formatDate(date, format) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
return format
.replace("YYYY", year)
.replace("MM", month)
.replace("DD", day)
.replace("HH", hours)
.replace("mm", minutes)
.replace("ss", seconds);
}
const date = new Date("2026-01-04T21:30:45");
console.log(formatDate(date, "YYYY年MM月DD日 HH:mm:ss"));
// "2026年01月04日 21:30:45"
console.log(formatDate(date, "YYYY-MM-DD"));
// "2026-01-04"
|
日付の加算・減算#
Dateオブジェクトで日付の計算を行う方法を紹介します。
setメソッドを使った加算・減算#
set 系メソッドは範囲外の値を自動的に繰り上げ・繰り下げしてくれます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 日の加算
const date1 = new Date("2026-01-04");
date1.setDate(date1.getDate() + 7); // 7日後
console.log(date1.toLocaleDateString("ja-JP")); // "2026/1/11"
// 月の加算
const date2 = new Date("2026-01-04");
date2.setMonth(date2.getMonth() + 3); // 3ヶ月後
console.log(date2.toLocaleDateString("ja-JP")); // "2026/4/4"
// 年の加算
const date3 = new Date("2026-01-04");
date3.setFullYear(date3.getFullYear() + 1); // 1年後
console.log(date3.toLocaleDateString("ja-JP")); // "2027/1/4"
// 減算も同様
const date4 = new Date("2026-01-04");
date4.setDate(date4.getDate() - 10); // 10日前
console.log(date4.toLocaleDateString("ja-JP")); // "2025/12/25"
|
月末日の取得#
月を1つ進めて日を0にすると、前月の末日が得られます。
1
2
3
4
5
6
7
8
9
|
function getLastDayOfMonth(year, month) {
// 翌月の0日目 = 当月の末日
return new Date(year, month + 1, 0).getDate();
}
console.log(getLastDayOfMonth(2026, 0)); // 31（1月）
console.log(getLastDayOfMonth(2026, 1)); // 28（2月・平年）
console.log(getLastDayOfMonth(2024, 1)); // 29（2月・うるう年）
console.log(getLastDayOfMonth(2026, 3)); // 30（4月）
|
ミリ秒を使った加算・減算#
タイムスタンプを直接操作する方法もあります。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const date = new Date("2026-01-04T12:00:00");
// 時間をミリ秒で計算
const oneHour = 60 * 60 * 1000; // 1時間 = 3600000ミリ秒
const oneDay = 24 * 60 * 60 * 1000; // 1日 = 86400000ミリ秒
// 3時間後
const threeHoursLater = new Date(date.getTime() + 3 * oneHour);
console.log(threeHoursLater.toLocaleString("ja-JP")); // "2026/1/4 15:00:00"
// 5日後
const fiveDaysLater = new Date(date.getTime() + 5 * oneDay);
console.log(fiveDaysLater.toLocaleString("ja-JP")); // "2026/1/9 12:00:00"
|
日付の比較#
2つの日付を比較する方法を紹介します。
タイムスタンプでの比較#
1
2
3
4
5
6
7
8
9
10
11
12
|
const date1 = new Date("2026-01-04");
const date2 = new Date("2026-01-10");
const date3 = new Date("2026-01-04");
// 比較演算子を使用
console.log(date1 < date2); // true
console.log(date1 > date2); // false
console.log(date1.getTime() === date3.getTime()); // true
// 等価比較はgetTime()を使う（オブジェクト同士の比較は参照比較になるため）
console.log(date1 === date3); // false（異なるオブジェクト）
console.log(date1.getTime() === date3.getTime()); // true（同じ時刻）
|
日付の差分を計算#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
const startDate = new Date("2026-01-04");
const endDate = new Date("2026-03-15");
// ミリ秒での差分
const diffMs = endDate.getTime() - startDate.getTime();
// 日数に変換
const diffDays = Math.floor(diffMs / (24 * 60 * 60 * 1000));
console.log(diffDays); // 70
// 経過時間を詳細に計算
function getTimeDifference(start, end) {
const diffMs = end.getTime() - start.getTime();
const days = Math.floor(diffMs / (24 * 60 * 60 * 1000));
const hours = Math.floor((diffMs % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
const minutes = Math.floor((diffMs % (60 * 60 * 1000)) / (60 * 1000));
const seconds = Math.floor((diffMs % (60 * 1000)) / 1000);
return { days, hours, minutes, seconds };
}
const diff = getTimeDifference(
new Date("2026-01-04T10:00:00"),
new Date("2026-01-06T15:30:45")
);
console.log(diff); // { days: 2, hours: 5, minutes: 30, seconds: 45 }
|
タイムゾーンの扱い方#
Dateオブジェクトは内部的にUTCで時刻を管理していますが、表示時にはローカルタイムゾーンが使用されます。
タイムゾーンオフセットの取得#
1
2
3
4
5
6
7
8
9
|
const date = new Date();
// タイムゾーンオフセット（分単位）
const offsetMinutes = date.getTimezoneOffset();
console.log(offsetMinutes); // -540（日本時間 = UTC+9時間 = -540分）
// 時間単位に変換
const offsetHours = -offsetMinutes / 60;
console.log(offsetHours); // 9
|
特定のタイムゾーンで表示#
toLocaleString の timeZone オプションを使うと、任意のタイムゾーンで日時を表示できます。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const date = new Date("2026-01-04T12:00:00Z"); // UTC時刻
// 日本時間で表示
console.log(date.toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" }));
// "2026/1/4 21:00:00"
// ニューヨーク時間で表示
console.log(date.toLocaleString("en-US", { timeZone: "America/New_York" }));
// "1/4/2026, 7:00:00 AM"
// ロンドン時間で表示
console.log(date.toLocaleString("en-GB", { timeZone: "Europe/London" }));
// "04/01/2026, 12:00:00"
|
Dateオブジェクトの静的メソッド#
Dateオブジェクトには便利な静的メソッドがあります。
Date.now()#
現在時刻のタイムスタンプを取得します。
1
2
3
4
5
6
7
8
9
10
11
12
|
// 現在のタイムスタンプを取得
const timestamp = Date.now();
console.log(timestamp); // 1767526800000（例）
// パフォーマンス計測に便利
const start = Date.now();
// 何らかの処理
for (let i = 0; i < 1000000; i++) {
Math.sqrt(i);
}
const end = Date.now();
console.log(`処理時間: ${end - start}ミリ秒`);
|
Date.parse()#
日時文字列をパースしてタイムスタンプを返します。
1
2
3
4
5
|
const timestamp = Date.parse("2026-01-04T12:00:00Z");
console.log(timestamp); // 1767528000000
// 無効な日付の場合はNaNを返す
console.log(Date.parse("invalid date")); // NaN
|
Date.UTC()#
UTC時刻でタイムスタンプを生成します。
1
2
3
4
5
6
|
// Date.UTC(年, 月, 日, 時, 分, 秒, ミリ秒)
const timestamp = Date.UTC(2026, 0, 4, 12, 0, 0);
console.log(timestamp); // 1767528000000
const date = new Date(timestamp);
console.log(date.toISOString()); // "2026-01-04T12:00:00.000Z"
|
Dateオブジェクトを使う際の注意点#
月は0始まり#
JavaScriptのDateオブジェクトでは、月は0から始まります。これは多くの開発者がハマるポイントです。
1
2
3
4
5
6
|
// 2026年1月4日を作成したい場合
const correct = new Date(2026, 0, 4); // 正しい（0 = 1月）
const wrong = new Date(2026, 1, 4); // 間違い（1 = 2月）
console.log(correct.toLocaleDateString("ja-JP")); // "2026/1/4"
console.log(wrong.toLocaleDateString("ja-JP")); // "2026/2/4"
|
日付文字列の解釈に注意#
日付のみの形式（YYYY-MM-DD）はUTCとして解釈されます。
1
2
3
4
5
6
7
|
// 日付のみ → UTCとして解釈
const date1 = new Date("2026-01-04");
console.log(date1.getHours()); // 9（日本時間ではUTC 0時 = 9時）
// 日時形式 → ローカル時刻として解釈
const date2 = new Date("2026-01-04T00:00:00");
console.log(date2.getHours()); // 0
|
Dateオブジェクトはミュータブル#
Dateオブジェクトは変更可能（ミュータブル）です。set 系メソッドは元のオブジェクトを変更します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const original = new Date("2026-01-04");
const reference = original; // 参照をコピー
original.setDate(10);
console.log(original.getDate()); // 10
console.log(reference.getDate()); // 10（同じオブジェクトなので変更される）
// 元の日付を保持したい場合はコピーを作成
const original2 = new Date("2026-01-04");
const copy = new Date(original2.getTime());
original2.setDate(10);
console.log(original2.getDate()); // 10
console.log(copy.getDate()); // 4（コピーは変更されない）
|
無効な日付の検出#
1
2
3
4
5
6
7
|
function isValidDate(date) {
return date instanceof Date && !isNaN(date.getTime());
}
console.log(isValidDate(new Date("2026-01-04"))); // true
console.log(isValidDate(new Date("invalid"))); // false
console.log(isValidDate(new Date("2026-02-30"))); // true（3/2として解釈される）
|
実践的な活用例#
相対的な日時表示#
SNSなどでよく見る「3時間前」「昨日」といった表示を実装します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function getRelativeTime(date) {
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffSeconds = Math.floor(diffMs / 1000);
const diffMinutes = Math.floor(diffSeconds / 60);
const diffHours = Math.floor(diffMinutes / 60);
const diffDays = Math.floor(diffHours / 24);
if (diffSeconds < 60) {
return "たった今";
} else if (diffMinutes < 60) {
return `${diffMinutes}分前`;
} else if (diffHours < 24) {
return `${diffHours}時間前`;
} else if (diffDays < 7) {
return `${diffDays}日前`;
} else {
return date.toLocaleDateString("ja-JP");
}
}
// 使用例
const now = new Date();
console.log(getRelativeTime(new Date(now.getTime() - 30 * 1000))); // "たった今"
console.log(getRelativeTime(new Date(now.getTime() - 45 * 60 * 1000))); // "45分前"
console.log(getRelativeTime(new Date(now.getTime() - 5 * 60 * 60 * 1000))); // "5時間前"
|
営業日の計算#
土日を除いた営業日を計算する例です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function addBusinessDays(startDate, days) {
const result = new Date(startDate);
let addedDays = 0;
while (addedDays < days) {
result.setDate(result.getDate() + 1);
const dayOfWeek = result.getDay();
// 土曜(6)と日曜(0)以外ならカウント
if (dayOfWeek !== 0 && dayOfWeek !== 6) {
addedDays++;
}
}
return result;
}
const startDate = new Date("2026-01-05"); // 月曜日
const result = addBusinessDays(startDate, 5); // 5営業日後
console.log(result.toLocaleDateString("ja-JP")); // "2026/1/12"（月曜日）
|
まとめ#
JavaScriptのDateオブジェクトを使うことで、日付・時刻の操作が可能になります。本記事で解説した内容を振り返りましょう。
| 操作 |
メソッド・方法 |
| 現在日時の取得 |
new Date() |
| 文字列から生成 |
new Date("2026-01-04T12:00:00") |
| 年月日の取得 |
getFullYear(), getMonth(), getDate() |
| 年月日の設定 |
setFullYear(), setMonth(), setDate() |
| 文字列変換 |
toLocaleString(), toISOString() |
| 日付の計算 |
setDate(getDate() + n) |
| 日付の比較 |
getTime() で比較 |
Dateオブジェクトには「月が0始まり」「日付文字列の解釈がタイムゾーンに依存する」などの注意点があります。これらを理解した上で活用することで、日付操作のバグを防ぐことができます。
なお、ECMAScript 2024以降では新しい日時API「Temporal」の導入が進んでいます。将来的にはより直感的な日時操作が可能になりますが、現時点ではDateオブジェクトの理解が必要不可欠です。
参考リンク#
