# General Translation React SDKs (gt-react, gt-next): T
URL: https://generaltranslation.com/ja/docs/react/reference/components/t.mdx
---

title: T
description: General Translation の gt-react で JSX の children をインプレースで翻訳します。T の API リファレンス。

---

`<T>` コンポーネントは、`gt-react` の主要な翻訳手段です。JSX の children (プレーンテキストとネストされたマークアップ) を、アクティブなロケールにインプレースで翻訳します。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` からインポートしていますが、代わりにお使いのフレームワーク用パッケージからインポートしてください。*

## 概要 [#overview]

静的な JSX はすべて `<T>` で囲むと、アクティブなロケールに翻訳されます。動的な値には、[`<Var>`](/docs/react/reference/components/var) や [`<Num>`](/docs/react/reference/components/num) などの 変数コンポーネント を使用してください。

```tsx
<T>
  Today, I went to
  <p>
    the <b>store</b> to buy some <i>groceries</i>.
  </p>
</T>
```

*注: `<T>` が翻訳にアクセスできるようにするには、[`<GTProvider>`](/docs/react/reference/components/gt-provider) 内でレンダリングする必要があります。単独の文字列には、代わりに [`useGT`](/docs/react/reference/hooks/use-gt) を使用してください。*

## 仕組み [#how-it-works]

* **ビルド時の翻訳。** 本番環境では、`<T>` 内のコンテンツは、ユーザーがアプリを読み込む前のビルド (またはデプロイ) 時に翻訳されます。これにより Runtime は高速に保たれますが、翻訳できるのはビルド時点で把握できているコンテンツだけです。生成された翻訳は CDN またはアプリのビルド出力から配信され、翻訳がない場合は元のコンテンツにフォールバックします。
* **開発中はオンデマンド。** 開発用 API キーが設定されている場合、`<T>` はオンデマンドで翻訳されるため、プロトタイプ作成中でもロケールをプレビューできます。翻訳の読み込み中、`<T>` は `undefined` を返します (ただし、`en-US` と `en-GB` のように、元言語と対象言語が同じ場合を除きます) 。エラー時には元のコンテンツを返します。この遅延は本番ビルドでは発生しません。
* **子孫要素は翻訳しますが、動的な children は翻訳しません。** `<T>` は、開始タグと終了タグの間に JSX として直接書かれた内容をそのまま翻訳します。変数経由で渡したコンテンツ (たとえば `{greeting}`) は翻訳できず、エラーになります — 動的な値は変数コンポーネントでラップしてください。目安としては、2 つの `<T>` タグの間にそのまま書かれているものはすべて翻訳されます。`<T>` コンポーネントを入れ子にするのは避けてください。

## Props [#props]

| Prop                                  | 説明                     | Type        | 任意  | デフォルト |
| ------------------------------------- | ---------------------- | ----------- | --- | ----- |
| [`children`](#children)               | 翻訳する JSX コンテンツ。        | `ReactNode` | いいえ | —     |
| [`$context`](#context)                | 翻訳者が意味を判別するためのコンテキスト。  | `string`    | はい  | —     |
| [`$id`](#id)                          | エントリの安定した識別子。          | `string`    | はい  | —     |
| [`$maxChars`](#max-chars)             | 翻訳の最大文字数。              | `number`    | はい  | —     |
| [`$requiresReview`](#requires-review) | 使用前に承認が必要な翻訳としてマークします。 | `boolean`   | はい  | —     |

### `children` [#children]

**型** `ReactNode` · **必須**

翻訳するコンテンツです。プレーンテキストまたは JSX 構造を指定でき、変数コンポーネントや分岐コンポーネントを含めることもできます。コンテンツは静的である必要があります。動的な値は変数コンポーネントでラップする必要があります。

### `$context` [#context]

**型** `string` · **任意**

翻訳の精度を高めるための追加コンテキストです。曖昧な表現を解消し、翻訳者が意図した意味で訳せるようにするのに役立ちます。

### `$id` [#id]

**型** `string` · **省略可能**

翻訳エントリの一貫性を保ち、翻訳エディターで見つけやすくするための、安定した識別子です。

### `$maxChars` [#max-chars]

**型** `number` · **任意**

翻訳の最大文字数です。ライブラリによってこの上限が適用され、長すぎる出力は切り詰められます。

### `$requiresReview` [#requires-review]

**型** `boolean` · **省略可能**

翻訳済みコンテンツが使用前に承認を必要とすることを示します。自動的には提供されず、レビュー用に保留されます。

## 例 [#examples]

```tsx title="Greeting.tsx"
import { T } from 'gt-react';

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

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

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

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

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

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

export default function DynamicContent({ greeting }) {
  return (
    <T>
      {greeting} // ❌ 動的なchildrenは翻訳できません — <Var>でラップしてください // [!code highlight]
    </T>
  );
}
```

```tsx title="Descendants.tsx"
import { T } from 'gt-react';

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

export default function Example() {
  return (
    <T>
      <div><b>This is valid!</b></div> {/* translated */}

      <ValidTranslation>
        Hello, world! {/* translated */}
      </ValidTranslation>

      <InvalidTranslation /> {/* 翻訳されない — コンテンツがリテラルではないため */}
    </T>
  );
}
```

## メモ [#notes]

* `<T>` はコンテンツの翻訳に使用します。プレーンテキストや JSX 構造 (変数や複数形を含む) に使用できます。
* 翻訳 context にアクセスするには、[`<GTProvider>`](/docs/react/reference/components/gt-provider) でラップする必要があります。
* プレースホルダーやラベルなどの単独の文字列を翻訳するには、[`useGT`](/docs/react/reference/hooks/use-gt) を使用します。