Next.js（Pages Router）v16で通貨情報を表示する方法

問題

アプリケーションでは、実際の価格を表示せずに通貨情報を表示する必要がよくあります。通貨セレクターでは利用可能な通貨をリスト表示し、ドキュメントでは為替レートを参照し、支払いフォームでは受け付け可能な通貨を表示する場合があります。単に「USD」と表示するだけでは技術者以外のユーザーにとって分かりにくく、「US Dollar」とハードコーディングすると手動での翻訳とメンテナンスが必要になります。「$」のような通貨記号は曖昧です。同じ記号が米ドル、カナダドル、オーストラリアドルを表します。適切な表現は、コンテキストとユーザーの言語の両方に依存します。

解決策

react-intlのフォーマット機能を使用して、コンテキストに合った形式で通貨情報を表示します。完全な通貨名を表示するには、通貨タイプを指定したformatDisplayNameを使用します。これにより「US Dollar」のような名称がユーザーの言語に自動的にローカライズされます。記号を表示するには、formatToPartsを指定したIntl.NumberFormatを使用して、指定された通貨コードのローカライズされた記号を抽出します。ISOコードの場合は、コードを直接表示します。このアプローチにより、手動での翻訳作業なしに、通貨参照が明確かつ適切にローカライズされます。

手順

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

formatToPartsを指定したIntl.NumberFormatを使用して、フォーマットされた数値から通貨記号を抽出します。

export function getCurrencySymbol(
  currencyCode: string,
  locale: string,
): string {
  const parts = new Intl.NumberFormat(locale, {
    style: "currency",
    currency: currencyCode,
    currencyDisplay: "narrowSymbol",
  }).formatToParts(0);

  const currencyPart = parts.find((part) => part.type === "currency");
  return currencyPart ? currencyPart.value : currencyCode;
}

currencyDisplayオプションは形式を制御します。「symbol」、「narrowSymbol」、「code」、または「name」を指定できます。このヘルパーは、任意の通貨コードに対してローカライズされた記号を返します。

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

表示モードに基づいて、さまざまな形式で通貨情報を表示するコンポーネントを構築します。

import { useIntl } from "react-intl";
import { useRouter } from "next/router";
import { getCurrencySymbol } from "../utils/getCurrencySymbol";

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

export default function CurrencyDisplay({
  currencyCode,
  display,
}: CurrencyDisplayProps) {
  const intl = useIntl();
  const router = useRouter();
  const locale = router.locale || "en";

  if (display === "symbol") {
    const symbol = getCurrencySymbol(currencyCode, locale);
    return <span>{symbol}</span>;
  }

  if (display === "name") {
    const name = intl.formatDisplayName(currencyCode, { type: "currency" });
    return <span>{name}</span>;
  }

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

type: 'currency'を使用したformatDisplayNameメソッドは、ローカライズされた通貨名を返します。このコンポーネントは、displayプロパティに基づいて出力を調整します。

3. さまざまなコンテキストでコンポーネントを使用する

価格を表示せずに通貨情報を表示する必要がある場所で、通貨表示コンポーネントを適用します。

import CurrencyDisplay from "../components/CurrencyDisplay";

export default function PaymentOptions() {
  const acceptedCurrencies = ["USD", "EUR", "GBP", "JPY"];

  return (
    <div>
      <h2>Accepted Currencies</h2>
      <ul>
        {acceptedCurrencies.map((code) => (
          <li key={code}>
            <CurrencyDisplay currencyCode={code} display="name" />
            {" ("}
            <CurrencyDisplay currencyCode={code} display="symbol" />
            {")"}
          </li>
        ))}
      </ul>
    </div>
  );
}

これにより、英語では「US Dollar ($)」、フランス語では「Dollar américain ($)」など、ローカライズされた通貨名とその記号がレンダリングされ、ユーザーのロケールに自動的に適応します。