概要

数に応じた文の変化を扱うために <Plural> コンポーネントを使用します。 次の2つの文の違いを考えてみましょう: "You have one item." と "You have two items."

英語では、アイテム数に応じて2種類の文を定義する必要があります。 言語によっては、最大で6種類定義しなければならない場合もあります。

const count = 1;
<Plural n={count}
  singular={アイテムが1件あります。}
  plural={アイテムが複数あります。}
/>

リファレンス

Props

[key]: string 構文は、想定される複数形ルールの分岐を表す任意のキーを示します。 たとえば、singular や plural といった分岐をパラメータとして追加できます。

説明

戻り値

JSX.Element。n の複数形に対応する内容、またはフォールバック内容を含みます。

例外

n が指定されていない、または有効な数値ではない場合に Error をスローします。

どのフォームを追加すべきですか？

対象言語の複数形フォームだけを使えば十分です。

使用可能なフォームは次のとおりです: "singular", "plural", "dual", "zero", "one", "two", "few", "many", "other"。

• "en-US" を使う開発者は、"singular" と "plural" の2つのみを使用します。
• "zh-CN" の開発者は、"other" のみを使用します。

各フォームの詳細はこちらをご覧ください。

例

基本的な使い方

<Plural> コンポーネントを使用して複数形ルールを扱います。

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} 
      singular={アイテムが1件あります。}
      plural={アイテムが複数あります。}
    />
  );
}

フォールバック

n に渡された value に一致する分岐がない場合に備え、フォールバックを指定できます。

import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={アイテムが1件あります。}
    >
      複数のアイテムがあります。 // [!code highlight]
    </Plural>
  );
}

複数形の翻訳

翻訳するには、<T> コンポーネントを追加するだけです。

import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      singular={アイテムが1件あります。} 
      plural={アイテムが複数あります。} 
    />
  );
}

variables を追加する

複数形の文にいくつかの variables を追加したい場合はどうすればよいですか？

import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      singular={<Num>{count}</Num> 個のアイテムがあります。} 
      plural={<Num>{count}</Num> 個のアイテムがあります。} 
    />
  );
}

<T> コンポーネント内では、動的なコンテンツはすべて <Currency>、<DateTime>、<Num>、または <Var> で包んでください。

<T id="itemCount">
  <Plural n={count}
    singular={アイテムは<Num>{count}</Num>件です。} 
    plural={アイテムは<Num>{count}</Num>件です。} 
  />
</T>

補足

• <Plural> コンポーネントは複数形ルールの処理に使用します。
• 利用可能な複数形の分岐（例: one、other、few、many）は locale に依存し、Unicode CLDR の複数形ルールに準拠します。

次のステップ

• さらに多くの例は、ブランチコンポーネントのリファレンスドキュメントをこちらでご覧ください。
• より高度な使い方として、<Plural> を <Currency>、<DateTime>、<Num>、<Var> などの Variable コンポーネントと組み合わせて使用します。Variable コンポーネントの詳細はこちらをご参照ください。