日付を「〇年〇月〇日」形式で表示する方法（React/TypeScript）

個人開発の中で、日付や金額を “日本語らしく” 表示する方法 を学んだので共有します！

日付が 2025-09-30 のままだと、ちょっと読みにくいですよね。
また金額が 50000 では、パッと金額感が伝わらないことも…。

そんなときに使えるのが Intl.DateTimeFormat と Intl.NumberFormat
これを使えば 2025年9月30日 や ¥50,000 のように、
グッと読みやすく整えることができます！

---

📌 使用ツール

• React
• TypeScript
• Intl（JavaScript標準API）

---

📌 導入手順

① 日付を「2025年9月30日」形式に変換する関数を定義

const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return new Intl.DateTimeFormat("ja-JP", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);
};

② 金額を「¥50,000」形式に変換する関数を定義

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat("ja-JP", {
    style: "currency",
    currency: "JPY",
    maximumFractionDigits: 0,
  }).format(amount);
};

③ 実行例を確認する

formatDate("2025-09-30");
// → "2025年9月30日"

formatCurrency(50000);
// → "¥50,000"

---

📌 まとめ

日付や金額は、Intl.DateTimeFormat / Intl.NumberFormat を使えば「日本語らしい表記」で見せられます。
UIをちょっと整えるだけで、印象がガラッと変わるのでおすすめです！
ぜひコピーして活用してください！！