# vue: <Plural>
URL: https://generaltranslation.com/ja/docs/vue/reference/components/plural.mdx
---

title: "<Plural>"
description: アクティブなロケールの複数形ルールに基づいてコンテンツをレンダリングします。<Plural> コンポーネントの API リファレンス。

---

`<Plural>` コンポーネントは、数とアクティブなロケールの複数形ルールに基づいて、名前付きスロットを選択します。選択肢を翻訳する場合は、[`<T>`](/docs/vue/reference/components/t) 内に配置します。

## 概要 [#overview]

数は `n` で渡し、source で必要となる形式ごとに静的な名前付き スロット を定義します。

```vue
<Plural :n="count">
  <template #one>One item</template>
  <template #other>Several items</template>
  <template #default>No matching form</template>
</Plural>
```

分岐でレンダリングされるテキスト内に動的な数を表示する場合は、[`<Num>`](/docs/vue/reference/components/num)で囲みます。

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

* **数値によるオーバーライド。** 指定されている場合、`zero` は絶対値が `0` の場合に、`singular`、次に `one` は `1` の場合に、`dual`、次に `two` は `2` の場合に使用されます。これらのオーバーライドはロケールルールより優先されます。
* **ロケールに基づく選択。** それ以外の場合は、`Intl.PluralRules` がロケールの CLDR カテゴリを決定します。`singular` と `dual` はロケールの `one` および `two` カテゴリのエイリアスとして使用でき、その後 `plural` と `other` がこの順で汎用的なフォールバックとして使用されます。
* **フォールバック。** 指定された形式のどれにも一致しない場合は、デフォルトスロットがレンダリングされます。このコンポーネントは HTML ラッパーを追加しません。
* **静的抽出。** [`<T>`](/docs/vue/reference/components/t) 内では、ランタイムでレンダリングされるのは 1 つだけですが、抽出ツールはサポートされるすべての名前付き分岐を記録します。

スタンドアロンの `<Plural>` では、設定されたデフォルトロケールが明示的な `locales` を無視し、そのデフォルトロケールのみを使用します。別のアクティブなロケールでは、スタンドアロンコンポーネントは明示的な `locales`、アクティブなロケール、デフォルトロケールの順に試します。

[`<T>`](/docs/vue/reference/components/t) 内では、リッチ翻訳によって複数形の選択が制御されます。ソースのフォールバックコンテンツにはデフォルトロケールが使用され、翻訳済みコンテンツではアクティブなロケール、次にデフォルトロケールが試されます。この場合、明示的な `locales` prop は無視されます。

## Props とスロット [#props]

| 名前                         | 説明                          | 型            | 任意  | デフォルト    |
| -------------------------- | --------------------------- | ------------ | --- | -------- |
| [`n`](#n)                  | 複数形を選択するために使用する数。           | `number`     | いいえ | —        |
| [`locales`](#locales)      | 複数形の選択に使用する優先ロケール。          | `string[]`   | はい  | ロケール解決順序 |
| [`default`](#default-slot) | 一致する形式がない場合にレンダリングされるコンテンツ。 | `VNodeChild` | はい  | 空        |
| [`[form]`](#form-slots)    | サポートされる複数形ごとのコンテンツ。      | `VNodeChild` | はい  | —        |

### `n`

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

複数カテゴリの選択に使用する数です。[`<Num>`](/docs/vue/reference/components/num) を使って数は別途表示します。`n` は選択のみを制御します。

### `locales`

**型** `string[]` · **任意** · **デフォルト** ロケール解決順序

スタンドアロンの複数形ルールで優先的に使用する BCP 47 ロケールコードです。アクティブなロケールが設定されたデフォルトと異なる場合にのみ優先されます。[`<T>`](/docs/vue/reference/components/t) 内では、この prop は無視されます。

### デフォルトスロット

**型** `VNodeChild` · **任意** · **デフォルト** 空

指定された名前付きスロットが選択されたフォームに一致しない場合にレンダリングされるコンテンツ。

### 形式スロット

**型** `VNodeChild` · **任意**

使用できる名前は次のとおりです。

* CLDR カテゴリ: `zero`、`one`、`two`、`few`、`many`、`other`
* 一般的なエイリアス: `singular`、`dual`、`plural`

サポートするロケールで必要なカテゴリのみを追加してください。数値によるオーバーライドが先に適用されるため、`one` スロットを指定すると、ロケールの CLDR カテゴリが異なる場合でも絶対値が `1` のすべての値を処理します。同様に、`two` スロットを指定すると、絶対値が `2` のすべての値を処理します。その他の値は、ロケールのカテゴリとフォールバック順に従います。

[`<T>`](/docs/vue/reference/components/t) 内では、形式スロットは無条件で、静的な名前を持ち、スコープなしでなければなりません。名前付きスロットは、同名の静的プリミティブ属性よりも優先されます。単純な代替手段として、静的な文字列属性も使用できます。

```vue
<Plural :n="count" one="One item" other="Several items" />
```

## 例 [#examples]

```vue title="InboxCount.vue"
<script setup lang="ts">
import { Num, Plural, T } from 'gt-vue';

defineProps<{ count: number }>();
</script>

<template>
  <T>
    <Plural :n="count">
      <template #one>You have <Num :value="count" /> message.</template>
      <template #other>You have <Num :value="count" /> messages.</template>
      <template #default>No messages.</template>
    </Plural>
  </T>
</template>
```

任意の値に基づいて選択するには、[`<Branch>`](/docs/vue/reference/components/branch)を使用します。