JavaScript日付フォーマット（簡易）の基本と実践
最短で「YYYY-M-D」などの文字列にしたいなら、Dateの各値を取り出してテンプレートリテラルで組み立てます。月は0始まりなので「+1」を忘れないのがコツです。
基本の考え方
const d = new Date();
const str = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
console.log(str); // 例: "2025-12-5"
- 月は0始まり: 1月=0、12月=11。表示時は
+1が必須。 - そのままだとゼロ埋めなし: 12-5-3のように「一桁」がそのまま出る。見栄えを揃えるならゼロ埋め関数を使う。
すぐ使えるテンプレート集
// 1) YYYY-MM-DD（ゼロ埋めあり）
const d = new Date();
const pad2 = n => String(n).padStart(2, "0");
const y = d.getFullYear();
const m = pad2(d.getMonth() + 1);
const day = pad2(d.getDate());
console.log(`${y}-${m}-${day}`); // 例: "2025-12-05"
// 2) YYYY/MM/DD HH:MM（ゼロ埋めあり）
const h = pad2(d.getHours());
const mi = pad2(d.getMinutes());
console.log(`${y}/${m}/${day} ${h}:${mi}`); // 例: "2025/12/05 09:43"
// 3) 日本語表記（YYYY年MM月DD日）
console.log(`${y}年${m}月${day}日`); // 例: "2025年12月05日"
// 4) コンパクト（YYYYMMDD）
console.log(`${y}${m}${day}`); // 例: "20251205"
// 5) 任意区切り文字を自由に
const sep = ".";
console.log(`${y}${sep}${m}${sep}${day}`); // "2025.12.05"
- ポイント: ゼロ埋め関数を1つ用意しておくと、どの形式にも簡単に対応できます。
実務で便利なフォーマッタ関数
function formatDate(d, fmt = "YYYY-MM-DD") {
const pad2 = n => String(n).padStart(2, "0");
const map = {
YYYY: String(d.getFullYear()),
MM: pad2(d.getMonth() + 1),
M: String(d.getMonth() + 1),
DD: pad2(d.getDate()),
D: String(d.getDate()),
HH: pad2(d.getHours()),
mm: pad2(d.getMinutes()),
ss: pad2(d.getSeconds()),
};
return fmt.replace(/YYYY|MM|M|DD|D|HH|mm|ss/g, t => map[t]);
}
// 使用例
const d = new Date();
console.log(formatDate(d)); // "2025-12-05"
console.log(formatDate(d, "YYYY/MM/DD")); // "2025/12/05"
console.log(formatDate(d, "YYYY年M月D日")); // "2025年12月5日"
console.log(formatDate(d, "HH:mm")); // "09:43"
- ポイント: プレースホルダ置換で柔軟に。必要になったらトークンを追加して拡張できます。
バリエーションとロケール整形
- 簡単にロケール準拠で整形したい:
- ポイント: toLocaleDateStringはロケールと書式を任せたいときに便利。
console.log(new Date().toLocaleDateString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit" }));
// 例: "2025/12/05"
- 曜日を付けたい:
const weekdays = ["日","月","火","水","木","金","土"];
const d = new Date();
console.log(`${formatDate(d, "YYYY/MM/DD")}（${weekdays[d.getDay()]}）`);
// 例: "2025/12/05（金）"
- 時間込みの日本式:
const d = new Date();
console.log(`${formatDate(d, "YYYY年MM月DD日 HH:mm:ss")}`);
よくある落とし穴と対策
- 月の+1を忘れる:
getMonth()は0〜11。- 対策: 取り出した瞬間に
+1、フォーマッタ関数に閉じ込める。
- 対策: 取り出した瞬間に
- ゼロ埋め不足で見栄えが崩れる: 1桁の月・日・時・分・秒。
- 対策:
padStart(2,"0")を共通関数で使い回す。
- 対策:
- タイムゾーン差で意図と違う日付に: 深夜付近でUTCとのズレ。
- 対策: 表示はローカルを使う（
toLocaleString）、保存はISO（UTC）。計算と表示を分ける。
- 対策: 表示はローカルを使う（
- 複雑な書式の手書きが増える: 曜日、週番号、タイムゾーンオフセットなど。
- 対策: 自作の簡易フォーマッタは基本だけに絞り、複雑要件はIntlや軽量ライブラリ（dayjs/date-fnsなど）を検討。
練習問題（手を動かして覚える）
// 1) 今日を "YYYY-MM-DD" で
console.log(formatDate(new Date(), "YYYY-MM-DD"));
// 2) 今日を "YYYY/MM/DD HH:mm:ss" で
console.log(formatDate(new Date(), "YYYY/MM/DD HH:mm:ss"));
// 3) 曜日付きの日本式
const d = new Date();
const w = ["日","月","火","水","木","金","土"][d.getDay()];
console.log(`${formatDate(d, "YYYY年MM月DD日")}（${w}）`);