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

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

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


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

* [`<Var>`](/docs/react-native/api/components/var): 書式設定なしの生の動的コンテンツ
* [`<Num>`](/docs/react-native/api/components/num): ロケールに応じて書式設定される数値
* [`<Currency>`](/docs/react-native/api/components/currency): 通貨記号と書式付きの金額
* [`<DateTime>`](/docs/react-native/api/components/datetime): ロケールの規則に従った日付と時刻

## クイックスタート

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

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

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-native/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-native/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-native/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-native/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-native/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-native/api/components/t) コンポーネントの扱いには注意してください：

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


## スタンドアロンでの使用

変数コンポーネントは、書式設定だけを行う目的で [`<T>`](/docs/react-native/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-native/api/components/currency) では、通貨の種類を指定するため、`currency` プロパティを必ず渡してください。これにより、値の表示時に正しい通貨記号と書式が使用されます。

```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> items in stock
</T>

// カスタムフォーマット
<T>
  <Num options={{ style: 'percent' }}>{percentage}</Num> completion rate
</T>

// 日付フォーマット
<T>
  Last updated: <DateTime options={{ dateStyle: 'short' }}>{lastUpdate}</DateTime>
</T>
```


## 次のステップ

* [分岐コンポーネントガイド](/docs/react-native/guides/branches) - 翻訳に条件分岐ロジックを追加する
* [文字列翻訳ガイド](/docs/react-native/guides/strings) - JSX を使わずにプレーンテキストを翻訳する
* API リファレンス:
  * [`<Var>` コンポーネント](/docs/react-native/api/components/var)
  * [`<Num>` コンポーネント](/docs/react-native/api/components/num)
  * [`<Currency>` コンポーネント](/docs/react-native/api/components/currency)