ライブラリを使わずにJavaScriptで日付を整形する方法を紹介します。実際に動くIntl.DateTimeFormatのビルダー、YYYY-MM-DDやMM/DD/YYYY形式のコード、タイムゾーン、相対時間、期間の表示、そして日付が1日ずれるバグの原因になる解析の落とし穴まで解説します。
JavaScriptで日付を整形するには、Intl.DateTimeFormatか、日付をロケールに合わせた文字列に変換するメソッドを使い、ロケールとオプションを渡します。たとえば、ロケールにアメリカ英語を、日付のスタイルに長い形式を指定すると、March 5, 2026のように表示されます。APIに日付を渡すときはISO形式の文字列に変換するメソッドを、別のタイムゾーンで表示したいときはタイムゾーンのオプションを、「3日前」のような表現にはIntl.RelativeTimeFormatを使います。
すぐにわかる答え
ビルダーでロケールとオプションを選んだら、書き出されたコードをそのままコピーしてください。プレビューに表示されるのは、お使いのブラウザー自身が整形した結果です。その下には、日常的によく使う日付の形式をまとめた一覧表と、タイムゾーン、相対時間、期間の表示について、実際に実行して試せるコード例を用意しています。
現地時刻の年、1を足した月、日をそれぞれ取り出し、文字列の先頭を埋めるメソッドで2桁にそろえてから、ハイフンでつなぎます。ISO形式の文字列の先頭10文字を切り出す方法でも同じ形になりますが、こちらはUTCで計算されるため、深夜0時の前後には違う日付が表示されてしまうことがあります。
new Date("2026-03-05")は、UTCの午前0時として読み込まれます。グリニッジより西の地域では、その瞬間は現地時刻ではまだ4日です。現地時刻の午前0時を得るには、時刻付きの文字列（"2026-03-05T00:00"）で解析するか、new Date(2026, 2, 5)のように作成してください。
日付を整形するためだけなら、もう必要ありません。最近のブラウザーではどれも、Intlがロケール、タイムゾーン、相対時間に対応しています。Momentのメンテナー自身も、これをレガシーなプロジェクトだと説明しています。日付の計算が必要な場合は、date-fnsのような小さなライブラリや、利用できる環境であれば新しいTemporal APIが便利です。
タイムゾーンのオプションに、IANAで定められた名前を指定して渡します。たとえば{ timeZone: "America/New_York", timeStyle: "short" }のように書きます。Dateオブジェクトが表している瞬間そのものは変わらず、変わるのは画面での書き表し方だけです。
よく使う形式と、それぞれのコード
日付だけのISO形式の文字列はUTCの午前0時として読み込まれますが、時差の指定がない日時の文字列は現地時刻として読み込まれます。この小さな違いが、日付が1日ずれてしまうバグのほとんどの原因になっています。
現地時刻の年・月・日の各部分を取り出し、先頭を0で埋めて組み立てます。カナダ英語のロケールを使う方法でも同じ結果になりますが、そのロケールの形式が今後も変わらないことが前提になります。
タイムゾーンのオプションにはIANAの名前を指定します。Dateオブジェクト自体はタイムゾーンを持っておらず、変わるのは整形の仕方だけです。なお、タイムゾーン名を表示するオプションは、日付や時刻のスタイルのオプションとは一緒に使えません。
単位を表す言葉はIntl.RelativeTimeFormatが書いてくれるので、どの単位を使うかだけを自分で選びます。このヘルパー関数は、当てはまる単位の中から最も大きなものを自動で選びます。
期間を整形するメソッドは、繰り返しになる部分を自動で省いてくれます。そのため、同じ月の5日から9日までの予約も、自然な表記で表示できます。
用意されたスタイルではうまく合わないときは、ロケールに合わせて整形された各部分を取り出し、自分で好きなように並べます。たとえば、日を月よりも大きく表示したい場合に使えます。
エポック秒を扱っているなら、こちらを使ってください：
ビルダーで使っているIntl.DateTimeFormatのオプション
（なし）
（あなたのタイムゾーン）
エラー：{msg}
日付と時刻
ロケール
タイムゾーン
モード
用意されたスタイル
各部分を選ぶ
コードをコピー
無料で始める · クレジットカード不要