JavaScript Dateの使い方総まとめ｜タイムゾーンのずれや文字列・日付変換を完全解説

JavaScriptのDateオブジェクトで取得した日付や時刻は、用途に応じて見やすい形式に整形する必要があります。そのままでは使いづらいISO形式やローカル形式で出力されるため、「yyyy-mm-dd」などの形式に変換する処理が欠かせません。本章では、代表的なフォーマットの作り方や自作関数による整形方法・Intl.DateTimeFormatを活用したローカライズ対応まで、実用的なテクニックを解説します。

よく使われるフォーマット（yyyy-mm-ddなど）に変換するには

JavaScriptのDateオブジェクトで取得した日付は、そのままでは読みづらい形式（ISO 8601やローカルの形式）で出力されるため、整形（フォーマット）が必要です。

「yyyy-mm-dd」や「hh:mm:ss」などの形式で表示したい場合は、手動で文字列を組み立てるのが一般的です。

なぜなら、Dateオブジェクトには日付を自由な形式で出力する専用のメソッドが標準では用意されていないためです。

const date = new Date(2025, 4, 9); // 2025年5月9日

const yyyy = date.getFullYear();

const mm = String(date.getMonth() + 1).padStart(2, '0');

const dd = String(date.getDate()).padStart(2, '0');

const formatted = `${yyyy}-${mm}-${dd}`;

console.log(formatted); // 2025-05-09

このように、padStart()でゼロ埋めを行うことで、「yyyy-mm-dd」形式の日付を安全に作成できます。

自作フォーマット関数の作り方

複数の場所で日付フォーマットが必要な場合は、再利用可能な関数を用意するのが効率的です。「年・月・日・時・分・秒」を任意に組み合わせて出力したい場合でも、関数化することで一貫した処理が行えます。

自作フォーマット関数を作った方が効率的な理由は、ロジックが重複するたびにバグの温床となるからです。特にゼロ埋めやタイムゾーン調整などの処理を毎回書くのは非効率です。

