ブランチコンポーネント

概要

gt-next のブランチコンポーネントは、特定の条件に基づいて動的にコンテンツをレンダリングすることを可能にします。これらのコンポーネントには以下が含まれます：

• <Branch>: 一致する branch プロップに基づいてコンテンツをレンダリングします。
• <Plural>: 指定された数の複数形ルールに基づいてコンテンツをレンダリングします。

どちらのコンポーネントも、ローカライズされたアプリケーションで条件付きロジックと動的コンテンツを管理するための強力なツールを提供します。

このリファレンスでは、以下をカバーします：

• ブランチコンポーネントとは何か、そしてそれがどのように機能するか。
• ブランチコンポーネントを効果的に使用するためのデザインパターン。
• 各ブランチコンポーネントの使用例。
• ブランチコンポーネントを使用する際に避けるべき一般的な落とし穴。

ブランチコンポーネントとは？

ブランチコンポーネントは、特定の条件や値に基づいてレンダリングするコンテンツを動的に選択します。

<Branch> コンポーネント

<Branch> コンポーネントは、指定された branch 値に基づいて異なるコンテンツをレンダリングすることを可能にします。 一致するブランチが見つからない場合は、フォールバックの children コンテンツがレンダリングされます。

例えば、<Branch> コンポーネントは、アプリケーションの状態、ユーザーの好み、または動的データに基づく条件付きレンダリングに最適です。

<Plural> コンポーネント

<Plural> コンポーネントは、複数形と数の一致を自動的に処理することで <Branch> の機能を拡張します。 ロケール固有のルールに基づいて、提供された n 値を使用して表示する複数形を決定します。

例えば、<Plural> コンポーネントは、「1 item」と「2 items」のように、単数形と複数形のテキストを動的にレンダリングするのに理想的です。

デザインパターン

<Branch> を使用した分岐ロジック

<Branch> コンポーネントは、branch 値に基づいて柔軟にコンテンツを切り替えるために使用されます。 複数の可能なブランチを定義でき、コンポーネントは一致するブランチキーに対応するコンテンツをレンダリングします。

import { T, Branch } from 'gt-next';
 
export default function UserStatus({ status }) {
  return (
    <T id="UserStatus">
      <Branch
        branch={status}
        active={<p>ユーザーはアクティブです。</p>}
        inactive={<p>ユーザーは非アクティブです。</p>}
      >
        <p>ステータス不明。</p>
      </Branch>
    </T>
  );
}

<Plural> を使用した複数形処理

<Plural> コンポーネントは、n の値に基づいて複数形のロジックを自動化します。 コンポーネントは、指定された数値とロケールに対して適切な複数形を動的に選択します。

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <T id="item_count">
      <Plural
        n={count}
        one={<>あなたは <Num>1</Num> 個のアイテムを持っています。</>}
        other={<>あなたは <Num>{count}</Num> 個のアイテムを持っています。</>}
      />
    </T>
  );
}

利用可能な複数形はロケールに依存し、Unicode CLDR 複数形ルールに従います。

例

<Branch> の例

<Branch> コンポーネントは、提供された branch プロップに基づいてコンテンツを動的にレンダリングします。 この例では、ユーザーのサブスクリプションプランに基づいて異なる説明を表示します。

import { Branch } from 'gt-next';
 
export default function SubscriptionDetails({ plan }) {
  return (
    <Branch
      branch={plan}
      free={<p>あなたは無料プランを利用しています。より多くの機能をアンロックするにはアップグレードしてください！</p>}
      premium={<p>あなたはプレミアムプランを楽しんでおり、すべての機能にフルアクセスできます。</p>}
      enterprise={<p>あなたはエンタープライズプランを利用しています。カスタマイズされたソリューションについてはサポートにお問い合わせください。</p>}
    >
      <p>サブスクリプションプランが検出されませんでした。</p>
    </Branch>
  );
}

• branch プロップは、表示するプランメッセージを決定します。
• plan が "free", "premium", または "enterprise" の場合、対応するメッセージが表示されます。
• plan がこれらの値のいずれにも一致しない場合、フォールバックコンテンツ（`"サブスクリプションプランが検出されませんでした。"）が表示されます。

<Plural> の例

<Plural> コンポーネントは、n の値に基づいて単数形と複数形のコンテンツを動的に処理します。 この例では、ユーザーの受信トレイにある未読メッセージの数を表示します。

import { T, Plural, Num } from 'gt-next';
 
export default function UnreadMessages({ unreadCount }) {
  return (
    <T id="unread_messages">
      <Plural
        n={unreadCount}
        one={<>未読メッセージが <Num>{unreadCount}</Num> 件あります。</>}
        other={<>未読メッセージが <Num>{unreadCount}</Num> 件あります。</>}
      />
    </T>
  );
}

• n プロップは未読メッセージの数を指定します。
• unreadCount が 1 の場合、次のようにレンダリングされます: "未読メッセージが 1 件あります。"
• その他の値の場合、次のようにレンダリングされます: "未読メッセージが X 件あります。", ここで X は <Num> によってフォーマットされた unreadCount の値です。

よくある落とし穴

ブランチ値の欠如

ブランチ値が提供されていないか、いずれのキーとも一致しない場合、<Branch> コンポーネントはフォールバックの子コンテンツをレンダリングします。 可能なブランチキーがブランチプロップに渡される値と一致することを常に確認してください。

import { Branch } from 'gt-next';
 
export default function StatusMessage({ status }) {
  return (
    <Branch
      branch={status}
      active={<p>ユーザーはアクティブです。</p>}
      inactive={<p>ユーザーは非アクティブです。</p>}
    >
      <p>ステータス不明。</p>
    </Branch>
  );
}

status が undefined または active や inactive 以外の値の場合、フォールバックコンテンツ “ステータス不明。” が表示されます。

複数形の欠如

フォールバック言語で必要なすべての複数形を指定することを忘れないでください。 これにより、gt-next はアプリケーションが常に表示するフォールバックコンテンツを持つことを保証します。

メモ

• ブランチングコンポーネントは、アプリケーション内で動的かつローカライズされたコンテンツを管理するために不可欠です。
• <Branch> コンポーネントは非常に柔軟で、さまざまな条件や状態に適応できます。
• <Plural> コンポーネントは、ロケール固有のルールに自動的に従うことで、複数形の処理を簡素化します。
• より良いエラーハンドリングとユーザーエクスペリエンスのために、常にフォールバックの children プロップを含めてください。

次のステップ

• 詳細については、APIリファレンスの<Branch>および<Plural>を確認してください。
• Unicode CLDR Pluralization Rulesで、複数形のルールと分岐ロジックについてさらに学びましょう。
• リファレンスガイドのVariable Componentsを探索してください。