【JavaScript】日付の操作を解説｜Webの基礎

記事内には広告が含まれます

2026年8月31日

はじめに

前回の記事では、文字列（String）の操作方法を解説しました。

今回は、日付や時刻を扱うDateオブジェクトの使い方を解説します。現在日時の取得、年月日・曜日の取得、日付の計算、表示形式の整形まで、実務でよく使う操作方法を中心に紹介します。

Dateオブジェクトの基本（現在日時を取得する）

現在の日時を取得するには、new Date()でDateオブジェクトを作成します。

const now = new Date();
console.log(now); // 現在の日時（実行した瞬間の日時が入る）

console.log(now)で表示される内容は、ブラウザの実行環境（タイムゾーン）によって見え方が変わります。日時そのものは正しく取得できているので、見た目の表記は次に紹介する方法で整えます。

日付の要素を取得する（年・月・日・曜日・時刻）

Dateオブジェクトから年・月・日などの要素を個別に取り出すには、以下のメソッドを使います。

const now = new Date();

console.log(now.getFullYear()); // 年（例: 2026）
console.log(now.getMonth()); // 月（0〜11。0が1月なので注意）
console.log(now.getDate()); // 日（1〜31）
console.log(now.getDay()); // 曜日（0=日曜〜6=土曜の数値）
console.log(now.getHours()); // 時（0〜23）
console.log(now.getMinutes()); // 分（0〜59）
console.log(now.getSeconds()); // 秒（0〜59）

getDay()は曜日名ではなく数値で返ってくるため、以下のように配列と組み合わせて曜日名に変換します。

const days = ["日", "月", "火", "水", "木", "金", "土"];
console.log(days[now.getDay()]); // "土" など

getMonth()は0始まりという点に特に注意してください。1月は0、12月は11として返ってきます。画面に表示する際はgetMonth() + 1のように1を足す必要があります。

日付を指定して作成する（年月日指定・文字列からの変換）

現在日時ではなく、特定の日付を扱いたい場合は、年月日を指定してDateオブジェクトを作成します。

const d1 = new Date(2026, 7, 29); // 2026年8月29日（月は7=8月なので注意）
const d2 = new Date("2026-08-29"); // 文字列から作成（"年-月-日"のISO形式）

console.log(d1);
console.log(d2);

年月日を数値で個別に指定する場合もgetMonth()と同じく月は0始まりなので、new Date(2026, 7, 29)は8月29日になります。文字列から作成する場合はこの罠がなく、"2026-08-29"のように実際の月をそのまま書けるため、コード上で日付を扱う際は文字列指定の方が読み間違いを防げます。

日付を計算する（加算・減算、2つの日付の差）

指定した日数だけ日付をずらすにはsetDate()を使います。

const today = new Date();
const nextWeek = new Date(today);
nextWeek.setDate(today.getDate() + 7); // 7日後
console.log(nextWeek);

2つの日付の差（日数）を求めたい場合は、getTime()で取得できるミリ秒単位の値を引き算し、1日分のミリ秒（1000 × 60 × 60 × 24）で割ります。

const today = new Date();
const deadline = new Date("2026-09-30");

const diffMs = deadline.getTime() - today.getTime(); // ミリ秒単位の差
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24)); // 日数に変換（端数切り上げ）

console.log(diffDays); // 締切までの残り日数

getTime()は1970年1月1日からの経過ミリ秒を返すため、2つの日付のミリ秒同士を引くだけで差分が求められます。端数（時刻の差）を切り上げるためMath.ceil()を使っています。

日付を整形して表示する（ゼロ埋め・表示形式の調整）

getMonth()やgetDate()は1桁の場合ゼロ埋めされずに返るため、「2026年08月29日」のような形式にするにはpadStart()でゼロ埋めします。

const now = new Date();
const yyyy = now.getFullYear();
const mm = String(now.getMonth() + 1).padStart(2, "0"); // 月は+1してゼロ埋め
const dd = String(now.getDate()).padStart(2, "0");

console.log(`${yyyy}年${mm}月${dd}日`); // "2026年08月29日"
console.log(now.toLocaleDateString("ja-JP")); // "2026/8/29"（環境により表記が変わる）

toLocaleDateString()を使えば1行で日付を文字列に変換できますが、区切り文字やゼロ埋めの有無は実行環境（ブラウザ・OSの言語設定）によって変わることがあります。表示形式をこちらで固定したい場合は、padStart()を使って自前で整形する方法が確実です。

実務サンプル（申込締切までの残り日数を自動表示）

締切日までの残り日数と曜日を自動計算して表示するサンプルです。ここまで紹介したgetTime()の差分計算、padStart()によるゼロ埋め、曜日の配列変換をまとめて使います。

HTML

<div id="deadlineInfo"></div>

JavaScript（main.js）

document.addEventListener("DOMContentLoaded", () => {
    const deadline = new Date("2026-09-30"); // 締切日
    const today = new Date();
    today.setHours(0, 0, 0, 0); // 時刻部分を切り捨てて日付だけで比較

    const days = ["日", "月", "火", "水", "木", "金", "土"];
    const yyyy = deadline.getFullYear();
    const mm = String(deadline.getMonth() + 1).padStart(2, "0");
    const dd = String(deadline.getDate()).padStart(2, "0");
    const dayOfWeek = days[deadline.getDay()];
    const dateText = `${yyyy}年${mm}月${dd}日（${dayOfWeek}）`;

    const diffMs = deadline.getTime() - today.getTime();
    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

    const info = document.getElementById("deadlineInfo");

    if (diffDays > 0) {
        info.textContent = `申込締切：${dateText}（あと${diffDays}日）`;
    } else if (diffDays === 0) {
        info.textContent = `申込締切：${dateText}（本日締切です！）`;
    } else {
        info.textContent = `申込締切：${dateText}（受付終了しました）`;
    }
});

todayはsetHours(0, 0, 0, 0)で時刻部分をゼロにし、日付だけで比較できるようにしています（時刻まで含めると、当日でも数時間分のずれで日数計算がずれてしまうためです）。差分日数がプラスなら「あと○日」、0なら「本日締切」、マイナスなら「受付終了」と、diffDaysの値に応じて表示を切り替えています。