価格のフォーマット

問題

価格を表示する際には、数値と通貨の両方が関わります。米国の価格は$1,200.50ですが、同じ価値をユーロで表すとドイツでは1 200,50 €となります。通貨記号の位置、小数点の区切り文字、桁区切りの記号はすべて変わり、すべての言語に対してこれらのルールをハードコーディングすることは管理不能です。

解決策

react-intlのFormattedNumberコンポーネントをstyle: 'currency'オプションで使用します。このコンポーネントはプロバイダーから現在のロケールを読み取り、数値を価格として整形し、そのロケールと指定された通貨に合わせて記号の配置、小数点の区切り文字、桁区切りを自動的に処理します。

手順

1. 価格用のクライアントコンポーネントを作成する

react-intlのフォーマットコンポーネントはクライアントコンポーネント内で使用する必要があります。

新しいコンポーネントapp/components/ProductPrice.tsxを作成します。

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

import { FormattedNumber } from 'react-intl';

type Props = {
  price: number;
  currencyCode: string; // 例："USD"、"EUR"、"JPY"
};

export default function ProductPrice({ price, currencyCode }: Props) {
  return (
    <FormattedNumber
      value={price}
      style="currency"
      currency={currencyCode}
    />
  );
}

2. フォーマットオプションを渡す

FormattedNumberコンポーネントは以下のプロップスによって制御されます：

value：価格の数値。
style: 'currency'：これは数値を標準の小数ではなく通貨としてフォーマットするようコンポーネントに指示します。
currency：3文字のISO通貨コード（例：'USD'、'EUR'）。style: 'currency'を使用する場合は必須です。

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

このコンポーネントをサーバーまたはクライアントコンポーネントで使用して価格を表示できるようになりました。

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

export default function Home() {
  const product = {
    price: 1299.99,
    currency: 'USD',
  };

  const productInEuros = {
    price: 1199.5,
    currency: 'EUR',
  };

  return (
    <div>
      <h1>商品</h1>
      <p>
        価格（USD）: <ProductPrice price={product.price} currencyCode={product.currency} />
      </p>
      <p>
        価格（EUR）: <ProductPrice price={productInEuros.price} currencyCode={productInEuros.currency} />
      </p>
    </div>
  );
}

/enにアクセスするユーザーには「Price (USD): $1,299.99」と「Price (EUR): €1,199.50」が表示されます。/esにアクセスするユーザーには「Price (USD): 1299,99 US$」と「Price (EUR): 1199,50 €」が表示されます。