【JavaScript】new Dateを使った日付操作を徹底解説！取得・比較・整形まで一括ガイド

Dateオブジェクトの基本と仕組みを理解しよう

JavaScriptでは、日付や時刻を扱うためにDateオブジェクトが用意されています。
これを使うことで現在時刻の取得、任意の日時の生成、日付同士の比較や表示フォーマットの調整が可能になります。

JavaScript

const now = new Date();
console.log(now); // 例：Fri May 16 2025 14:30:12 GMT+0900 (日本標準時)

このように new Date() を呼び出すことで、現在の日時を含むDateオブジェクトが作成されます。
重要なのは、このオブジェクトには「日付」と「時刻」の両方が含まれているという点です。

また、Dateオブジェクトのコンストラクタには次のような使い方もあります。

JavaScript

const dateFromString = new Date("2025-05-16T12:00:00");
const dateFromParts = new Date(2025, 4, 16); // 月は0始まりに注意（5月＝4）

これらをうまく使い分けることで、任意の日時を柔軟に作成できます。

Dateオブジェクトのメソッド・プロパティ

日付・時刻の取得

getFullYear()（インスタンスメソッド）

年を取得
西暦年（例: 2025）を返します。

getMonth()（インスタンスメソッド）

月を取得
0～11で月を返します。表示する際は+1をする。

getDate()（インスタンスメソッド）

日を取得
1～31 の日を返します。

getDay()（インスタンスメソッド）

曜日を取得
0～6で曜日を返します。0:日 1:月 2:火 3:水 4:木 5:金 6:土

getHours()（インスタンスメソッド）

時を取得
時（0～23）を返します。

getMinutes()（インスタンスメソッド）

分を取得
分（0～59）を返します。

getSeconds()（インスタンスメソッド）

秒を取得
秒（0～59）を返します。

getMilliseconds()（インスタンスメソッド）

ミリ秒を取得
ミリ秒（0～999）を返します。

getTime()（インスタンスメソッド）

Unixタイムスタンプを取得
Unixエポックからのミリ秒を返します。

getTimezoneOffset()（インスタンスメソッド）

タイムゾーン差を取得
ローカルとUTCの差を分で返します。

日付・時刻の設定

setDate()（インスタンスメソッド）

日を設定
日を指定して変更します。

setMonth()（インスタンスメソッド）

月を設定
0～11で月を指定して変更します。

setFullYear()（インスタンスメソッド）

年を設定
年を指定して変更します。

setHours()（インスタンスメソッド）

時を設定
時間を指定して変更します。

setMinutes()（インスタンスメソッド）

分を設定
分を指定して変更します。

setSeconds()（インスタンスメソッド）

秒を設定
秒を指定して変更します。

setMilliseconds()（インスタンスメソッド）

ミリ秒を設定
ミリ秒を指定して変更します。

setTime()（インスタンスメソッド）

ミリ秒で設定
Unixエポックからのミリ秒値を指定して設定します。

文字列変換

toDateString()（インスタンスメソッド）

日付文字列を取得
"Tue May 16 2025" のような形式で返します。

toISOString()（インスタンスメソッド）

ISO形式を取得
ISO 8601形式の文字列を返します。

toJSON()（インスタンスメソッド）

JSON形式を取得
toISOString()と同じ形式で返します。

toLocaleDateString()（インスタンスメソッド）

ローカル日付を取得
ロケールに合わせた日付文字列を返します。

toLocaleString()（インスタンスメソッド）

ローカル日時を取得
ロケールに合わせた日付＋時刻を返します。

toLocaleTimeString()（インスタンスメソッド）

ローカル時刻を取得
ロケールに合わせた時刻を返します。

toString()（インスタンスメソッド）

標準形式を取得
デフォルトの文字列形式を返します。

toTimeString()（インスタンスメソッド）

時間部分を取得
時間部分の文字列を返します。

toUTCString()（インスタンスメソッド）

UTC形式を取得
UTC基準の文字列を返します。

値の取得

valueOf()（インスタンスメソッド）

ミリ秒を取得
getTime()と同じくミリ秒の数値を返します。

静的メソッド

Date.now()（静的メソッド）

現在時刻のミリ秒を取得
new Date().getTime() と同じく現在のミリ秒を返します。

Date.parse()（静的メソッド）

日付文字列をミリ秒に変換
日付文字列を解析してミリ秒に変換します。

Date.UTC()（静的メソッド）

UTCミリ秒値を取得
指定の日時をUTCとしてミリ秒値に変換します。

日付だけを取得したいときの処理方法

JavaScriptのDateオブジェクトは、時刻情報も含んでいます。
そのため「日付だけ取得したい」と思っていても、時間やタイムゾーン情報がついてきて困るケースもあります。

たとえば次のようなコードでは、日付だけではなく時刻も含まれています。

JavaScript

const today = new Date();
console.log(today.toISOString()); // 例: 2025-05-16T05:30:12.000Z

