JavaScriptの日付をきれいに表示する方法！toLocaleDateStringやIntlで日時をフォーマットする
生徒
「日付を『2025年11月18日』みたいに見やすく表示したいんです。JavaScriptで簡単にできますか？」
先生
「できます。JavaScriptには日付や時刻を人が読みやすい文字列に変える仕組みがいくつかあります。まずは標準の toLocaleDateString を覚えると良いですよ。」
生徒
「他にも方法がありますか？日本語で表示したり、年月日や曜日を細かく指定したいです。」
先生
「はい。toLocaleDateString や toLocaleTimeString、さらに Intl.DateTimeFormat を使うと柔軟にフォーマットできます。順を追って見ていきましょう。」
1. 日時のフォーマットとは？（初心者向けの例え）
日時のフォーマットとは、「内部の日時データ」を人が読みやすい形に変えることです。 たとえば同じ日時でも「2025/11/18」「2025年11月18日」「Nov 18, 2025」など表示のしかたがいろいろあります。 フォーマットを使うことで、目的に合った見せ方ができ、ユーザーに優しい表示が可能になります。
2. toLocaleDateString の基本（簡単で便利）
toLocaleDateString は、ブラウザやOSの地域設定に合わせて日付を表示してくれます。日本語表示にしたいときはロケールに "ja-JP" を指定します。
const d = new Date();
console.log(d.toLocaleDateString("ja-JP"));
2025/11/18
オプションを渡せば「年だけ」「月だけ」「曜日付き」など細かく指定できます。次で見ていきます。
3. toLocaleDateString のオプション指定例
オプションで出力形式を指定すると、日本語の年表記や０埋めなどをコントロールできます。下はよく使う例です。
const d = new Date();
console.log(d.toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric" }));
// 例: 2025年11月18日
console.log(d.toLocaleDateString("ja-JP", { weekday: "long", year: "numeric", month: "short", day: "numeric" }));
// 例: 2025年11月18日火曜日
month は "numeric"（数字）や "long"（「11月」や「November」）を選べます。
weekday によって曜日を表示できます。
4. toLocaleTimeString と toLocaleString（時刻や日時一体）
時刻だけ表示したいときは toLocaleTimeString、日時まとめて表示したいときは toLocaleString を使います。
const now = new Date();
console.log(now.toLocaleTimeString("ja-JP")); // 例: 14:05:09
console.log(now.toLocaleString("ja-JP")); // 例: 2025/11/18 14:05:09
これらもオプションで秒を表示するかどうか、24時間表示にするかなど細かく指定できます。
5. Intl.DateTimeFormat を使った柔軟なフォーマット
より細かい制御が必要なときは Intl.DateTimeFormat を使います。
フォーマッタを作って何度も使えるので、共通の表示ルールを適用したい場合に便利です。
const fmt = new Intl.DateTimeFormat("ja-JP", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false
});
console.log(fmt.format(new Date())); // 例: 2025/11/18 14:05:09
hour12 を false にすると 24時間表示になります。複数言語対応にも向いています。
6. 自分でフォーマットを作る（手動整形）
標準関数で十分な場合が多いですが、独自の表示ルールが必要なら年月日を取り出して自分で組み立てることもできます。 次はゼロ埋めして好みの形にする例です。
const d = new Date();
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
console.log(`${y}年${m}月${day}日`); // 例: 2025年11月18日
手動整形は自由度が高い反面、言語や地域ごとの違いを自分で考慮する必要があります。
7. よくある注意点（タイムゾーンや互換性）
タイムゾーン によって表示が変わることがあります。ブラウザは通常ユーザーの地域設定を使うため、サーバー時間と異なる場合があります。
また古いブラウザだと Intl が使えないケースがあるため、サポートが必要ならポリフィルやライブラリ（例: date-fns や Day.js）を検討してください。
8. 実行結果のサンプル
2025年11月18日
14:05:09
2025/11/18 14:05:09
実際の表示は環境や時間によって変わりますが、上の方法で簡単に読みやすい日時表示が作れます。
