Variable コンポーネント
翻訳内の動的コンテンツに Variable コンポーネントを使う方法
Variable コンポーネントを使うと、<T> コンポーネント内に動的コンテンツを安全に含められます。これらはフォーマットとローカライズをローカルで処理し、データを翻訳 API に送信しないため、ユーザー名、口座番号、財務データなどの機微情報に最適です。
利用可能なコンポーネント
<Var>: フォーマットされていない生の動的コンテンツ<Num>: ロケール固有の書式で表示する数値<Currency>: 通貨記号と書式を適用した金額<DateTime>: ロケールの慣習に従った日付と時刻
クイックスタート
Variable コンポーネントは、動的コンテンツを扱うために <T> 内で機能します。
import { T, Var, Num, Currency, DateTime } from 'gt-next';
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>Hello {username}</p></T>
// ✅ これは動作します - 動的コンテンツをラップ
<T><p>Hello <Var>{username}</Var></p></T>コンポーネントガイド
<Var> - 生の動的コンテンツ
特別な書式設定を必要としない動的コンテンツには、<Var> を使用します。
// ユーザー情報
<T>
<p>こんにちは、<Var>{user.name}</Var>さん！</p>
<p>あなたのアカウントIDは<Var>{user.accountId}</Var>です</p>
</T>
// 条件付きレンダリング
<T>
ダッシュボード: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T><Num> - 数値のフォーマット
数値を locale の書式ルールで表示するには、<Num> を使用します。
// 基本的な数値フォーマット
<T>
カートに<Num>{itemCount}</Num>個のアイテムがあります。
</T>
// スタンドアロン使用（number.toLocaleString()と同等）
<Badge><Num>{totalItems}</Num></Badge>
// カスタムフォーマットオプション
<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 があります。
// 基本的なフォーマット
<T>
在庫数: <Num>{count}</Num>個
</T>
// カスタムフォーマット
<T>
完了率: <Num options={{ style: 'percent' }}>{percentage}</Num>
</T>
// 日付フォーマット
<T>
最終更新: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>次のステップ
- Branching Components ガイド - 翻訳に条件分岐ロジックを追加する
- 文字列翻訳ガイド - JSX を使わずにプレーンテキストを翻訳する
- APIリファレンス:
このガイドはどうでしたか？