概要

文の数・形を切り替えるために <Plural> コンポーネントを使用します。 次の文の違いを考えてみてください: "You have one item." と "You have two items."

英語では、アイテムの数に応じて2通りの文を用意する必要があります。 言語によっては、最大で6通りまで定義する必要があります。

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

リファレンス

Props

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

説明

返り値

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

例外

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}
      singular={アイテムが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>個のアイテムがあります。} 
    />
  );
}

When inside of a <T> component, wrap all dynamic content with a <Currency>, <DateTime>, <Num>, or <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> といった変数コンポーネントと組み合わせて使用します。変数コンポーネントの詳細はこちらをご覧ください。