ts-intl
チャプター:Web Intl フォーマッター

Web Intl フォーマッター

Intl.NumberFormat や Intl.DateTimeFormat インスタンスの頻繁な生成は、不要なパフォーマンスオーバーヘッドをもたらします。ts-intl は Web 標準の Intl API をカプセル化し、組み込みのインスタンスキャッシュ機構を提供します。

フォーマッターインスタンスの取得

方法 1: createI18n から getFormatter を取得(推奨)

この方法では、グローバル設定で事前設定されたフォーマットルール、タイムゾーン、およびエラーハンドリング設定を直接継承します:

import { createI18n } from "@aaakul/ts-intl";

export const { getTranslations, getFormatter } = createI18n({
  defaultLanguage: "ja-JP",
  formats: {
    number: {
      jpy: { style: "currency", currency: "JPY" },
      compact: { notation: "compact" },
    },
    dateTime: {
      short: { dateStyle: "short" },
    },
  },
  messages: {
    "ja-JP": {},
  },
});

const formatter = getFormatter("ja-JP");

方法 2: 独立した createFormatter(options) の呼び出し

完全な i18n インスタンスに依存しない独立したコンポーネントやユーティリティモジュールに適しています:

import { createFormatter } from "@aaakul/ts-intl";

const formatter = createFormatter({
  locale: "ja-JP",
  formats: {
    number: { jpy: { style: "currency", currency: "JPY" } },
  },
});

コアフォーマット機能

数値と通貨のフォーマット

formatter.number(1234567.89);
// "1,234,567.89"

formatter.number(2500, "jpy");
// "¥2,500"

formatter.number(1200000, "compact");
// "120万"

日付と時刻

formatter.dateTime(new Date(), { dateStyle: "long" });
// "2026年9月18日"

formatter.dateTimeRange(new Date("2026-09-01"), new Date("2026-09-05"));
// "2026/09/01~2026/09/05"

相対時間の計算

時間差に基づいて時間単位を自動的にマッチングします:

const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);
formatter.relativeTime(twoHoursAgo);
// "2 時間前"

リストとローカライズ表示名

formatter.list(["リンゴ", "バナナ", "オレンジ"]);
// "リンゴ、バナナ、オレンジ"

formatter.displayName("en-US", { type: "language" });
// "アメリカ英語"

formatter.displayName("en", { type: "language" });
// "英語"