# gt-next: General Translation Next.js SDK: 分岐コンポーネント
URL: https://generaltranslation.com/ja/docs/next/guides/branches.mdx
---
title: 分岐コンポーネント
description: 翻訳内で条件付きコンテンツに分岐コンポーネントを使用する方法
---

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

分岐コンポーネントを使うと、[`<T>`](/docs/next/api/components/t) コンポーネント内で条件に応じたコンテンツをレンダリングできます。if/else 文や複数形のルールといった動的ロジックを扱いながら、あらゆるコンテンツのバリエーションを適切に翻訳できるようにします。


## 使用可能なコンポーネント

* [`<Branch>`](/docs/next/api/components/branch): 値や状態に応じて表示を切り替える条件付きコンテンツ
* [`<Plural>`](/docs/next/api/components/plural): ロケールごとのルールに基づく自動複数形処理

## クイックスタート

分岐コンポーネントは [`<T>`](/docs/next/api/components/t) 内で使用でき、条件分岐を扱えます。

```jsx
import { T, Branch, Plural, Num, Var } from 'gt-next';

function NotificationPanel({ user, messageCount }) {
  return (
    <T>
      <Branch 
        branch={user.status}
        online={<p><Var>{user.name}</Var> is currently online</p>}
        away={<p><Var>{user.name}</Var> is away</p>}
      >
        <p><Var>{user.name}</Var> status unknown</p>
      </Branch>
      
      <Plural
        n={messageCount}
        one={<p>You have <Num>{messageCount}</Num> message</p>}
        other={<p>You have <Num>{messageCount}</Num> messages</p>}
      />
    </T>
  );
}
```


## 分岐コンポーネントの仕組み

分岐コンポーネントは、翻訳内の条件付きレンダリングを次のように処理します。

1. [`<T>`](/docs/next/api/components/t) 内の**三項演算子**や条件ロジックを**置き換える**
2. 条件が想定した値に一致しない場合に**フォールバックコンテンツ**を提供する
3. あり得るすべてのコンテンツバリエーションを**翻訳可能にする**
4. 複数形の扱いで**ロケールのルール**に自動的に従う

```jsx
// ❌ これは動作しない - <T> 内の条件ロジック
<T><p>{isActive ? 'User is active' : 'User is inactive'}</p></T>

// ✅ これは動作する - branch を使った条件ロジック
<T>
  <Branch 
    branch={isActive} 
    true={<p>User is active</p>}
    false={<p>User is inactive</p>}
  />
</T>
```

## コンポーネントガイド

### Branch - 条件付きコンテンツ

値や状態に応じて条件付きでレンダリングするには、[`<Branch>`](/docs/next/api/components/branch) を使用します。

```jsx
// ユーザーステータスの表示
<T>
  <Branch 
    branch={user.role}
    admin={<p>管理者ダッシュボード</p>}
    user={<p>ユーザーダッシュボード</p>}
    guest={<p>ゲストアクセス</p>}
  >
    <p>アクセスレベル不明</p>
  </Branch>
</T>

// 真偽値による条件分岐
<T>
  <Branch 
    branch={isLoggedIn}
    true={<p>おかえりなさい！</p>}
    false={<p>ログインしてください</p>}
  />
</T>

// サブスクリプションプラン
<T>
  <Branch
    branch={subscription.tier}
    free={<p>プレミアム機能を利用するにはアップグレードしてください</p>}
    premium={<p>プレミアム体験をお楽しみください</p>}
    enterprise={<p>エンタープライズソリューションについてはサポートにお問い合わせください</p>}
  >
    <p>サブスクリプションのステータスを取得できません</p>
  </Branch>
</T>
```


### 複数形 - スマートな複数形処理

数量に応じて内容が変わる場合は、[`<Plural>`](/docs/next/api/components/plural) を使用します。

```jsx
// 基本的な複数形処理
<T>
  <Plural
    n={itemCount}
    one={<p><Num>{itemCount}</Num> item in cart</p>}
    other={<p><Num>{itemCount}</Num> items in cart</p>}
  />
</T>

// ゼロの処理
<T>
  <Plural
    n={notifications}
    zero={<p>No new notifications</p>}
    one={<p><Num>{notifications}</Num> notification</p>}
    other={<p><Num>{notifications}</Num> notifications</p>}
  />
</T>

// 複雑な複数形処理（Unicode CLDRルールに従う）
<T>
  <Plural
    n={days}
    zero={<p>Due today</p>}
    one={<p>Due in <Num>{days}</Num> day</p>}
    few={<p>Due in <Num>{days}</Num> days</p>}
    many={<p>Due in <Num>{days}</Num> days</p>}
    other={<p>Due in <Num>{days}</Num> days</p>}
  />
</T>
```

### 変数コンポーネントとの組み合わせ

分岐コンポーネントと変数コンポーネントは自然に組み合わせて使えます。

