分岐コンポーネント
翻訳内の条件付きコンテンツに分岐コンポーネントを使う方法
分岐コンポーネントは、<T> コンポーネント内で条件付きコンテンツをレンダリングできます。if/else などの動的ロジックや複数形ルールを扱い、あらゆるコンテンツのバリエーションが適切に翻訳されるようにします。
利用可能なコンポーネント
クイックスタート
ブランチングコンポーネントは、条件分岐のロジックを処理するために <T> の内部で機能します。
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> は現在オンラインです</p>}
away={<p><Var>{user.name}</Var> は離席中です</p>}
>
<p><Var>{user.name}</Var> のステータスは不明です</p>
</Branch>
<Plural
n={messageCount}
one={<p>メッセージが <Num>{messageCount}</Num> 件あります</p>}
other={<p>メッセージが <Num>{messageCount}</Num> 件あります</p>}
/>
</T>
);
}ブランチングコンポーネントの仕組み
ブランチングコンポーネントは、翻訳内での条件付きレンダリングを次の方法で解決します：
<T>内の三項演算子や条件分岐ロジックを置き換える- 条件が想定した値に一致しない場合にフォールバック用コンテンツを提供する
- あり得るすべてのコンテンツのバリエーションを翻訳対象にする
- locale のルールに従って複数形ルールを自動適用する
// ❌ 動作しません - <T> 内での条件ロジック
<T><p>{isActive ? 'ユーザーはアクティブ' : 'ユーザーは非アクティブ'}</p></T>
// ✅ 動作します - ブランチを使った条件分岐
<T>
<Branch
branch={isActive}
true={<p>ユーザーはアクティブ</p>}
false={<p>ユーザーは非アクティブ</p>}
/>
</T>コンポーネント ガイド
<Branch> - 条件付きコンテンツ
<Branch> は、value や状態に基づく条件付きレンダリングに使用します。
// ユーザーのステータス表示
<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> - スマートな複数形ルール
数量に応じて内容が変わる場合は、<Plural> を使用します。
// 基本的な複数形ルール
<T>
<Plural
n={itemCount}
one={<p>カートに商品<Num>{itemCount}</Num>点</p>}
other={<p>カートに商品<Num>{itemCount}</Num>点</p>}
/>
</T>
// ゼロの扱い
<T>
<Plural
n={notifications}
zero={<p>新しい通知はありません</p>}
one={<p>通知<Num>{notifications}</Num>件</p>}
other={<p>通知<Num>{notifications}</Num>件</p>}
/>
</T>
// 複雑な複数形ルール（Unicode CLDR規則に準拠）
<T>
<Plural
n={days}
zero={<p>本日が期限</p>}
one={<p>期限まであと<Num>{days}</Num>日</p>}
few={<p>期限まであと<Num>{days}</Num>日</p>}
many={<p>期限まであと<Num>{days}</Num>日</p>}
other={<p>期限まであと<Num>{days}</Num>日</p>}
/>
</T>Variable コンポーネントとの組み合わせ
Branching コンポーネントと Variable コンポーネントはシームレスに連携します。
<T>
<Branch
branch={order.status}
pending={
<p>
注文 <Var>{order.id}</Var> は保留中です。
合計：<Currency currency="USD">{order.total}</Currency>
</p>
}
shipped={
<p>
注文 <Var>{order.id}</Var> は <DateTime>{order.shippedDate}</DateTime> に出荷されました
</p>
}
delivered={
<p>注文 <Var>{order.id}</Var> は正常に配達されました</p>
}
>
<p>注文状況は不明です</p>
</Branch>
</T>分岐コンポーネントを使うタイミング
三項演算子の置き換え
条件分岐ロジックを<T>内で使える形に変換します:
// ❌ <T> では三項演算子は使用できません
<T>{isActive ? <p>アクティブユーザー</p> : <p>非アクティブユーザー</p>}</T>
// ✅ 代わりに Branch を使用してください
<T>
<Branch
branch={isActive}
true={<p>アクティブユーザー</p>}
false={<p>非アクティブユーザー</p>}
/>
</T>複数の条件を扱う
switch 文や複数の if/else 条件を置き換える:
// ❌ 複雑な条件分岐ロジック
<T>
{status === 'loading' ? <p>読み込み中...</p> :
status === 'error' ? <p>エラーが発生しました</p> :
status === 'success' ? <p>成功しました！</p> :
<p>不明な状態です</p>}
</T>
// ✅ すっきりした分岐ロジック
<T>
<Branch
branch={status}
loading={<p>読み込み中...</p>}
error={<p>エラーが発生しました</p>}
success={<p>成功しました！</p>}
>
<p>不明な状態です</p>
</Branch>
</T>複数形ルール
手動での複数形処理を置き換えます:
// ❌ 手動での複数形ルール
<T>{count === 1 ? <p>1 個</p> : <p>{count} 個</p>}</T>
// ✅ 自動での複数形ルール
<T>
<Plural
n={count}
one={<p><Num>{count}</Num> 個</p>}
other={<p><Num>{count}</Num> 個</p>}
/>
</T>スタンドアロンでの使用
分岐コンポーネントは、翻訳を行わない純粋なロジック用途として、<T> の外でも使用できます。
// ピュアな条件レンダリング
<Branch
branch={theme}
dark={<DarkModeIcon />}
light={<LightModeIcon />}
>
<DefaultIcon />
</Branch>
// ピュアな複数形ルール
<Plural
n={count}
one={<SingleItemComponent />}
other={<MultipleItemsComponent />}
/>よくある課題
ブランチキーが見つかりません
一致しない値には、必ずフォールバック用のコンテンツを用意してください。
// ❌ 予期しない値に対するフォールバックがありません
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
// userRole が "moderator" の場合はどうなる？
/>
// ✅ 常にフォールバックを用意する
<Branch
branch={userRole}
admin={<AdminPanel />}
user={<UserPanel />}
>
<DefaultPanel /> {/* その他の値に対するフォールバック */}
</Branch>不完全な複数形
デフォルトのlocaleに必要な複数形フォームを指定してください:
// ❌ "other" 形式が不足
<Plural
n={count}
one={<p>1 item</p>}
// 0、2、3などの場合は?
/>
// ✅ 必要な形式を含める
<Plural
n={count}
zero={<p>アイテムなし</p>}
one={<p>1個のアイテム</p>}
other={<p>{count}個のアイテム</p>}
/>複雑なネストされたロジック
この方法でも動作しますが、分岐ロジックは可能な限りシンプルに保ち、深いネストは避けることをおすすめします。
// ❌ 複雑にネストした分岐
<Branch branch={status}>
<Branch branch={subStatus}>
{/* 読みにくく、保守しづらい */}
</Branch>
</Branch>
// ✅ ロジックをフラット化するか、複数のコンポーネントを使う
<Branch
branch={`${status}-${subStatus}`}
active-online={<ActiveOnline />}
active-offline={<ActiveOffline />}
inactive-online={<InactiveOnline />}
>
<DefaultState />
</Branch>複数形ルールの詳細は、Unicode CLDR のドキュメントをご覧ください。
次のステップ
- String Translation Guide - JSX を使わずにプレーンテキストを翻訳する
- Dynamic Content Guide - 実行時の翻訳に対応する
- APIリファレンス:
このガイドはいかがですか?