# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Plural>`
URL: https://generaltranslation.com/ja/docs/react/reference/components/plural.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: アクティブなロケールの複数形ルールを使って件数に応じた内容を表示します。`<Plural>` コンポーネントの API リファレンス。

`<Plural>` コンポーネントは、件数に応じて表現を切り替え、各言語で文が数に合うようにします。英語では 2 つ (「one item」/「two items」) ですが、ほかの言語では最大 6 つ必要になる場合があります。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#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) に基づいて複数形カテゴリに分類されます。そのカテゴリに対応する分岐がレンダリングされます。
* **分岐のフォールバック。** 選択されたカテゴリが利用できない場合、`<Plural>` は `plural`、次に `other` を使用します。どちらの汎用分岐も存在しない場合にのみ、`children` をレンダリングします。
* **数値がなくてもフォールバック。** `n` が指定されていない場合、または有効な数値でない場合、`<Plural>` はエラーを投げず、代わりに `children` をフォールバックとしてレンダリングします。

<Callout type="info">
  **v11.1.8 で変更:** 不足している `zero` および `one` カテゴリは、`children` の前に
  `plural` または `other` にフォールバックするようになりました。これは既存の
  `two`、`few`、`many` の動作と一致します。
</Callout>

## 追加する形式 [#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` に完全一致するカテゴリ、`plural`、または `other` 分岐がない場合に表示されるフォールバックコンテンツ。

### `locales` [#locales]

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

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

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

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

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

## 例 [#examples]

*例では `gt-react` からインポートしています。代わりに、ご使用のフレームワークのパッケージからインポートしてください。*

```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) は、任意の値に基づく分岐を処理します。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.