こんにちは、かつコーチです。
前回はCookieの操作方法を解説し、有効期限の計算で少しだけ Date が登場しました。
今回はその Date オブジェクトについて、基本から丁寧に解説していきます。
「投稿日時を表示したい」「何日後の日付を計算したい」など、日付・時刻を扱う場面はどんなアプリでも必ず出てくるので、早いうちに慣れておきましょう。
Dateオブジェクトとは？
日付・時刻を表すための組み込みオブジェクト
Dateオブジェクトは、JavaScriptにあらかじめ用意されている、日付と時刻を扱うための仕組みです。
new Date() と書くことで、その時点の日時情報を持ったオブジェクトを作成できます。
const now = new Date();
console.log(now);
// 例: 2026-08-12T03:15:00.000Z（実行した瞬間の日時）
引数を指定しなければ「現在の日時」、引数を指定すれば「指定した日時」のDateオブジェクトを作ることができます。
日時を指定してDateオブジェクトを作る
代表的な作り方をいくつか見てみましょう。
// 年, 月, 日を指定する（月は0始まりなので注意）
const birthday = new Date(2026, 7, 12); // 2026年8月12日
// 年, 月, 日, 時, 分, 秒まで指定する
const eventTime = new Date(2026, 7, 12, 9, 30, 0); // 2026年8月12日 9:30:00
// 日付文字列から作成する
const fromString = new Date("2026-08-12");
console.log(birthday);
console.log(eventTime);
console.log(fromString);
つまずきやすいポイント：月は0始まり
「8月」のつもりが「9月」になる罠
Dateオブジェクトを初めて使う人が、ほぼ全員一度は引っかかるのがこのポイントです。
new Date() の第2引数（月）は、0が1月、11が12月という「0始まり」のルールになっています。
❌ Before：月をそのまま数字で指定してしまう
// 「2026年8月12日」のつもりで書いたコード
const date = new Date(2026, 8, 12);
console.log(date.getMonth()); // 8（9月を表している）
console.log(date.toLocaleDateString("ja-JP")); // "2026/9/12"（1か月ずれている）
8 を指定すると「8月」ではなく「9月」になってしまいます。
私自身、予約システムのカレンダー機能を作っていたときにこのルールを忘れてしまい、予約確認メールに実際より1か月先の日付が表示されるという不具合を起こしてしまったことがあります。
テスト環境で偶然「1月」のデータばかり扱っていたため、しばらく気づけなかったのも苦い思い出です。
✅ After：月を-1して意図を明示する、または文字列指定を使う
// パターン1: 「人間が数える月 - 1」で指定する
const humanMonth = 8; // 8月のつもり
const date1 = new Date(2026, humanMonth - 1, 12);
console.log(date1.toLocaleDateString("ja-JP")); // "2026/8/12"
// パターン2: 文字列（ISO 8601形式）で指定する方が直感的で安全
const date2 = new Date("2026-08-12");
console.log(date2.toLocaleDateString("ja-JP")); // "2026/8/12"
日付を数値で組み立てる場合は「月から1を引く」ことを徹底し、可能であれば "2026-08-12" のような文字列形式で指定する方が、この手のバグを避けやすくなります。
日付・時刻の各要素を取得する
getで始まるメソッド一覧
Dateオブジェクトから、年・月・日などの各要素を個別に取り出せます。
const date = new Date(2026, 7, 12, 9, 30, 45); // 2026年8月12日 9:30:45
console.log(date.getFullYear()); // 2026（西暦4桁）
console.log(date.getMonth()); // 7（0始まりなので8月は7）
console.log(date.getDate()); // 12（日）
console.log(date.getDay()); // 3（曜日。0=日曜〜6=土曜）
console.log(date.getHours()); // 9（時）
console.log(date.getMinutes()); // 30（分）
console.log(date.getSeconds()); // 45（秒）
getMonth() を画面に表示する場合は、必ず +1 してから表示するのを忘れないようにしましょう。
// 画面表示用に月を人間向けの数字に変換する
const displayMonth = date.getMonth() + 1;
console.log(`${date.getFullYear()}年${displayMonth}月${date.getDate()}日`);
// "2026年8月12日"
曜日を日本語で表示する
getDay() は数字しか返さないので、日本語の曜日名に変換するには配列を使うのが定番のテクニックです。
const youbiList = ["日", "月", "火", "水", "木", "金", "土"];
function formatYoubi(date) {
return youbiList[date.getDay()];
}
const date = new Date(2026, 7, 12);
console.log(`${date.getMonth() + 1}月${date.getDate()}日（${formatYoubi(date)}）`);
// "8月12日（水）"
日付を見やすい形式で表示する
toLocaleDateStringを使う
日付を「2026/8/12」のような表示にしたい場合、自分で文字列を組み立てなくても toLocaleDateString で簡単にフォーマットできます。
const date = new Date(2026, 7, 12);
console.log(date.toLocaleDateString("ja-JP"));
// "2026/8/12"
console.log(date.toLocaleDateString("ja-JP", {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
}));
// "2026年8月12日水曜日"
オプションを細かく指定できるので、getFullYear などを一つずつ組み合わせて文字列を作るより、こちらの方が保守しやすいコードになります。
時刻もあわせて表示する：toLocaleString
日付と時刻をまとめて表示したい場合は toLocaleString を使います。
const eventTime = new Date(2026, 7, 12, 9, 30, 0);
console.log(eventTime.toLocaleString("ja-JP"));
// "2026/8/12 9:30:00"
応用：日付の計算をする
何日後の日付を求める
「7日後の日付」のような計算は、setDate を使って求めるのが定番です。
function addDays(date, days) {
const result = new Date(date); // 元の日付を壊さないようにコピーする
result.setDate(result.getDate() + days);
return result;
}
const today = new Date(2026, 7, 12);
const nextWeek = addDays(today, 7);
console.log(nextWeek.toLocaleDateString("ja-JP")); // "2026/8/19"
setDate は月をまたいでも自動的に繰り上げてくれるので、「31日 + 3日」のような計算も気にせず書けます。
const endOfMonth = new Date(2026, 7, 31); // 2026年8月31日
const overMonth = addDays(endOfMonth, 3);
console.log(overMonth.toLocaleDateString("ja-JP")); // "2026/9/3"（自動的に月をまたぐ）
2つの日付の差を計算する
日付同士の差を求めたい場合は、Dateオブジェクトを数値として計算します。
function diffDays(dateA, dateB) {
const msPerDay = 1000 * 60 * 60 * 24; // 1日あたりのミリ秒数
const diffMs = Math.abs(dateB - dateA); // Date同士の引き算はミリ秒差になる
return Math.floor(diffMs / msPerDay);
}
const start = new Date(2026, 7, 1);
const end = new Date(2026, 7, 12);
console.log(diffDays(start, end)); // 11
Dateオブジェクト同士は引き算をすると、内部で「ミリ秒」の数値に変換されて計算されます。
この性質を利用することで、日数計算や締め切りまでの残り時間表示なども実装できます。
まとめ
この記事のポイント
new Date()で現在または指定した日時のDateオブジェクトを作成できる- 月の指定・取得は0始まり（0=1月）なので、表示時は必ず+1する
toLocaleDateString/toLocaleStringで見やすい形式に整形できるsetDateで日付の加算、Date同士の引き算で日数差を計算できる
次に読むべき記事
次回は、文字列のパターンマッチングに欠かせない「正規表現」の基本を解説していきます。
日付の文字列チェックなどでもよく登場するテーマなので、あわせて押さえておきましょう。
→ 次の記事：JavaScriptの正規表現入門