概要

文の数・形を切り替えるために <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-next';

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

フォールバック

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

import { Plural } from 'gt-next';

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

複数形の翻訳

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

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

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

variables を追加する

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

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

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 コンポーネントの詳細はこちらをご覧ください。