# General Translation React SDKs (gt-react, gt-next): Plural
URL: https://generaltranslation.com/ja/docs/react/reference/components/plural.mdx
---

title: Plural
description: General Translation の `gt-react` で、アクティブなロケールの複数形ルールを使って件数に応じた内容を表示します。Plural の API リファレンス。

---

`<Plural>` コンポーネントは、アクティブなロケールの複数形ルールを使って、件数に応じて文を変化させます。数値に応じて適切な形式を選択し、英語では 2 つ (「one item」/「two items」) ですが、ほかの言語では最大 6 つ必要になる場合があります。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` からインポートしていますが、実際にはお使いのフレームワークのパッケージからインポートしてください。*

## 概要 [#overview]

数は `n` に渡し、各複数形ごとに child prop を指定します。

```tsx
<Plural
  n={count}
  one={<>You have one item.</>}
  other={<>You have some items.</>}
/>
```

*注: 分岐を翻訳するには、[`<T>`](/docs/react/reference/components/t) の中に `<Plural>` を配置し、その中の動的な値は [`<Num>`](/docs/react/reference/components/num) のような変数コンポーネントで囲んでください。*

## 仕組み [#how-it-works]

* **ロケールに応じた選択。** `n` の値は、アクティブなロケールの [Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules) に基づいて複数形カテゴリに分類されます。そのカテゴリに対応する分岐がレンダリングされます。
* **フォールバック。** 一致する分岐がない場合は、`children` がフォールバックとしてレンダリングされます。
* **数値がなくてもフォールバック。** `n` が指定されていない場合、または有効な数値でない場合、`<Plural>` はエラーを投げず、代わりに `children` をフォールバックとしてレンダリングします。

## 追加する形式 [#forms]

必要なのは、その言語で使われる複数形の形式だけです。使用できる形式は `zero`、`one`、`two`、`few`、`many`、`other` に加え、エイリアスの `singular`、`dual`、`plural` です。

* `en-US` では、`one` と `other` (または `singular` と `plural`) を使います。
* `zh-CN` では、`other` だけが必要です。

各言語で使用する形式については、[CLDR の複数形ルール](https://cldr.unicode.org/index/cldr-spec/plural-rules)を参照してください。

## Props [#props]

| Prop                    | 説明                            | 型           | 任意  | デフォルト      |
| ----------------------- | ----------------------------- | ----------- | --- | ---------- |
| [`n`](#n)               | 複数形を決定する数値です。                 | `number`    | いいえ | —          |
| [`children`](#children) | どの分岐にも一致しない場合のフォールバックコンテンツです。 | `ReactNode` | はい  | —          |
| [`locales`](#locales)   | 複数形ルールに使用するロケールの上書きです。        | `string[]`  | はい  | アクティブなロケール |
| [`[form]`](#form)       | 複数形カテゴリに対応するコンテンツです。          | `ReactNode` | はい  | —          |

### `n` [#n]

**型** `number` · **必須**

複数形を判定するために使用する数値です。これが未指定、または有効な数値でない場合、`<Plural>` はエラーをスローせず、フォールバック として `children` をレンダリングします。

### `children` [#children]

**型** `ReactNode` · **任意**

`n` に一致する複数形分岐がない場合に表示されるフォールバックコンテンツ。

### `locales` [#locales]

**型** `string[]` · **任意** · **デフォルト** アクティブなロケール

複数形ルールの判定に使用するロケールです。省略した場合は、アクティブなロケールが使用されます。

### `[form]` [#form]

**型** `ReactNode` · **任意**

複数形カテゴリごとに指定するプロパティです。`zero`、`one`、`two`、`few`、`many`、`other` (またはエイリアスの `singular`、`dual`、`plural`) を指定できます。使用できるカテゴリはロケールによって異なります。

## 例 [#examples]

```tsx title="BasicExample.tsx"
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.</>}
    />
  );
}
```

```tsx title="FallbackExample.tsx"
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>
  );
}
```

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

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

## メモ [#notes]

* `<Plural>` は、アクティブなロケールに基づいて複数形を処理します。
* 使用可能な分岐はロケールによって異なり、[Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules) に従います。
* 任意の値に基づく分岐については、[`<Branch>`](/docs/react/reference/components/branch) を参照してください。