function formatDate(date) {

const yyyy = date.getFullYear();

const mm = String(date.getMonth() + 1).padStart(2, '0');

const dd = String(date.getDate()).padStart(2, '0');

const hh = String(date.getHours()).padStart(2, '0');

const min = String(date.getMinutes()).padStart(2, '0');

const ss = String(date.getSeconds()).padStart(2, '0');

return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`;

}

console.log(formatDate(new Date())); // 例：2025-05-09 14:30:45

このように、自作フォーマット関数を活用することで、表示形式の統一やメンテナンスの手間を大幅に削減できます。

Intl.DateTimeFormatでローカル形式に整形する方法

標準APIでローカルな日時表示を行いたい場合は、Intl.DateTimeFormatを活用する方法もあります。

このオブジェクトは、言語やタイムゾーンを指定して日付を「地域ごとに適切な表記」でフォーマットしてくれる機能です。

多言語対応アプリや、国ごとのフォーマットを求められる場合に、国際化対応が容易になります。

const date = new Date(2025, 4, 9, 14, 30);

const formattedJP = new Intl.DateTimeFormat('ja-JP', {

year: 'numeric',

month: '2-digit',

day: '2-digit',

hour: '2-digit',

minute: '2-digit',

second: '2-digit',

hour12: false

}).format(date);

console.log(formattedJP); // 2025/05/09 14:30:00

このように、Intl.DateTimeFormatを使えば、文化圏に応じた柔軟なフォーマットが簡単に実現できます。

JavaScriptの正規表現｜フォーマットチェックやmatchなど実務で使える正規表現一覧

4.JavaScriptでのタイムゾーンの扱い方

JavaScriptで日付を扱う際に、よく「9時間ずれてしまう」という問題に直面することがあります。これは、JavaScriptが内部的にUTC（協定世界時）を基準として動作するためです。本章では、日本時間との違いやズレが発生する理由・タイムゾーンを明示的に指定する方法・toLocaleString()を用いた地域別の表示方法まで、タイムゾーンに関する実践的な対処法を解説します。

日本時間とUTCの違い｜「9時間ずれる」問題の原因

JavaScriptでDateを扱うと「時間が9時間ずれる」と感じたことはあるのではないでしょうか。

これはJavaScriptが内部的に「UTC（協定世界時）」を基準にしており、出力時にローカルタイムへ変換しているためです。

例えば、JSONで日時を送受信する際にはタイムゾーンの差を明示的に処理しないと、9時間のズレが発生してしまいます。

const date = new Date("2025-05-09T00:00:00Z"); // UTC指定

console.log(date.toString()); // 日本環境では 2025-05-09 09:00:00 JST

このように、ズレを回避するには、タイムゾーンの概念を正しく理解して処理する必要があります。

タイムゾーンを指定して表示する方法

JavaScriptでは、Intl.DateTimeFormatのオプションを利用することで、明示的にタイムゾーンを指定して日時を表示できます。

これによりUTCだけでなく、他のタイムゾーンでの出力も可能になります。

なぜこれが重要かというと、国際的なユーザーを対象とするサービスでは、ユーザーごとのタイムゾーンに応じた表示が求められるためです。

const date = new Date("2025-05-09T00:00:00Z");

const formattedTokyo = new Intl.DateTimeFormat('ja-JP', {

timeZone: 'Asia/Tokyo',

year: 'numeric',

month: '2-digit',

day: '2-digit',

hour: '2-digit',

minute: '2-digit',

second: '2-digit',

hour12: false

}).format(date);

console.log(formattedTokyo); // 2025/05/09 09:00:00

このように、タイムゾーンを指定することで表示ずれを避けながら、地域ごとに正確な日時を提供できます。

toLocaleStringを使ったタイムゾーン対応

toLocaleString()メソッドも、タイムゾーン指定に対応しています。

このメソッドを使えば、言語・地域に加えてタイムゾーンも柔軟に制御可能です。

理由は、toLocaleString()がIntl.DateTimeFormatのラッパーであり、オプションの設定次第で同等の機能を手軽に利用できるからです。

const date = new Date("2025-05-09T00:00:00Z");

console.log(

date.toLocaleString('en-US', {

timeZone: 'America/New_York',

year: 'numeric',

month: '2-digit',

day: '2-digit',

hour: '2-digit',

minute: '2-digit',

second: '2-digit'

})

); // 05/08/2025, 08:00:00 AM

このように、toLocaleString()を活用することで、ユーザーごとに適切なフォーマットと時刻での表示が実現できます。

5.Dateオブジェクトの注意点と落とし穴

一見便利なDateオブジェクトですが、細かな仕様を理解していないと意図しない挙動が発生しやすいものです。特に「月の0始まり」や「日付の自動繰り上がり」、ミリ秒による加減算の精度問題、文字列からの変換に伴うタイムゾーンの誤認識などは多くの開発者が経験する落とし穴です。本章では、そうした典型的な注意点とその対処法をわかりやすく紹介します。

月は0始まり・日付の範囲・うるう年に注意

JavaScriptのDateオブジェクトで「月」を扱う際には注意が必要です。

getMonth()やnew Date()の引数では、月が「0から11」でカウントされる仕様になっているため、例えば5月は「4」として扱われます。

これはUNIXやC言語の慣例を引き継いでいる仕様ですが、初心者には直感に反しており、日付バグの原因になりがちです。また、日付が「0」や「32」など範囲外に設定されると、自動で繰り上がりや繰り下がりが行われるため、意図しない動作を招くこともあります。

さらに、うるう年の計算も自動で行われますが、うるう年のルール（4で割り切れる年は閏年、ただし100で割り切れる年は平年、ただし400で割り切れる年は閏年）を正確に理解しておくことで、2月29日を含む日付計算のバグを避けられます。

const date = new Date(2025, 4, 32); // 5月32日 → 6月1日になる

console.log(date.toDateString()); // Sat Jun 01 2025

このように、月のインデックスや日付の範囲外操作には常に注意し、日付の境界値を意識したコーディングが重要です。

ミリ秒による加減算と日付の繰り上がり

日付の加算・減算を行う場合、Dateオブジェクトに対して「ミリ秒単位での加減算」を行う方法がよく使われます。

しかし日数単位での処理では、うるう年やサマータイムなどの影響で誤差が生じるケースもあるため、単純なミリ秒演算にはリスクがあります。

なぜなら、1日は常に「86,400,000ミリ秒（＝24時間）」ではなく、特定の日に短縮・延長されることがあるからです。

const today = new Date();

const tomorrow = new Date(today.getTime() + 86400000); // 1日後を計算

このような操作は簡便ですが、正確性が求められる処理では、setDate()など日付専用メソッドを使った方が安全です。

文字列をDate型に変換したときの注意点

文字列からDateオブジェクトを生成する場合、書式の違いやタイムゾーンの有無によって、出力結果が変わることがあります。

「YYYY-MM-DD」の形式で指定した場合、環境によっては「UTC」と解釈されてしまい、日本時間では9時間ずれることがあるため注意が必要です。

ブラウザや実行環境が日時文字列をどうパースするかに依存しているため、明示的にISO 8601形式（YYYY-MM-DDTHH:mm:ssZ）や数値指定を使う方が安全です。

const d1 = new Date("2025-05-09"); // UTCで解釈される可能性あり

const d2 = new Date(2025, 4, 9); // 明確にローカル時間として解釈される

このように、文字列の解釈は環境差や仕様のクセがあるため、意図したとおりに動作しているか必ず検証する習慣が大切です。

PHPとJavaScriptどっちから学ぶ？連携の値渡しや関数呼び出し、動かない時の対処まで解説

6.よくある処理のサンプル集

JavaScriptで日付を扱う上で、開発者が頻繁に直面するのが「日付の差分計算」や「日付だけを抽出したい」といった実用的な処理です。本章では、そうしたニーズに応えるためのコードサンプルを厳選して紹介します。

日付の比較と差分の計算（日数・時間）

JavaScriptでは、2つの日時の差を求めることで、経過日数や時間を計算することができます。これは予約管理や期限のチェックなど、ビジネスロジックに欠かせない処理です。

Date.getTime()で取得できるミリ秒単位のタイムスタンプを使えば、単純な数値演算で差分が求められます。

const start = new Date('2025-05-01');

const end = new Date('2025-05-09');

const diffTime = end.getTime() - start.getTime();

const diffDays = diffTime / (1000 60 60 * 24);

console.log(diffDays); // 8

// 整数の日数が必要な場合

console.log(Math.floor(diffDays)); // 8（小数点以下切り捨て）

このように、タイムスタンプによる差分計算は日数・時間・分など、さまざまな単位に応用可能です。

「日付のみ」を取り出す方法

多くのケースで「日付（年月日）だけを表示したい」「時刻情報はいらない」という場面があります。

その場合は、getFullYear()・getMonth()・getDate()を組み合わせて出力するかtoISOString()の一部を切り取って使います。

なぜなら、Dateオブジェクトは時刻情報も含み、そのまま表示すると余分なデータが含まれるからです。

const date = new Date();

const yyyy = date.getFullYear();

const mm = String(date.getMonth() + 1).padStart(2, '0');

const dd = String(date.getDate()).padStart(2, '0');

const onlyDate = `${yyyy}-${mm}-${dd}`;

console.log(onlyDate); // 例：2025-05-09

このように、シンプルな日付表示が求められる場合は、明示的に整形することで意図通りの出力が可能です。

今日・明日・1週間後の日付を求める処理

日付の加算処理は、スケジューラーや通知機能などで頻繁に使われます。

JavaScriptでは、setDate()を使うことで日付に任意の日数を加えることが可能です。

setDate()が自動で月末の繰り上がりやうるう年の調整も行ってくれるため、日数の操作が安全かつ簡単にできます。

const today = new Date();

const tomorrow = new Date(today);

tomorrow.setDate(today.getDate() + 1);

const nextWeek = new Date(today);

nextWeek.setDate(today.getDate() + 7);

console.log(tomorrow.toDateString()); // 明日の日付

console.log(nextWeek.toDateString()); // 1週間後の日付

このようにsetDate()を使えば、直感的に日付の加算・減算ができ、日付計算のロジックが非常にスッキリします。

JavaScriptのalert完全ガイド｜自動で閉じる方法や非推奨理由、alert以外の方法を紹介

JavaScript配列完全ガイド｜初期化・追加・操作から配列操作・連想配列まで徹底解説

7.まとめ

JavaScriptで日付や時間を扱う際には、Dateオブジェクトの構造やメソッドの特性やタイムゾーンの影響・フォーマット方法など、押さえておくべきポイントが数多くあります。特に「月は0始まり」「9時間のずれ」「文字列のパースの違い」などは、初心者がつまずきやすい代表的な落とし穴です。本記事で紹介した基本操作や注意点、実践的なサンプルを活用することで、日付処理の精度と保守性を高め信頼性のあるWebアプリケーション開発につなげてください。

本記事が皆様にとって少しでもお役に立てますと幸いです。

「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。

開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。

単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。

自身に最適なフリーランスエージェントを探したい方はこちらよりご確認いただけます。