ロケールフォーマッティング

22.3.1. 日付/時刻フォーマット

日付と時刻は vue-i18n の datetimeFormats 設定を使用してロケールに合わせてフォーマットしなければなりません。

const datetimeFormats = {
  ko: {
    short: { year: 'numeric', month: '2-digit', day: '2-digit' },
    long: { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' },
    full: { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' },
  },
}
const i18n = createI18n({ datetimeFormats })

• 日付/時刻表示には $d() ヘルパーを使用しなければなりません。

• 使用例：$d(new Date(), 'short') -> 2026. 03. 01.、$d(new Date(), 'long') -> 2026年3月1日 日曜日

• 最低 short、long、full の 3 つの形式を定義しなければなりません。

• すべてのサポートロケールに対して同一の形式名を定義しなければなりません。

• 日付文字列を直接組み立て（YYYY-MM-DD）せず、必ずフォーマットヘルパーを通じて出力しなければなりません。

---

22.3.2. 数値/通貨フォーマット

数値と通貨は vue-i18n の numberFormats 設定を使用してロケールに合わせてフォーマットしなければなりません。

const numberFormats = {
  ko: {
    currency: { style: 'currency', currency: 'KRW' },
    decimal: { style: 'decimal', maximumFractionDigits: 2 },
    percent: { style: 'percent', maximumFractionDigits: 1 },
  },
}
const i18n = createI18n({ numberFormats })

• 数値表示には $n() ヘルパーを使用しなければなりません。

• 使用例：$n(1234567, 'currency') -> ₩1,234,567、$n(0.856, 'percent') -> 85.6%

• currency、decimal、percent の 3 つの形式を必須で定義しなければなりません。

• 通貨コード（currency）はロケールごとに適切な値を設定しなければなりません。

• 数値を直接 toLocaleString() でフォーマットせず、$n() ヘルパーを通じて出力しなければなりません。

---

22.3.3. 相対時間

相対時間表現（「3分前」、「2日後」）は Intl.RelativeTimeFormat を活用して実装しなければなりません。

// src/composables/useTimeAgo.ts
import { computed, type Ref } from 'vue'
import { useI18n } from 'vue-i18n'

export function useTimeAgo(date: Ref<Date>) {
  const { locale } = useI18n()
  return computed(() => {
    const diff = date.value.getTime() - Date.now()
    const abs = Math.abs(diff)
    const rtf = new Intl.RelativeTimeFormat(locale.value, { numeric: 'auto' })
    if (abs < 60_000) return rtf.format(Math.round(diff / 1000), 'second')
    if (abs < 3_600_000) return rtf.format(Math.round(diff / 60_000), 'minute')
    if (abs < 86_400_000) return rtf.format(Math.round(diff / 3_600_000), 'hour')
    return rtf.format(Math.round(diff / 86_400_000), 'day')
  })
}

• 相対時間表現のための useTimeAgo composable をプロジェクト内に実装して再利用しなければなりません。
• 文字列を直接組み立て（「3分前」）せず、Intl.RelativeTimeFormat を使用しなければなりません。
• numeric: 'auto' オプションを使用して「昨日」、「明日」などの自然な表現を生成することを推奨します。

---

22.3.4. Intl API 活用

ブラウザ内蔵の Intl API を活用してロケールベースのフォーマッティングを実行しなければなりません。

API	用途
Intl.DateTimeFormat	日付/時刻フォーマット
Intl.NumberFormat	数値/通貨フォーマット
Intl.RelativeTimeFormat	相対時間表現
Intl.Collator	文字列ソート

• 文字列ソート時に Intl.Collator を使用してロケールに合ったソート順序を適用しなければなりません。

const collator = new Intl.Collator('ko', { sensitivity: 'base' })
const sorted = names.sort(collator.compare)

• すべてのモダンブラウザでサポートされているため、ポリフィルなしで使用できます。
• カスタムフォーマット関数の代わりに Intl API を優先的に使用しなければなりません。