# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<T>`
URL: https://generaltranslation.com/ja/docs/react/reference/components/t.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: JSX の children をインプレースで翻訳します。`<T>` コンポーネントの API リファレンス。

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

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#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>
```

*注: サーバーレンダリングされた `gt-react` および TanStack Start アプリでは、ロケールと翻訳は [`<GTProvider>`](/docs/react/reference/components/gt-provider) を通じて提供されます。一方、`gt-next` および `gt-react-native` アプリでは、これらの props を使用せずにフレームワークの provider を使用します。[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) で初期化された React SPA では provider は不要です。*

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

* **ビルド時の翻訳。** 本番環境では、`<T>` 内のコンテンツは、ユーザーがアプリを読み込む前のビルド (またはデプロイ) 時に翻訳されます。これにより Runtime は高速に保たれますが、翻訳できるのはビルド時点で把握できているコンテンツだけです。生成された翻訳は CDN またはアプリのビルド出力から配信され、翻訳がない場合は元のコンテンツにフォールバックします。
* **開発中はオンデマンド。** 開発時のホットリロードを設定していると、`<T>` はプロトタイプ作成中に不足している翻訳をリクエストします。クライアントでレンダリングされるコンポーネントでは、翻訳が利用可能になるまでソースコンテンツを表示し、更新中は以前の翻訳を保持できます。拒否されたクライアントの Runtime リクエストはログに記録され、繰り返し発生するエラーは重複が除外されます。Server Components の場合は、翻訳の参照を待機します。本番環境のレンダリングでは生成された翻訳が使用され、翻訳がない場合はソースコンテンツにフォールバックします。
* **子孫要素は翻訳しますが、動的な children は翻訳しません。** `<T>` は、開始タグと終了タグの間に JSX として直接書かれた内容をそのまま翻訳します。変数経由で渡したコンテンツ (たとえば `{greeting}`) は翻訳できず、エラーになります — 動的な値は変数コンポーネントでラップしてください。目安としては、2 つの `<T>` タグの間にそのまま書かれているものはすべて翻訳されます。`<T>` コンポーネントを入れ子にするのは避けてください。

## Props [#props]

| Prop                                  | 説明                     | 型        | 任意  | デフォルト |
| ------------------------------------- | ---------------------- | ----------- | --- | ----- |
| [`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` · **任意**

翻訳ツールに、正の整数で指定した最大文字数を要求します。Runtimeは翻訳済みコンテンツを切り詰めません。

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

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

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

## 例 [#examples]

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

```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 構造 (変数や複数形を含む) に使用できます。
* プロバイダーベースのセットアップでは、[`<GTProvider>`](/docs/react/reference/components/gt-provider) の配下で `<T>` をレンダリングします。React SPA と `gt-next` の同期 server component では不要ですが、`gt-next` の client component では必要です。
* プレースホルダーやラベルなどの単独の文字列を翻訳するには、[`useGT`](/docs/react/reference/hooks/use-gt) を使用します。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.