TanStack Start v1で通貨情報を表示する方法

問題

アプリケーションでは、フォーマットされた価格を表示せずに通貨情報を表示する必要がよくあります。通貨セレクターでは利用可能な通貨をリスト表示し、為替レートに関する記事では特定の通貨を記号で参照し、金融ダッシュボードでは通貨コードを表示することがあります。しかし、それぞれの表現には制限があります。「USD」のようなISOコードは正確ですが、技術者以外のユーザーには分かりにくいです。「米ドル」のような完全な名称は明確ですが、国際的なユーザーには翻訳が必要です。「$」のような記号は馴染みがありますが曖昧です。同じ記号が米ドル、カナダドル、オーストラリアドルを表します。コンテキストに対して誤った形式を選択すると、明確性が低下し、ユーザーを混乱させる可能性があります。

この課題はローカライゼーションによってさらに複雑になります。英語で機能する通貨名が他の言語では存在しないか、誤っている可能性があります。ある地域で標準的な記号が別の地域では馴染みがない場合があります。一貫したロケール対応のアプローチがなければ、アプリケーションは単一言語で通貨表現をハードコードするか、すぐに古くなる大規模な翻訳テーブルを維持することになります。

解決策

ブラウザの組み込み国際化APIを使用して、ユーザーのロケールとコンテキストの両方に一致する形式で通貨情報を表示します。Intl.DisplayNames APIはローカライズされた完全な通貨名を提供し、Intl.NumberFormatをcurrencyDisplayオプションと共に使用すると、通貨記号またはコードを抽出できます。コンテキストに基づいて適切なAPIとフォーマットオプションを選択することで、翻訳データを維持することなく、通貨参照が明確かつ適切にローカライズされることを保証します。

通貨コードとロケールを受け取り、適切な表現を返す小さな再利用可能なコンポーネントまたはヘルパー関数を作成します。このアプローチにより、通貨表示ロジックが一元化され、アプリケーション全体で同じ通貨を異なる形式で簡単に表示できるようになります。

手順

1. ローカライズされた通貨名を取得するヘルパーを作成する

Intl.DisplayNames APIにtype: "currency"を指定すると、任意のISO 4217通貨コードに対してローカライズされた完全な通貨名が返されます。

export function getCurrencyName(currencyCode: string, locale: string): string {
  const displayNames = new Intl.DisplayNames([locale], { type: "currency" });
  return displayNames.of(currencyCode) || currencyCode;
}

このヘルパーは3文字のISO通貨コードを受け取り、ユーザーの言語で完全な名称を返します。簡潔さよりも明確さが重要な通貨セレクターや説明テキストで使用してください。

2. 通貨記号を抽出するヘルパーを作成する

Intl.NumberFormatのcurrencyDisplayオプションは、通貨の表示方法を制御し、「code」、「symbol」、「narrowSymbol」、「name」の値を持ちます。

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
  narrow: boolean = false,
): string {
  const formatter = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: narrow ? "narrowSymbol" : "symbol",
  });

  const parts = formatter.formatToParts(0);
  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart?.value || currencyCode;
}

このヘルパーはゼロ値をフォーマットし、通貨記号のみを抽出します。narrowパラメータは、「$」のようなコンパクトな記号を使用するか、「US$」のような明確化された記号を使用するかを制御します。テーブルやチャートなどのコンパクトなUI要素で記号を使用してください。

3. 通貨情報を表示するコンポーネントを作成する

display propに基づいて、任意の形式で通貨情報をレンダリングできる柔軟なコンポーネントを構築します。

interface CurrencyDisplayProps {
  code: string;
  locale: string;
  display: "name" | "symbol" | "narrowSymbol" | "code";
}

export function CurrencyDisplay({
  code,
  locale,
  display,
}: CurrencyDisplayProps) {
  let content: string;

  if (display === "name") {
    content = getCurrencyName(code, locale);
  } else if (display === "code") {
    content = code.toUpperCase();
  } else {
    content = getCurrencySymbol(code, locale, display === "narrowSymbol");
  }

  return <span>{content}</span>;
}

このコンポーネントは通貨表示ロジックを一元化し、形式の切り替えを容易にします。ドロップダウンや説明テキストには"name"を、コンパクトな表示には"symbol"または"narrowSymbol"を、精度が必要な場合は"code"を使用してください。

4. TanStack Startルートでコンポーネントを使用する

任意のルートコンポーネントでコンポーネントをインポートして使用し、i18nコンテキストまたはルートローダーからユーザーのロケールを渡します。

import { createFileRoute } from "@tanstack/react-router";
import { CurrencyDisplay } from "~/components/CurrencyDisplay";

export const Route = createFileRoute("/currencies")({
  component: CurrenciesPage,
});

function CurrenciesPage() {
  const locale = "en-US";

  return (
    <div>
      <h1>Currency Information</h1>
      <p>
        Full name: <CurrencyDisplay code="USD" locale={locale} display="name" />
      </p>
      <p>
        Symbol: <CurrencyDisplay code="USD" locale={locale} display="symbol" />
      </p>
      <p>
        Code: <CurrencyDisplay code="USD" locale={locale} display="code" />
      </p>
    </div>
  );
}

このコンポーネントは同じ通貨を異なる形式でレンダリングします。実際のアプリケーションでは、i18nプロバイダーまたはルートコンテキストからロケールを取得し、すべての通貨表示がユーザーの言語設定を尊重するようにしてください。