# vue: 複数形と分岐の処理
URL: https://generaltranslation.com/ja/docs/vue/guides/handling-plurals-and-branches.mdx
---

title: 複数形と分岐の処理
description: <Plural> と <Branch> を使って、数に応じた Vue コンテンツや条件付きの Vue コンテンツを翻訳する方法。
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

ロケールによっては、複数形や条件に応じて異なる文言が必要になります。CLI が各フレーズ全体を抽出できるよう、考えられるすべての選択肢を名前付きスロットで表現してください。

数に応じて文言を選ぶ場合は、[`<Plural>`](/docs/vue/reference/components/plural) を使用します。status、plan、ブール値などの名前付きの値には、[`<Branch>`](/docs/vue/reference/components/branch) を使用します。

## 複数形または分岐を選択する [#choose]

* 数によってフレーズを決定する場合は、[`<Plural>`](/docs/vue/reference/components/plural) を使用します。
* 別の値によってフレーズを決定する場合は、[`<Branch>`](/docs/vue/reference/components/branch) を使用します。
* すべての名前付きスロットが翻訳エントリに含まれるよう、いずれかのコンポーネントを [`<T>`](/docs/vue/reference/components/t) 内に配置します。
* 認識されないカテゴリまたは分岐のフォールバックとして、デフォルトスロットを使用します。
* 各フレーズ内のランタイム値は、[`<Num>`](/docs/vue/reference/components/num)、[`<Var>`](/docs/vue/reference/components/var)、または別のフォーマット用コンポーネントで囲みます。

## `<Plural>` を使った複数形 [#plural]

`:n` を通じて数を渡し、ソースロケールで使用されるカテゴリ用の名前付きスロットを指定します。

```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>
        You have new messages.
      </template>
    </Plural>
  </T>
</template>
```

[`<Plural>`](/docs/vue/reference/components/plural) は、絶対値 `0`、`1`、`2` に対する数値オーバーライドと、アクティブなロケールの[Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules)を組み合わせます。英語では通常 `one` と `other` を使用しますが、ターゲットの翻訳には `zero`、`two`、`few`、`many` などの追加カテゴリを含めることができます。

`count === 1` や接尾辞の追加で複数形の文法を表現しないでください。こうした簡略化は、アクティブなロケールではなくソース言語の規則を組み込むことになります。

## 名前付きの値に応じて分岐 [#branch]

文字列、数値、またはブール値を `:branch` に渡し、想定される各値に対して静的に名前を付けたスロットを使用します。

```vue
<script setup lang="ts">
import { Branch, T } from 'gt-vue';

defineProps<{ plan: 'free' | 'pro' | 'enterprise' }>();
</script>

<template>
  <T>
    <Branch :branch="plan">
      <template #free>Upgrade to unlock more.</template>
      <template #pro>Thanks for going Pro!</template>
      <template #enterprise>Contact your account manager.</template>
      <template #default>Welcome.</template>
    </Branch>
  </T>
</template>
```

すべてのスロットは親の[`<T>`](/docs/vue/reference/components/t)エントリに含まれますが、レンダリングされるのはアクティブなbranchだけです。名前付きスロットが一致しない場合、[`<Branch>`](/docs/vue/reference/components/branch)はデフォルトのスロットをレンダリングします。

## インライン条件分岐を置き換える [#conditionals]

インラインの `v-if` は、実行時に翻訳後の構造を変更します。有限個の代替案は、代わりに [`<Branch>`](/docs/vue/reference/components/branch) に移してください。

```vue
<!-- ❌ 実行時の構造が翻訳から見えなくなる -->
<T>
  <span v-if="isActive">Active</span>
  <span v-else>Inactive</span>
</T>

<!-- ✅ すべてのフレーズが抽出時に認識される -->
<T>
  <Branch :branch="isActive ? 'active' : 'inactive'">
    <template #active>Active</template>
    <template #inactive>Inactive</template>
  </Branch>
</T>
```

スロット名は静的で、条件分岐を含まない必要があります。ビルド時に代替候補の集合が有限でない場合は、そのランタイムコンテンツを [`<T>`](/docs/vue/reference/components/t) の外に置くか、不透明な [`<Var>`](/docs/vue/reference/components/var) として保持してください。
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales