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

## 概要

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

```jsx
<T>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T>
```

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

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

***


## リファレンス

### Props

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

### 説明

| Prop       | 説明                                           |
| ---------- | -------------------------------------------- |
| `children` | 翻訳対象のコンテンツです。プレーンテキストや JSX 構造を含められます。        |
| `id`       | 翻訳文字列のオプションの一意の識別子です。指定しない場合は、ビルド時に自動生成されます。 |
| `context`  | 翻訳を調整するための追加コンテキストです。あいまいな表現を解消するのに役立ちます。    |

### 戻り値

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

***

## 挙動

### 本番環境

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

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

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

### 開発

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

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

開発時にオンデマンド翻訳を行うと、遅延が発生します。
この遅延は、本番ビルドでは、コンテンツを明示的にオンデマンドで翻訳している場合を除き発生しません。
つまり、[`<Tx>`](/docs/next/api/components/tx) または [`tx`](/docs/next/api/strings/tx) を使用している場合です。

***

## 例

### 基本的な使い方

`<T>` は子要素を翻訳します。

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

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


### 変数を使う場合

子要素を変数としてマークするには、`<Var>` コンポーネントを使用できます。
これにより、翻訳しないコンテンツを指定できます。
通常、`<Var>` コンポーネントは動的なコンテンツを囲みます。

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

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


### 複数形を使う

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

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

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


### 制限事項

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

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

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

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

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

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

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

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

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

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

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

***


## 注意

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

## 次のステップ

* オンデマンド翻訳については、[`<Tx>`](/docs/next/api/components/tx) コンポーネントを確認してください。
* より高度な機能については、[`<T>` リファレンス](/docs/next/guides/t) を参照してください。
* 文字列の翻訳については、[`tx`](/docs/next/api/strings/tx)、[`getGT`](/docs/next/api/strings/get-gt)、[`useGT`](/docs/next/api/strings/use-gt) を確認してください。