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>{name} さん、こんにちは</p></T>
// ✅ これは動作します - 動的コンテンツをラップしています
<T><p><Var>{name}</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> - 形式付き数値
数値をロケールの書式規則に従って表示するには、<Num> を使用します。
// 基本的な数値フォーマット
<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>
合計は<Currenc y>{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 ガイド - 翻訳に条件分岐ロジックを追加する
- String Translation ガイド - JSX を使わずにプレーンテキストを翻訳する
- APIリファレンス:
このガイドはいかがですか?