数値のフォーマット

問題

10000.5のような大きな数値は、ドイツでは10.000,5と表記され、米国では10,000.5と表記されます。ある地域の表記規則を使用して数値を表示すると、他の地域のユーザーに混乱を招き、小数点記号や桁区切り記号が正しくないために値を誤って解釈する可能性があります。

解決策

react-intlのFormattedNumberなどの専用フォーマットコンポーネントを使用します。このコンポーネントは、プロバイダーから現在の言語を自動的に読み取り、numberプリミティブを、正しいロケール固有の小数点記号と桁区切り記号を使用した文字列にフォーマットします。

手順

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

他のreact-intlコンポーネントと同様に、FormattedNumberはクライアントコンポーネント内で使用する必要があります。

フォーマットされた数値を表示する新しいコンポーネントapp/components/ProductInfo.tsxを作成します。

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

import { FormattedNumber } of 'react-intl';

type Props = {
  reviewCount: number;
  averageRating: number;
};

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>Product details</h3>
      <p>
        Total reviews:
        {/* Basic number formatting */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        Average rating:
        {/* Formatting with options */}
        <FormattedNumber
          value={averageRating}
          minimumFractionDigits={1}
          maximumFractionDigits={1}
        />
      </p>
    </div>
  );
}

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

FormattedNumberコンポーネントは、出力を制御するオプションを受け取ります。

valueは、フォーマットするnumberです。
minimumFractionDigitsとmaximumFractionDigitsは、小数点以下1桁の表示を強制するために使用されます(例:4.0)。

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

これで、製品情報を表示する任意のページでこのコンポーネントを使用できます。

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

export default function Home() {
  const product = {
    reviews: 1234567,
    rating: 4.0,
  };

  return (
    <div>
      <h1>Welcome</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

/enにアクセスしたユーザーには「Total reviews: 1,234,567」と「Average rating: 4.0」が表示されます。/esにアクセスしたユーザーには「Total reviews: 1.234.567」と「Average rating: 4,0」が表示されます。