Variable コンポーネント
翻訳内の動的コンテンツに Variable コンポーネントを使う方法
Variable コンポーネントを使うと、<T> コンポーネント内に動的コンテンツを安全に挿入できます。データを翻訳 API に送信せず、ローカルで書式設定とローカライズを処理するため、ユーザー名、口座番号、金融データなどの機微情報に最適です。
利用可能なコンポーネント
<Var>: フォーマットなしの生の動的コンテンツ<Num>: ロケールに応じた書式での数値表示<Currency>: 通貨記号と書式を含む通貨値<DateTime>: ロケールの慣習に沿った日付・時刻
クイックスタート
Variable コンポーネントは、動的コンテンツを扱うために <T> の中で動作します。
import { T, Var, Num, Currency, DateTime } from 'gt-react';
function UserProfile({ user }) {
return (
<T>
<p><Var>{user.name}</Var>さん、お帰りなさい！</p>
<p>アイテムは<Num>{user.itemCount}</Num>件あります。</p>
<p>残高：<Currency currency="USD">{user.balance}</Currency></p>
<p>最終ログイン：<DateTime>{user.lastLogin}</DateTime></p>
</T>
);
}Variable コンポーネントの仕組み
Variable コンポーネントは次の方法で動的コンテンツの課題を解決します：
- 動的な値をラップして、
<T>内で利用できるようにする - ローカルでの書式設定に対応し、ブラウザの組み込み i18n API を用いる
- データを外部に出さない — コンテンツは翻訳 API に送信されない
- ユーザーの現在の locale に基づくローカライズを提供する
// ❌ これは動作しません - <T> 内の動的コンテンツ
<T><p>{username} さん、こんにちは</p></T>
// ✅ これは動作します - 動的コンテンツをラップ
<T><p><Var>{username}</Var> さん、こんにちは</p></T>コンポーネント ガイド
<Var> - 生の動的コンテンツ
特別な書式設定を必要としない動的コンテンツには、<Var> を使用します。
// User information
<T>
<p>こんにちは、<Var>{user.name}</Var>さん！</p>
<p>アカウントIDは<Var>{user.accountId}</Var>です</p>
</T>
// Conditional rendering
<T>
ダッシュボード: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - 形式化された数値
<Num> を使うと、数値を locale の書式ルールに従って表示できます。
// 基本的な数値の書式設定
<T>
カートには<Num>{itemCount}</Num>件のアイテムがあります。
</T>
// 単体での使用（number.toLocaleString() と同等）
<Badge><Num>{totalItems}</Num></Badge>
// カスタム書式 options
<T>
距離: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T><Currency> - 金額の表示
金額の表現には<Currency>を使用します。
// 基本的な通貨書式（デフォルトは「USD」）
<T>
合計は<Currency>{total}</Currency>です。
</T>
// 通貨の切り替え
<T>
価格：<Currency currency="EUR">{price}</Currency>
</T>
// カスタム書式
<Currency
currency="USD"
options={{ minimumFractionDigits: 0 }}
>
{roundedAmount}
</Currency><DateTime> - 日付と時刻
日付や時刻には<DateTime>を使用します。
// 基本的な日付の書式設定
<T>
注文日：<DateTime>{orderDate}</DateTime>
</T>
// 時刻の書式設定
<T>
最終更新：<DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>
// カスタムの日付書式
<DateTime options={{
year: 'numeric',
month: 'long',
day: 'numeric'
}}>
{eventDate}
</DateTime>プライバシーとセキュリティ
データはローカルに留まる
Variable コンポーネントは、ブラウザーの Intl APIs（国際化 API） を使って、すべてのフォーマット処理をローカルで行います。動的コンテンツが翻訳 API に送信されることはありません。そのため、次のような用途に最適です:
- ユーザー名や個人情報
- 口座番号や id
- 財務データや残高
- 非公開のタイムスタンプや日付
// 安全 — 機密データはローカルにとどまります
<T>
残高：<Currency currency="USD">{balance}</Currency>
最終ログイン：<DateTime>{lastLoginTime}</DateTime>
</T>重要な例外
Variable コンポーネント内にネストされた <T> コンポーネントの扱いには注意してください。
// ⚠️ 内側の <T> の内容は翻訳に送信されます
<T>
<Var>
<T>こんにちは、世界！</T> {/* これは翻訳されます */}
{privateData} {/* これはローカルのままです */}
</Var>
</T>スタンドアロンでの使用
Variable コンポーネントは、純粋なフォーマット目的で <T> の外側でも使用できます。
// これらは各 .toLocale*() メソッドと同様に動作します
<span><Num>{count}</Num></span> // count.toLocaleString() と同等
<span><Currency currency="USD">{price}</Currency></span> // 価格のフォーマット
<span><DateTime>{date}</DateTime></span> // date.toLocaleDateString() と同等よくある課題
ローカリゼーションのオプションを無視しない
<Currency> では、通貨の種類を指定するために必ず currency プロップを渡してください。これにより、値を表示する際に正しい通貨記号と書式が適用されます。
// ❌ 既定は USD（米ドル）—ユーザーの想定と異なる場合があります
<T>
この商品の価格は<Currency>{price}</Currency>です
</T>
// ✅ 通貨を明示的に指定する
<T>
この商品の価格は<Currency currency="EUR">{price}</Currency>です
</T>他のコンポーネントにも、フォーマットをカスタマイズできるオプションの props があります。
// Basic formatting
<T>
在庫 <Num>{count}</Num> 点
</T>
// Custom formatting
<T>
完了率 <Num options={{ style: 'percent' }}>{percentage}</Num>
</T>
// Date formatting
<T>
最終更新: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>次のステップ
- Branching Components ガイド - 翻訳に条件分岐ロジックを追加する
- 文字列翻訳ガイド - JSX を使わずにプレーンテキストを翻訳する
- APIリファレンス:
このガイドはいかがですか?