通貨名と記号の表示

問題

アプリケーションで「USD」などの通貨を参照する必要があります。このコードをそのまま表示するだけでは分かりにくいです。「US Dollar」のようなフルネームを表示する方が良いですが、この名前自体も翻訳が必要です(「dólar estadounidense」、「Dollar américain」)。さらに、正しい記号($、US$、CA$)は文脈がないと曖昧になる可能性があります。

解決策

react-intlのFormattedNumberコンポーネントをcurrencyDisplayオプションと共に使用します。これにより、通貨を記号(デフォルト)、ローカライズされたフルネーム、またはISOコードとして表示でき、すべて現在のロケールに合わせて正しくフォーマットされます。

手順

1. 通貨表示用のクライアントコンポーネントを作成する

FormattedNumberコンポーネントはクライアントコンポーネント内で使用する必要があります。app/components/LocalizedCurrency.tsxファイルを作成し、currencyDisplayオプションをpropとして受け取るようにして、再利用可能にします。

// app/components/LocalizedCurrency.tsx
'use client';

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

このコンポーネントは、currencyDisplayオプションを直接制御するdisplayAs propを受け取るようになりました。

2. ページでコンポーネントを使用する

displayAs propを変更することで、このコンポーネントをページで使用して異なる通貨フォーマットを表示できます。

// app/[lang]/page.tsx
import LocalizedCurrency from '@/app/components/LocalizedCurrency';

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>Currency Display Options</h1>
      <p>
        Default (symbol):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        Full name (name):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        ISO code (code):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

/enにアクセスすると、「name」オプションで「1,250.75 US dollars」と表示されます。/esにアクセスすると、同じ行が「1.250,75 dólares estadounidenses」としてレンダリングされ、通貨名自体が翻訳され、正しくフォーマットされていることが分かります。