```jsx
<T>
  <Branch
    branch={order.status}
    pending={
      <p>
        Order <Var>{order.id}</Var> is pending. 
        Total: <Currency currency="USD">{order.total}</Currency>
      </p>
    }
    shipped={
      <p>
        Order <Var>{order.id}</Var> shipped on <DateTime>{order.shippedDate}</DateTime>
      </p>
    }
    delivered={
      <p>Order <Var>{order.id}</Var> was delivered successfully</p>
    }
  >
    <p>Order status unknown</p>
  </Branch>
</T>
```


## 分岐コンポーネントを使うタイミング

### 三項演算子を置き換える

[`<T>`](/docs/next/api/components/t) 内で使えるように、条件分岐を変換します:

```jsx
// ❌ <T> 内では三項演算子を使用できません
<T>{isActive ? <p>Active user</p> : <p>Inactive user</p>}</T>

// ✅ 代わりに Branch を使用してください
<T>
  <Branch 
    branch={isActive}
    true={<p>Active user</p>}
    false={<p>Inactive user</p>}
  />
</T>
```


### 複数条件を処理する

switch 文や複数の if/else を置き換えます：

```jsx
// ❌ 複雑な条件分岐ロジック
<T>
  {status === 'loading' ? <p>Loading...</p> : 
   status === 'error' ? <p>Error occurred</p> : 
   status === 'success' ? <p>Success!</p> : 
   <p>Unknown status</p>}
</T>

// ✅ すっきりした分岐ロジック
<T>
  <Branch
    branch={status}
    loading={<p>Loading...</p>}
    error={<p>Error occurred</p>}
    success={<p>Success!</p>}
  >
    <p>Unknown status</p>
  </Branch>
</T>
```

### 複数形の規則

手動で行っていた複数形処理を置き換えます:

```jsx
// ❌ 手動の複数形処理
<T>{count === 1 ? <p>1 item</p> : <p>{count} items</p>}</T>

// ✅ 自動の複数形処理
<T>
  <Plural
    n={count}
    one={<p><Num>{count}</Num> item</p>}
    other={<p><Num>{count}</Num> items</p>}
  />
</T>
```


## スタンドアロンでの使用

分岐コンポーネントは、翻訳を行わない純粋なロジックのために [`<T>`](/docs/next/api/components/t) の外側でも使用できます。

```jsx
// 純粋な条件付きレンダリング
<Branch
  branch={theme}
  dark={<DarkModeIcon />}
  light={<LightModeIcon />}
>
  <DefaultIcon />
</Branch>

// 純粋な複数形処理
<Plural
  n={count}
  one={<SingleItemComponent />}
  other={<MultipleItemsComponent />}
/>
```


## よくある問題

### branchキーの不足

一致する値がない場合に備えて、常にフォールバックコンテンツを指定してください。

```jsx
// ❌ 予期しない値に対するフォールバックなし
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
  // userRole が "moderator" の場合はどうなる？
/>

// ✅ 常にフォールバックを含める
<Branch
  branch={userRole}
  admin={<AdminPanel />}
  user={<UserPanel />}
>
  <DefaultPanel /> {/* その他の値に対するフォールバック */}
</Branch>
```


### 不完全な複数形

デフォルトのロケールに必要な複数形を用意してください。

```jsx
// ❌ "other" 形式が欠けています
<Plural
  n={count}
  one={<p>1 item</p>}
  // 0、2、3 などはどうなる？
/>

// ✅ 必要な形式を含める
<Plural
  n={count}
  zero={<p>No items</p>}
  one={<p>1 item</p>}
  other={<p>{count} items</p>}
/>
```


### 複雑にネストしたロジック

これは機能しますが、分岐ロジックはシンプルに保ち、深いネストは避けることをおすすめします。

```jsx
// ❌ 複雑なネストされた分岐
<Branch branch={status}>
  <Branch branch={subStatus}>
    {/* 読みにくく、保守が困難 */}
  </Branch>
</Branch>

// ✅ ロジックをフラット化するか、複数のコンポーネントを使用する
<Branch
  branch={`${status}-${subStatus}`}
  active-online={<ActiveOnline />}
  active-offline={<ActiveOffline />}
  inactive-online={<InactiveOnline />}
>
  <DefaultState />
</Branch>
```

<Callout>
  複数形のルールについて詳しくは、[Unicode CLDR のドキュメント](https://cldr.unicode.org/index/cldr-spec/plural-rules)を参照してください。
</Callout>


## 次のステップ

* [文字列翻訳ガイド](/docs/next/guides/strings) - JSX を使わずにプレーンテキストを翻訳する
* [動的コンテンツガイド](/docs/key-concepts/dynamic-content) - runtime 翻訳に対応する
* API リファレンス:
  * [`<Branch>` コンポーネント](/docs/next/api/components/branch)