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

問題

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

解決策

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

手順

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

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

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 propに基づいて出力を適応させます。

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

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

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

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

  return (
    <div>
      <h2>対応通貨</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 ($)」（フランス語）のように、ユーザーのロケールに自動的に適応する、ローカライズされた通貨名とそのシンボルがレンダリングされます。