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

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


## 概要

`<T>` コンポーネントは、`gt-react` における主要な翻訳手段です。

```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/tutorials/quickdeploy)に従ってください。
</Callout>


## リファレンス

### プロパティ

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

### 説明

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

### 戻り値

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

***

## 挙動

### 本番環境

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

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

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

### 開発

開発時には、`<T>` 関数が必要に応じてコンテンツを翻訳します。
これは、アプリがさまざまな言語でどのように表示されるかを試す際に便利です。
この動作を有効にするには、環境変数に Dev API key を追加してください。

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

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

***

## 例

### 基本的な使い方

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

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

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';

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';

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';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // エラーになります // [!code highlight]
        </T>
    );
}
```

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

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

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` におけるローカライズの主要な方法です。
* プレーンテキストや JSX 構造 (変数や複数形を含む) の翻訳には `<T>` コンポーネントを使用してください。
* 翻訳コンテキストにアクセスするには、`<T>` コンポーネントが [`<GTProvider>`](/docs/react/api/components/gtprovider) でラップされていることを確認してください。

## 次のステップ

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