# gt-react: General Translation React SDK: 変数コンポーネント
URL: https://generaltranslation.com/ja/docs/react/guides/variables.mdx
---
title: 変数コンポーネント
description: 翻訳内で動的コンテンツを扱うための変数コンポーネントの使い方
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}

変数コンポーネントを使うと、[`<T>`](/docs/react/api/components/t) コンポーネント内に動的なコンテンツを安全に含められます。これらはデータを翻訳 API に送信することなく、ローカルで書式設定とローカライズを処理するため、ユーザー名、口座番号、財務データといった機密性の高い情報に最適です。


## 利用可能なコンポーネント

* [`<Var>`](/docs/react/api/components/var): 書式設定を行わない生の動的コンテンツ
* [`<Num>`](/docs/react/api/components/num): ロケールに応じて書式設定される数値
* [`<Currency>`](/docs/react/api/components/currency): 通貨記号や書式が適用された通貨値
* [`<DateTime>`](/docs/react/api/components/datetime): ロケールの慣習に従った日付と時刻

## クイックスタート

変数コンポーネントは、動的なコンテンツを扱うために [`<T>`](/docs/react/api/components/t) 内で使用します:

```jsx
import { T, Var, Num, Currency, DateTime } from 'gt-react';

function UserProfile({ user }) {
  return (
    <T>
      <p>Welcome back, <Var>{user.name}</Var>!</p>
      <p>You have <Num>{user.itemCount}</Num> items.</p>
      <p>Balance: <Currency currency="USD">{user.balance}</Currency></p>
      <p>Last login: <DateTime>{user.lastLogin}</DateTime></p>
    </T>
  );
}
```


## 変数コンポーネントの仕組み

変数コンポーネントは、次の方法で動的コンテンツの課題を解決します。

1. **動的な値をラップ**して、[`<T>`](/docs/react/api/components/t) 内で使えるようにします
2. ブラウザに組み込まれた i18n API を使って、**ローカルで書式設定を処理します**
3. **データのプライバシーを保ちます** - コンテンツが翻訳 API に送信されることはありません
4. ユーザーの現在のロケールに基づいて**ローカライズします**

```jsx
// ❌ これは動作しない - <T> 内の動的コンテンツ
<T><p>Hello {username}</p></T>

// ✅ これは動作する - 動的コンテンツをラップした場合
<T><p>Hello <Var>{username}</Var></p></T>
```


## コンポーネントガイド

### Var - 生の動的コンテンツ

特別な書式設定が不要な動的コンテンツには、[`<Var>`](/docs/react/api/components/var) を使用します:

```jsx
// ユーザー情報
<T>
  <p>Hello, <Var>{user.name}</Var>!</p>
  <p>Your account ID is <Var>{user.accountId}</Var></p>
</T>

// 条件付きレンダリング
<T>
  Dashboard: <Var>{isAdmin ? <AdminPanel /> : <UserPanel />}</Var>
</T>
```


### Num - 書式付き数値

ロケールの書式設定ルールに従う数値には、[`<Num>`](/docs/react/api/components/num) を使用します。

```jsx
// 基本的な数値書式設定
<T>
  You have <Num>{itemCount}</Num> items in your cart.
</T>

// 単独使用（number.toLocaleString() と同等）
<Badge><Num>{totalItems}</Num></Badge>

// カスタム書式設定オプション
<T>
  Distance: <Num options={{ maximumFractionDigits: 2 }}>{distance}</Num> km
</T>
```


### Currency - 金額

金額には [`<Currency>`](/docs/react/api/components/currency) を使用します。

```jsx
// 基本的な通貨書式設定（デフォルトは "USD"）
<T>
  Your total is <Currency>{total}</Currency>.
</T>

// 異なる通貨
<T>
  Price: <Currency currency="EUR">{price}</Currency>
</T>

// カスタム書式設定
<Currency 
  currency="USD" 
  options={{ minimumFractionDigits: 0 }}
>
  {roundedAmount}
</Currency>
```


### DateTime - 日付と時刻

日付と時刻には [`<DateTime>`](/docs/react/api/components/datetime) を使用します。

```jsx
// 基本的な日付書式設定
<T>
  Order placed on <DateTime>{orderDate}</DateTime>
</T>

// 時刻書式設定
<T>
  Last updated: <DateTime options={{ timeStyle: 'short' }}>{timestamp}</DateTime>
</T>

// カスタム日付書式設定
<DateTime options={{ 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}}>
  {eventDate}
</DateTime>
```


## プライバシーとセキュリティ

### データはローカルに留まります

変数コンポーネントは、ブラウザの [Intl APIs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) を使って、すべての書式設定をローカルで処理します。**動的なコンテンツが翻訳 API に送信されることはありません**。そのため、次のようなデータに最適です。

* ユーザー名や個人情報
* 口座番号や ID
* 金融データや残高
* 公開したくないタイムスタンプや日付

```jsx
// 安全 - 機密データはローカルに保持されます
<T>
  Account balance: <Currency currency="USD">{balance}</Currency>
  Last login: <DateTime>{lastLoginTime}</DateTime>
</T>
```


### 重要な例外

変数コンポーネント内で入れ子になった [`<T>`](/docs/react/api/components/t) コンポーネントを使う場合は、注意してください。

```jsx
// ⚠️ 内側の <T> コンテンツは翻訳APIに送信されます
<T>
  <Var>
    <T>Hello, world!</T>  {/* これは翻訳される */}
    {privateData}         {/* これはローカルに保持される */}
  </Var>
</T>
```


## 単体での使用

変数コンポーネントは、単なる書式設定用途であれば [`<T>`](/docs/react/api/components/t) の外でも使用できます。

```jsx
// それぞれの .toLocale*() メソッドと同様に動作します
<span><Num>{count}</Num></span>                    // count.toLocaleString()
<span><Currency currency="USD">{price}</Currency></span>  // 価格の書式設定
<span><DateTime>{date}</DateTime></span>           // date.toLocaleDateString()
```


## よくある問題

### ローカライズ設定を無視する

[`<Currency>`](/docs/react/api/components/currency) では、通貨の種類を明示するために `currency` prop を必ず指定してください。これにより、値の表示に正しい通貨記号と書式が使用されます。

```jsx
// ❌ デフォルトはUSD - ユーザーの意図と異なる場合があります
<T>
  The item costs <Currency>{price}</Currency>
</T>

// ✅ 通貨を明示的に指定する
<T>
  The item costs <Currency currency="EUR">{price}</Currency>
</T>
```

他のコンポーネントにも、書式をカスタマイズするためのオプションのpropsがあります。

```jsx
// 基本的な書式設定
<T>
  <Num>{count}</Num> 点在庫あり
</T>

// カスタム書式設定
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> 完了率
</T>

// 日付書式設定
<T>
  最終更新日: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## 次のステップ

* [Branching Components Guide](/docs/react/guides/branches) - 翻訳に条件分岐ロジックを追加する
* [String Translation Guide](/docs/react/guides/strings) - JSX を使わずにプレーンテキストを翻訳する
* API リファレンス:
  * [`<Var>` Component](/docs/react/api/components/var)
  * [`<Num>` Component](/docs/react/api/components/num)
  * [`<Currency>` Component](/docs/react/api/components/currency)