# General Translation React SDKs (gt-react, gt-next): 複数形と分岐の扱い
URL: https://generaltranslation.com/ja/docs/react/guides/handling-plurals-and-branches.mdx
---

title: 複数形と分岐の扱い
description: React、Next.js、TanStack Start、React Native で、General Translation の <Plural> と <Branch> コンポーネントを使って、数に応じた内容や条件付きコンテンツを render する方法。
related:
  links:
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-with-dictionaries

---

数や条件によって変化するテキストは、単一の固定 `string` では表せません。言語によって複数形の扱いや表現の切り替え方が異なるためです。数に応じて切り替える場合は [`<Plural>`](/docs/react/reference/components/plural)、それ以外の条件には [`<Branch>`](/docs/react/reference/components/branch) を使うことで、どのバリエーションも正しく翻訳できます。どちらのコンポーネントも、どのフレームワークでも同じように動作し、異なるのは import するパッケージだけです。

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

件数を `n` として渡し、各複数形に対応する子要素を指定します。General Translation は、ロケールの複数形ルールに基づいて、アクティブなロケールに合った正しい形式を選択します。

<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>

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

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

`<Branch>` を使うと、任意の値に応じてコンテンツを切り替えられます。値は `branch` として渡し、取りうる各値に対応する `child` prop を指定し、フォールバックとして `children` を指定します。`Branch` は [`<T>`](/docs/react/reference/components/t) と同じパッケージから import してください。

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

各ブランチの子要素はそれぞれ独立して翻訳されるため、どのバリエーションもあらゆる言語で自然に読めます。

*注: `<Branch>` コンポーネントは `data-*` 属性を無視します。リンターの [`no-data-attrs-on-branch`](/docs/react/reference/lint-rules) ルールは、それらを警告します。*
## Next steps

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