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

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内の template を編集してください。 */}


## 概要

`<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.}
/>
```


## リファレンス

### 属性

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

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

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

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

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) に従います。

## 次のステップ

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