# gt-react: General Translation React SDK: Plural
URL: https://generaltranslation.com/ja/docs/react/api/components/plural.mdx
---
title: Plural
description: Plural コンポーネントの API リファレンス
---

{/* 自動生成: 直接編集しないでください。代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`<Plural>` コンポーネントは、数に応じて文を変化させる場合に使用します。
たとえば、&quot;You have one item.&quot; と &quot;You have two items.&quot; の違いを考えてみてください。

英語では、アイテム数に応じて 2 種類の文を定義する必要があります。
ほかの言語では、最大 6 種類まで定義する必要があります。

```jsx
const count = 1;
<Plural n={count}
  one={You have one item.}
  other={You have some items.}
/>
```


## リファレンス

### Props

<TypeTable
  type={{
  "n": {
    description: '複数形を判定するために使用する数値。',
    type: 'number',
    optional: false,
  },
  "children?": {
    description: '該当する複数形がない場合のフォールバック',
    type: 'any',
    optional: true,
    default: 'undefined',
  },
  "locales?": {
    type: 'string[]',
    optional: true,
    default: 'undefined',
  },
  "[key]: string": {
    type: 'string | JSX.Element',
    optional: false,
  },
}}
/>

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

### 説明

| Prop Name       | Description                                                                                                                                                                                              |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `n`             | 複数形を判定するために使用する数値です。複数形処理では必須です。                                                                                                                                                                         |
| `children`      | 一致する複数形の分岐が見つからなかった場合にレンダリングされるフォールバックコンテンツです。                                                                                                                                                           |
| `locales`       | 書式設定に使用するロケールを指定する任意の locales です。指定しない場合は、ユーザーのデフォルトのロケールが使用されます。ロケールの指定について詳しくは、[こちら](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument)を参照してください。 |
| `[key]: string` | 複数形を表す分岐です。使用できる分岐はロケールによって異なります。                                                                                                                                                                        |

### 戻り値

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

### 例外

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

***

## どの形式を追加すべきですか？

追加する必要があるのは、あなたの言語で使われる複数形の形式だけです。

使用できる形式は次のとおりです：`"singular"`, `"plural"`, `"dual"`, `"zero"`, `"one"`, `"two"`, `"few"`, `"many"`, `"other"`。

* `"en-US"` を使用する開発者の場合、使用するのは `"singular"` と `"plural"` の 2 つだけです。
* `"zh-CN"` の開発者の場合、使用するのは `"other"` だけです。

各形式の違いについて詳しくは、[こちら](https://cldr.unicode.org/index/cldr-spec/plural-rules)をご覧ください。

***

## 例

### 基本的な使い方

複数形の処理には `<Plural>` コンポーネントを使用します。

```jsx title="BasicExample.jsx" copy
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} // [!code highlight]
      one={You have one item.}
      other={You have some items.}
    />
  );
}
```


### フォールバック

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

```jsx title="FallbackExample.jsx" copy
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      one={You have one item.}
    >
      You have some items. // [!code highlight]
    </Plural>
  );
}
```


### 複数形の翻訳

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

```jsx title="PluralExample.jsx" copy
import { T, Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
  <T id="itemCount">
    <Plural n={count}
      one={You have an item.} // [!code highlight]
      other={You have some items.} // [!code highlight]
    />
  );
}
```


### 変数を追加する

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

```jsx title="PluralExample.jsx" copy
import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count}
      one={You have <Num>{count}</Num> item.} // [!code highlight]
      other={You have <Num>{count}</Num> items.} // [!code highlight]
    />
  );
}
```

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

```jsx
<T id="itemCount">
  <Plural n={count}
    one={You have <Num>{count}</Num> item.} // [!code highlight]
    other={You have <Num>{count}</Num> items.} // [!code highlight]
  />
</T>
```

***


## 注記

* `<Plural>` コンポーネントは、複数形の処理に使用します。
* 使用できる複数形の分岐 (例: one、other、few、many) はロケールによって異なり、[Unicode CLDR の複数形ルール](https://cldr.unicode.org/index/cldr-spec/plural-rules)に従います。

## 次のステップ

* さらに例を見るには、[Branching Components の使い方](/docs/react/guides/branches) のリファレンスドキュメントを確認してください。
* より高度な使い方として、`<Plural>` を `<Currency>`、`<DateTime>`、`<Num>`、`<Var>` などの変数コンポーネントと組み合わせることもできます。詳しくは、[変数コンポーネントの使い方](/docs/react/guides/variables) を参照してください。