# gt-next: General Translation Next.js SDK: Plural
URL: https://generaltranslation.com/ja/docs/next/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-next';

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-next';

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-next';

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-next';

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/next/guides/branches) のリファレンスドキュメントを参照してください。
* より高度な使い方については、`<Plural>` を `<Currency>`、`<DateTime>`、`<Num>`、`<Var>` などの変数コンポーネントと組み合わせてください。詳しくは、[変数コンポーネントの使い方](/docs/next/guides/variables) を参照してください。