# react-native: T
URL: https://generaltranslation.com/ja/docs/react-native/api/components/t.mdx
---
title: T
description: TコンポーネントのAPIリファレンス
---

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


## 概要

`<T>` コンポーネントは、`gt-react-native` の主な翻訳手段です。

```jsx
<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> // [!code highlight]
```

`<T>` コンポーネントは、プレーンテキストだけでなく、複雑な JSX 構造の翻訳にも対応しています。
さらに、変数、複数形、コンテキストに応じた翻訳を扱うための機能も備えています。

<Callout>
  **ビルド時翻訳:**
  `<T>` の翻訳はビルド時に行われます。
  つまり、レイテンシを抑えるため、翻訳はデプロイ前に実行されます。
  必ず[こちらのデプロイガイド](/docs/react-native/tutorials/quickdeploy)に従ってください。
</Callout>


## リファレンス

### Props

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id": {
      type: 'string',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### 説明

| Prop       | 説明                                          |
| ---------- | ------------------------------------------- |
| `children` | 翻訳対象のコンテンツです。プレーンテキストまたは JSX 構造を含めることができます。 |
| `id`       | 翻訳文字列の一意の識別子です。これにより、アプリ全体で一貫した翻訳を維持できます。   |
| `context`  | 翻訳をより適切にするための追加のコンテキストです。あいまいな語句の解消に役立ちます。  |

### 戻り値

指定された設定に応じて、レンダリングされた翻訳またはフォールバックコンテンツを含む `React.JSX.Element|undefined` を返します。

***

## 動作

### 本番環境

CD プロセスでは、`<T>` 内の子要素はすべて、アプリケーションのデプロイ前に翻訳されます。
これにより、すべてのロケールで高速な読み込みを実現できますが、翻訳できるのはビルド時に判明しているコンテンツに限られます。

翻訳が生成されると、設定に応じて、(1) CDN に保存されるか、(2) アプリのビルド出力に保存されます。
その後、翻訳済みコンテンツがユーザーに配信されます。
翻訳が見つからない場合は、元のコンテンツにフォールバックします。

必ず[こちらのデプロイガイド](/docs/react-native/tutorials/quickdeploy)に従ってください。

### 開発

開発中は、`<T>` 関数がコンテンツをオンデマンドで翻訳します。
これは、アプリがさまざまな言語でどのように表示されるかを試す際に役立ちます。
この動作を有効にするには、環境変数に Dev API キーを追加してください。

読み込み中は、言語が近い場合 (en-US と en-GB など) を除き、`<T>` は undefined を返します。ただし、この動作は render settings でカスタマイズできます。
エラーが発生した場合、`<T>` は元のコンテンツを返します。

開発中にオンデマンド翻訳が実行される際は、遅延が発生します。
本番ビルドでは、すべて事前に翻訳されているため、この遅延は発生しません。

***

## 使用例

### 基本的な使い方

`<T>` コンポーネントは、`id` と子要素を使ってシンプルな文字列を翻訳できます。
なお、翻訳を利用するには、`<T>` コンポーネントを [`<GTProvider>`](/docs/react-native/api/components/gtprovider) 内で使用する必要があります。

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-react-native';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> // [!code highlight]
    );
}
```


### 変数を使う場合

`<T>` コンポーネントでは、翻訳内の動的なコンテンツに変数を含めることができます。

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-react-native';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}
```


### 複数形を使う場合

`<T>` コンポーネントは、`<Plural>` コンポーネントを使った複数形の処理にも対応しています。

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-react-native';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            />  // [!code highlight]
        </T>
    );
}
```


### 制限事項

`<T>` コンポーネントは、動的なコンテンツは翻訳できません。

```jsx title="DynamicContent.jsx" copy
import { T } from 'gt-react-native';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // エラーが発生します // [!code highlight]
        </T>
    );
}
```

`<T>` 関数は、その配下の要素を翻訳します。

```jsx title="Example.jsx" copy
import { T } from 'gt-react-native';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // 翻訳されます // [!code highlight]

            <ValidTranslation> // 翻訳されます // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // 翻訳されません
        </T>
    );
}
```

<Callout>
  **注:** ひとつの目安として、ファイル内で 2 つの `<T>` の間に*文字どおり*書かれているコンテンツは、すべて翻訳されます。
  翻訳されていないコンテンツを翻訳したい場合は、別の `<T>` を追加できます。ただし、`<T>` コンポーネントをネストすることは推奨されません。
</Callout>

***


## 注記

* `<T>` コンポーネントは、アプリケーション内のコンテンツを翻訳するためのものです。`gt-react-native` でローカライズを行う基本的な方法です。
* プレーンテキストや JSX 構造 (変数や複数形を含む) の翻訳には、`<T>` コンポーネントを使用します。
* 翻訳コンテキストにアクセスするには、`<T>` コンポーネントを [`<GTProvider>`](/docs/react-native/api/components/gtprovider) でラップしてください。

## 次のステップ

* オンデマンド翻訳、変数、コンテキスト、複数形への対応などの高度な機能については、[`<T>` のデザインパターン](/docs/react-native/guides/t)のドキュメントを参照してください。
* 文字列を翻訳するには、[`useGT`](/docs/react-native/api/strings/use-gt)を参照してください。