# react-native: T コンポーネント
URL: https://generaltranslation.com/ja/docs/react-native/guides/t.mdx
---
title: T コンポーネント
description: T コンポーネントを使って JSX コンポーネントを国際化する方法
---

{/* 自動生成: 直接編集せず、content/docs-templates/ の template を編集してください。 */}

[`<T>` コンポーネント](/docs/react-native/api/components/t) は、React Native アプリケーション内の JSX コンテンツを国際化するための中心的なツールです。JSX 要素をラップし、ユーザーのロケールに応じて自動的に翻訳します。

<Callout>
  **ヒント:** [自動 JSX インジェクション](/docs/cli/features/auto-jsx-injection) を有効にすると、コンパイラによってビルド時に JSX が翻訳コンポーネントで自動的にラップされます。
  ほとんどの場合、`<T>` を手動で追加する必要はありません。特定の `id` や `context` を設定するなど、より細かく制御したい場合は、手動の `<T>` も引き続き有用です。
</Callout>

## クイックスタート

静的な JSX コンテンツは、[`<T>`](/docs/react-native/api/components/t) で囲むだけで変換できます:

```jsx
import { T } from 'gt-react-native';

// 変更前
function Greeting() {
  return <p>Hello, world!</p>;
}

// 変更後
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

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


## 基本的な使い方

[`<T>`コンポーネント](/docs/react-native/api/components/t) は、子要素として任意の JSX コンテンツを受け取れます。

```jsx
// シンプルなテキスト
<T>Welcome to our app</T>

// HTML要素
<T><h1>Page Title</h1></T>

// 複雑なネストされたJSX
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```


## 設定オプション

### コンテキストを追加する

曖昧な用語には翻訳コンテキストを指定します。

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```


## T を使う場面

[`<T>`](/docs/react-native/api/components/t) は、**静的なコンテンツにのみ**使用します。

```jsx
// ✅ 静的コンテンツは動作します
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ 動的コンテンツは使用できません
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ 動的コンテンツには変数コンポーネントを使用してください
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  変数コンポーネントと分岐コンポーネントは、動的なコンテンツを扱うために [`<T>`](/docs/react-native/api/components/t) 内で使用するよう設計されています。
  詳細は、[変数コンポーネント](/docs/react-native/guides/variables) および [分岐コンポーネント](/docs/react-native/guides/branches) ガイドを参照してください。
</Callout>


## 例

### シンプルな要素

```jsx
// 基本的なテキスト
<T>Hello, world!</T>

// テキスト付きボタン
<T><Button>Submit Form</Button></T>

// スタイル付き見出し
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### 複雑なコンポーネント

```jsx
// ナビゲーションメニュー
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// アラートメッセージ
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### 変数を使う場合

ローカライズに応じた書式設定には、変数コンポーネントを使用できます。

```jsx
// 静的テキストと動的な値を組み合わせる
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  [`<Var>` コンポーネント](/docs/react-native/api/components/var)の詳細は、[変数コンポーネントガイド](/docs/react-native/guides/variables)を参照してください。
</Callout>


## 本番環境のセットアップ

### ビルドプロセス

ビルドパイプラインに翻訳を組み込みます:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### 開発時と本番環境での挙動

* **開発環境**: 開発用 API キーを使うと、コンポーネントのレンダリング時に必要に応じて翻訳が実行されます。開発中はリアルタイムで翻訳結果を確認できます。
* **本番環境**: すべての翻訳はビルド時に事前生成され、アプリケーションの公開後に反映されます。

開発中にライブ翻訳を有効にするには、環境変数に開発用 API キーを設定してください。API キーはダッシュボードの [API Keys](https://dash.generaltranslation.com/en-US/project/api-keys) から作成できます。

### プライバシーに関する注意点

[`<T>`](/docs/react-native/api/components/t) コンポーネント内の内容は、翻訳のために GT API に送信されます。機密性の高いデータを扱う場合は、[変数コンポーネント](/docs/react-native/guides/variables) を使用して、機密情報をローカルに保持してください。

```jsx
// 安全 - 機密データはローカルに保持される
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## 1 つの `<T>` でどこまで囲むべきか

**ひとまとまりの論理的なコンテンツ**、つまり翻訳者が自然にひと続きの内容として読んで翻訳できる単位で囲んでください。

```jsx
// ✅ 良い例 — 関連コンテンツをまとめてラップすることで、翻訳者に十分なコンテキストを提供できる
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ 良い例 — 各カードは独立した単位
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ 範囲が狭すぎる — 翻訳が断片化し、コンテキストが失われる
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ 範囲が広すぎる — ページ全体をラップすると保守が困難になる
<T>
  {/* ...数百行の JSX... */}
</T>
```

**経験則:** テキストが視覚的または意味的に関連しているなら、1 つの `<T>` で囲みます。分けるのは、コンテンツが本当に独立している場合 (例: ヘッダーとフッター) だけにしてください。

1 つの `<T>` で囲むコンテンツを増やすほど、翻訳者はより適切なコンテキストを得られ、結果としてより自然な訳になります。言語によっては文の構造を組み替えたり、近くのコンテンツを参照したりする必要があるためです。


## よくある問題

### コンポーネントの境界

[`<T>`](/docs/react-native/api/components/t) が翻訳するのは直接の子要素だけで、他のコンポーネント内の内容は翻訳されません。

```jsx
// ❌ 誤り - コンポーネント内の内容は翻訳されません
function MyComponent() {
  return <p>This won't be translated</p>;
}

<T>
  <h1>This will be translated</h1>
  <MyComponent /> {/* この中の内容は翻訳されません */}
</T>

// ✅ 正しい例 - 各コンポーネントを個別にラップします
function MyComponent() {
  return <T><p>This will be translated</p></T>;
}

<T><h1>This will be translated</h1></T>
<MyComponent />
```


### T コンポーネントの入れ子

```jsx
// ❌ <T> コンポーネントをネストしないでください
<T>
  <T>Hello world</T> {/* これはしないでください */}
</T>
```


### 動的コンテンツのエラー

CLI は [`<T>`](/docs/react-native/api/components/t) 内に動的コンテンツがあるとエラーになります。動的な値は変数コンポーネントで囲んでください。

```jsx
// ❌ 誤り - 動的コンテンツはエラーになる
<T><p>Hello {username}</p></T>

// ✅ 正しい - 変数コンポーネントを使用する
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  動的な値の扱いについては[変数コンポーネントガイド](/docs/react-native/guides/variables)を、条件付きコンテンツについては[分岐コンポーネントガイド](/docs/react-native/guides/branches)を参照してください。
</Callout>


## 次のステップ

<Callout>
  **実際の動作を見る:** 動作するデモは、[`<T>` コンポーネントの基本サンプルアプリ](https://github.com/gt-examples/t-component-basics) をチェックしてください — [ライブプレビュー](https://t-component-basics.generaltranslation.dev)。
</Callout>

* [変数コンポーネントガイド](/docs/react-native/guides/variables) - JSX の翻訳内で動的なコンテンツを扱う
* [分岐コンポーネントガイド](/docs/react-native/guides/branches) - 翻訳に条件分岐ロジックを追加する