このような場合は、日付のみを抽出する方法が必要になります。
代表的なアプローチは以下です。

getFullYear(), getMonth(), getDate() で数値を取り出してフォーマットする

JavaScript

    const date = new Date();
    const formatted = ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()};
    console.log(formatted); // 例: 2025-5-16

toLocaleDateString() で地域設定に基づいた日付表示を使う

JavaScript

    const date = new Date('2025-06-19T15:30:00Z');

    // 日本のロケールで表示（例：2025/6/19）
    console.log(date.toLocaleDateString('ja-JP'));

    // アメリカのロケールで表示（例：6/19/2025）
    console.log(date.toLocaleDateString('en-US'));

    // ドイツのロケールで表示（例：19.6.2025）
    console.log(date.toLocaleDateString('de-DE'));

UTCやISO文字列から不要な時刻を削除する

JavaScript

const isoString = '2025-06-19T15:30:00Z';

// ISO文字列から日付部分だけを取り出す（時刻を削除）
const dateOnly = isoString.split('T')[0];
console.log(dateOnly); // 出力: 2025-06-19

// DateオブジェクトからUTCの年月日だけ取得する方法
const date = new Date(isoString);
const year = date.getUTCFullYear();
const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // 0スタートなので+1
const day = String(date.getUTCDate()).padStart(2, '0');

const utcDateOnly = ${year}-${month}-${day};
console.log(utcDateOnly); // 出力: 2025-06-19

これらの方法を用いれば、カレンダー表示や一覧ページなどで日付だけを扱うUIにも対応できます。

日付の比較方法と注意点

JavaScriptで日付を比較する際にも、正しい知識が必要です。
Dateオブジェクトは、内部的にはミリ秒で表現された数値として扱われています。
したがって、比較は数値同士の比較と同様に行えます。

JavaScript

const date1 = new Date('2025-05-16');
const date2 = new Date('2025-05-17');

if (date1 < date2) {
  console.log("date1はdate2より前の日付です");
}

ただし、注意点としては比較対象が同じ時刻を含んでいるとは限らないことです。
例えば、ある日付には00:00:00が含まれ、別のものには12:00:00が含まれている場合、同じ「日」に見えても比較結果は変わってしまいます。

このようなミスを防ぐためには、時刻を一律00:00:00にリセットしてから比較する、あるいは日付部分だけを文字列に変換して比較する方法が有効です。

日付フォーマットの整形テクニック

Webサイトに日付を表示する際、単純な new Date() の出力ではユーザーにとって見づらい場合があります。
日本語表記にしたり、「2025年5月16日」のようにカスタムフォーマットで表示したいという要望も多いでしょう。

JavaScriptでは toLocaleDateString() を使うことで、ローカライズされた表示を実現できます。

JavaScript

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // 例: 2025/5/16

さらに、日付と時刻を明確に分けたいときは toLocaleString() や Intl.DateTimeFormat を使うことで、細かく調整できます。

JavaScript

const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
console.log(new Intl.DateTimeFormat('ja-JP', options).format(date)); // 例: 2025年5月16日

より高度な整形には、日付ライブラリ（例：date-fns、dayjs）を使うのもおすすめです。

UTC・ローカル時刻・タイムゾーンの違いに注意

日付操作において最も混乱しやすいのが、UTC（協定世界時）とローカル時間の違いです。
Dateオブジェクトは内部的にUTCで管理されていますが、表示はローカル時刻になるため、タイムゾーンの差で表示にズレが出ることがあります。

JavaScript

const date = new Date("2025-05-16T00:00:00Z");
console.log(date.toString()); // ローカル時間で表示される
console.log(date.toISOString()); // UTC基準で表示される

たとえば日本時間（UTC+9）では、深夜0時を表示しようとしても、toISOString() では前日23:00になる可能性があります。
正しい表示を保ちたい場合は、

• toLocaleString() を使用してローカル基準で出力
• サーバーサイドではUTCで統一、クライアント側で補正する

といった方針で処理するのが一般的です。

実務で役立つ日付ユースケースまとめ

ここまで学んだテクニックをもとに、実務でよく使われる日付処理のユースケースをまとめてみましょう。

• ブログの記事に投稿日を表示 toLocaleDateString()で読みやすく整形
• 予約システムで未来日を比較 Date.now() や getTime() で数値比較
• カレンダーの生成で月初・月末を取得 new Date(year, month, 1) や new Date(year, month + 1, 0)
• ユーザーの入力日付を検証 入力値を new Date() に変換して不正チェック

これらの処理を自在に操れるようになることで、Webアプリの信頼性・使いやすさが格段に向上します。

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、JavaScriptでの new Date() を用いた日付操作について、基本から実務で使える応用まで徹底的に解説しました。

今回のポイントをまとめますと、次のとおりです。

他にもJavaScriptに関する技術や実用テクニックを随時発信しています。

「役に立った」と思っていただけた方は、ぜひブックマークやSNSでのシェアをお願いいたします！

{{related}}

最後までお読みいただきありがとうございました！