# General Translation React SDKs (gt-react, gt-next, gt-react-native): 複数形と分岐の扱い
URL: https://generaltranslation.com/ja/docs/react/guides/handling-plurals-and-branches.mdx
---
title: 複数形と分岐の扱い
description: <Plural> と <Branch> を使用して、React の複数形処理と条件付き翻訳済みコンテンツを扱う方法。
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

ロケールごとに使用する複数形は異なります。英語では通常 `one` と `other` が使用されますが、追加の形式が必要な言語もあります。

数に応じた表現には [`<Plural>`](/docs/react/reference/components/plural) を使用し、それ以外の条件付きコンテンツには [`<Branch>`](/docs/react/reference/components/branch) を使用します。

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

* メッセージ数や検索結果のように、数値によって文言が決まる場合は [`<Plural>`](/docs/react/reference/components/plural) を使用します。
* status、プラン、ブール値など、値によってコンテンツが決まる場合は [`<Branch>`](/docs/react/reference/components/branch) を使用します。
* すべてのバリエーションを翻訳できるよう、いずれのコンポーネントも [`<T>`](/docs/react/reference/components/t) 内に配置します。
* 各バリエーション内の動的な値は、[`<Num>`](/docs/react/reference/components/num) や [`<Var>`](/docs/react/reference/components/var) などの[変数コンポーネント](/docs/react/guides/formatting-variables)でラップします。

どちらのコンポーネントも、React、Next.js、TanStack Start、React Native で同様に動作します。異なるのはインポートするパッケージだけです。

## `<Plural>` で複数形を切り替える [#plural]

`count === 1` を確認したり `s` を追加したりして複数形を作成しないでください。これは英語の文法しか表現できません。数を [`n`](/docs/react/reference/components/plural#n) として渡し、ソース言語で使う形式を指定します。[`<Plural>`](/docs/react/reference/components/plural) は、アクティブなロケールの[Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules)に基づいて正しい形式を選択します。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T, Plural, Num } from 'gt-react';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T, Plural, Num } from 'gt-next';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T, Plural, Num } from 'gt-tanstack-start';

    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> message.</>}
        other={<>You have <Num>{count}</Num> messages.</>}
      />
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T, Plural, Num } from 'gt-react-native';

    <T>
      <Plural
        n={count}
        one={<Text>You have <Num>{count}</Num> message.</Text>}
        other={<Text>You have <Num>{count}</Num> messages.</Text>}
      />
    </T>;
    ```
  </Tab>
</Tabs>

ソース言語で使う[`複数形カテゴリ`](/docs/react/reference/components/plural#form)を指定してください。英語では通常 `one` と `other` です。`zero`、`two`、`few`、`many` など、各ターゲット言語で必要なカテゴリは翻訳者が補います。

完全に一致するカテゴリが利用できない場合、[`<Plural>`](/docs/react/reference/components/plural) は `plural` 分岐を使用し、次に `other` を使用します。どちらの汎用分岐も存在しない場合にのみ、[`children`](/docs/react/reference/components/plural#children) がレンダリングされます。

```tsx
<T>
  <Plural n={count} one={<>One result</>}>
    <Num>{count}</Num> results
  </Plural>
</T>;
```

## 値に応じて `<Branch>` で分岐する [#branch]

コンテンツが数以外の値に依存する場合は、[`<Branch>`](/docs/react/reference/components/branch) を使用します。値は [`branch`](/docs/react/reference/components/branch#branch) として渡し、[想定される各値に対応する prop](/docs/react/reference/components/branch#value) を追加し、フォールバックとして [`children`](/docs/react/reference/components/branch#children) を使用します。

```tsx
<T>
  <Branch
    branch={plan}
    free={<p>Upgrade to unlock more.</p>}
    pro={<p>Thanks for going Pro!</p>}
  >
    <p>Welcome.</p>
  </Branch>
</T>;
```

各分岐は独立して翻訳されるため、翻訳者はインラインの JavaScript 条件分岐に縛られず、文言全体を調整できます。

### `<T>` 内の条件分岐を置き換える

インラインの三項演算子を使用すると、[`<T>`](/docs/react/reference/components/t) の children が動的になり、確実に抽出できなくなります。同じ条件は、[`<Branch>`](/docs/react/reference/components/branch) で表現してください。

```tsx
// ❌ インラインの条件分岐
<T>{isActive ? 'Active' : 'Inactive'}</T>;

// ✅ 翻訳可能な branch
<T>
  <Branch branch={isActive} true="Active">
    Inactive
  </Branch>
</T>;
```

*メモ: [`<Branch>`](/docs/react/reference/components/branch) では、予約されていないpropsが分岐の値を表すため、`data-*`属性は無視されます。テストIDなどのデータ属性はラッパー要素に指定してください。[`no-data-attrs-on-branch`](/docs/react/reference/lint-rules#no-data-attrs) lintルールはこの誤りを検出します。*
## Next steps

- /docs/react/guides/formatting-variables
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/translating-with-dictionaries