# General Translation React SDKs (gt-react, gt-next): JSX の翻訳
URL: https://generaltranslation.com/ja/docs/react/guides/translating-jsx.mdx
---

title: JSX の翻訳
description: React、Next.js、TanStack Start、React Native で、General Translation の <T> コンポーネントを使って JSX をインプレースで翻訳する方法。
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/formatting-variables
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/translating-with-dictionaries

---

[`<T>`](/docs/react/reference/components/t) コンポーネントは、JSX の children をアクティブなロケールに翻訳します。コンテンツを source 言語で記述してこのコンポーネントで囲むと、General Translation がテキストを抽出して翻訳し、その結果をインプレースでレンダリングします。

このコンポーネントはどのフレームワークでも同じように動作し、異なるのは import するパッケージだけです。

## コンテンツを `<T>` で囲む [#wrap]

ユーザー向けテキストを含む JSX はすべて囲んでください。入れ子になったマークアップや要素も、翻訳時に保持されます。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { T } from 'gt-react';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { T } from 'gt-next';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```

    *注: Next.js では、`<T>` はサーバーコンポーネントとクライアントコンポーネントの両方で動作します。`gt-next` からの同じ import は、自動的にサーバー側またはクライアント側の実装に解決されます。*
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { T } from 'gt-tanstack-start';

    <T>
      <h1>Welcome back</h1>
      <p>Your order is on its way.</p>
    </T>;
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { T } from 'gt-react-native';

    <T>
      <Text>Welcome back</Text>
      <Text>Your order is on its way.</Text>
    </T>;
    ```

    *注: React Native では、HTML 要素ではなく `<Text>` のようなネイティブのテキストノードを囲んでください。*
  </Tab>
</Tabs>

`key` や &#96;id&#96;&#96; を割り当てる必要はありません。General Translation はコンテンツからエントリを識別します。コンテンツは静的なままにし、動的な値には variable components を使用してください ([数値と日付のフォーマット](/docs/react/guides/formatting-variables) を参照) 。

## `context`で曖昧さを解消する [#context]

同じテキストでも意味によって訳し分けが必要な場合は、`$context` を追加することで、翻訳者とエンジンがエントリを区別できるようになります。これはどのフレームワークでも同様に機能します。

```tsx
<T $context="a bank of a river">
  <span>Bank</span>
</T>;
```

## `id` でエントリを安定化する [#id]

`$id` を渡すと、周囲のマークアップを編集しても変わらない安定した識別子をエントリに付与できます。これは任意ですが、エントリへの固定参照が必要な場合に使用します。

```tsx
<T $id="home.hero.title">
  <h1>Welcome back</h1>
</T>;
```

*注: `<T>` 内の内容は静的な JSX である必要があります。条件分岐や補間値は [`<Var>`](/docs/react/reference/components/var)、[`<Plural>`](/docs/react/reference/components/plural)、または [`<Branch>`](/docs/react/reference/components/branch) に移し、周囲のテキストが翻訳可能なままになるようにしてください。*
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/translating-with-dictionaries