# gt-next: General Translation Next.js SDK: Branch
URL: https://generaltranslation.com/ja/docs/next/api/components/branch.mdx
---
title: Branch
description: Branch コンポーネントの API リファレンス
---

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


## 概要

`<Branch>` コンポーネントを使うと、翻訳に条件分岐を追加できます。

```jsx
const status = 'active';
<Branch branch={status}
    active={<p>ユーザーはアクティブです。</p>}
    inactive={<p>ユーザーは非アクティブです。</p>}
/>
```

`branch` パラメータに値を渡すと、指定したキーに基づいて対応する出力値が選択されます。


## リファレンス

### Props

<TypeTable
  type={{
  "branch": {
      description: 'レンダリングするブランチ名。',
      type: 'string',
      optional: false,
  },
  "children?": {
      description: 'フォールバックコンテンツ',
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "name?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "[key]: string": {
      type: 'string | JSX.Element',
      optional: false,
  },
}}
/>

`[key]: string` 構文は、使用可能なブランチを表す任意のキーを指定できることを示します。
たとえば、`active` や `inactive` といったブランチをパラメータとして追加できます。

| Prop            | Description                                                                   |
| --------------- | ----------------------------------------------------------------------------- |
| `branch`        | レンダリングするブランチ名。                                                                |
| `children`      | 一致するブランチが見つからない場合にレンダリングするフォールバックコンテンツ。                                       |
| `[key]: string` | 指定されたブランチ値に応じて表示するコンテンツを表すブランチ。各キーがそれぞれ 1 つのブランチに対応し、その値がレンダリングされるコンテンツになります。 |

### 戻り値

指定されたブランチに対応する内容、またはフォールバックの内容を含む`JSX.Element`。

### 例外

`branch` prop が指定されていないか無効な場合は、`Error` がスローされます。

## 例

### 基本的な使い方

`<Branch>` では、`branch` prop の値ごとに異なる出力を指定する必要があります。

この例では、`user.hairColor` の値に応じて出力を決定します。
`user.hairColor` の取り得る値に対応するように、`black`、`brown`、`blonde` の props を定義しています。

```jsx title="BranchExample.jsx" copy
import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} // [!code highlight]
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (文字列を渡すこともできます)
      blonde={<p>Their hair is light.</p>}
    />
  );
}
```


### フォールバックコンテンツ

`branch` に渡した値に一致する prop がない場合は、常に `children` がフォールバックとして使用されます。

```jsx title="BranchExample.jsx" copy
import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}
```


### 「Branch」を翻訳する

コンテンツを翻訳するには、`<T>` コンポーネントで囲みます。

```jsx title="BranchExample.jsx" copy
import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p>
      </Branch>
    </T> // [!code highlight]
  );
}
```


### 変数の追加

ブランチ内で動的な値をレンダリングする場合は、必ず `<Currency>`、`<DateTime>`、`<Num>`、または `<Var>` コンポーネントで囲んでください。

```jsx title="BranchExample.jsx" copy
import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}
```

***


## 注意事項

* ブランチのキーには、branch prop に一致する任意の文字列値を使用できます。この柔軟性により、さまざまなユースケースに合わせて `<Branch>` を簡単に利用できます。
* `<Branch>` を、翻訳用の `<T>` や動的なコンテンツ向けの[変数コンポーネント](/docs/next/guides/variables) など、ほかのコンポーネントと組み合わせることで、表現力が高くローカライズされたインターフェースを構築できます。

## 次のステップ

* より高度な使い方や例については、[Branching Components の使い方](/docs/next/guides/branches)を参照してください。