Variable コンポーネント
翻訳内で動的コンテンツに Variable コンポーネントを使用する方法
Variable コンポーネントを使うと、<T> コンポーネント内に動的コンテンツを安全に含められます。データを翻訳 API に送信せずにローカルで書式設定とローカライズを行うため、ユーザー名、口座番号、財務データなどの機密情報に最適です。
利用可能なコンポーネント
<Var>: フォーマットされていない生の動的コンテンツ<Num>: locale に応じた書式での数値表示<Currency>: 通貨記号とフォーマットを含む金額表示<DateTime>: locale の慣習に沿った日付・時刻表示
クイックスタート
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>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> - フォーマット済みの数値
<Num> を使うと、数値を locale の書式ルールに従って表示できます。
// 基本的な数値フォーマット
<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 に送信されることはありません。そのため、次の用途に最適です。
- ユーザー名や個人情報
- 口座番号や 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 prop を必ず渡してください。これにより、値を表示する際に適切な通貨記号と書式が使用されます。
// ❌ デフォルトは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リファレンス:
このガイドはどうでしたか？