JavaScriptでライブラリなしに日付をフォーマットする方法

はじめに

JavaScriptで日付を扱っているときに、フォーマットのためだけにライブラリを入れるのは面倒ですよね。そんな時にある方法を使うとライブラリを使わずに簡単にフォーマットができるので紹介していきます。

基本の使い方

Intl.DateTimeFormatを使います。ドキュメントはこちら

const date = new Date("2025-10-19T12:00:00");

const formatter = new Intl.DateTimeFormat("ja-JP");
console.log(formatter.format(date));
// => 2025/10/19

日本語ロケール (ja-JP) では、デフォルトで「YYYY/MM/DD」形式になります。

ロケールを変える

ロケールを変えることもできます

const date = new Date("2025-10-19T12:00:00");

console.log(new Intl.DateTimeFormat("en-US").format(date));
// => 10/19/2025
console.log(new Intl.DateTimeFormat("de-DE").format(date));
// => 19.10.2025

時間のカスタマイズ

日時をフルで表示する方法

第2引数のoptionsを使うと、年月日や時刻の表示を自由にカスタマイズできます。
使える引数はこちらから確認できます

const date = new Date("2025-10-19T12:00:00");

const formatter = new Intl.DateTimeFormat("ja-JP", {
  year: "numeric",
  month: "long",
  day: "numeric",
  weekday: "long",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
});

console.log(formatter.format(date));
// => 2025年10月19日日曜日 12:00:00

時間だけを表示する方法

const date = new Date("2025-10-19T12:00:00");

const formatter = new Intl.DateTimeFormat("ja-JP", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
});

console.log(formatter.format(date));
// => 12:00:00

タイムゾーンを指定する

基本の方法

const date = new Date("2025-10-19T09:00:00Z");

const tokyo = new Intl.DateTimeFormat("ja-JP", {
  timeZone: "Asia/Tokyo",
  timeStyle: "full",
  dateStyle: "full",
});
console.log("🇯🇵 Tokyo:", tokyo.format(date));
// => Tokyo: 2025年10月19日日曜日 18時00分00秒 日本標準時

const ny = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  timeStyle: "full",
  dateStyle: "full",
});
console.log("🇺🇸 New York:", ny.format(date));
// => 🇺🇸 New York: Sunday, October 19, 2025 at 5:00:00 AM Eastern Daylight Time

おまけ

日付時間のみを出しつつタイムゾーンを指定する方法

const date = new Date("2025-10-19T09:00:00Z");

const tokyo = new Intl.DateTimeFormat("ja-JP", {
  timeZone: "Asia/Tokyo",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
});
console.log("🇯🇵 Tokyo:", tokyo.format(date));
// => 🇯🇵 Tokyo: 2025年10月19日 18:00:00

const ny = new Intl.DateTimeFormat("en-US", {
  timeZone: "America/New_York",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
});
console.log("🇺🇸 New York:", ny.format(date));
// => 🇺🇸 New York: October 19, 2025 at 05:00:00 AM

独自のフォーマットをする方法

独自のフォーマット、例えばスペースなしで YYYYMMDD_HHMMSS 形式にしたいときなどはこのようにします。
formatToPartsを使うことで、日付の各要素（年、月、日など）を個別に取得できるため、それらを組み合わせて独自の文字列を生成することができます。

const date = new Date("2025-10-19T09:00:00Z");

const parts = new Intl.DateTimeFormat("ja-JP", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
}).formatToParts(date);

const values = Object.fromEntries(parts.filter(p => p.type !== "literal").map(p => [p.type, p.value]));

const custom = `${values.year}${values.month}${values.day}_${values.hour}${values.minute}${values.second}`;
console.log(custom);
// => 20251019_180000

終わりに

以上でJavaScriptでライブラリなしに日付をフォーマットする方法の紹介を終わります。
ここに出てこないようなフォーマットをしたい場合は、ライブラリの導入を検討すると良いでしょう。