概要

<T> コンポーネントは、gt-next で翻訳を行うための主要な手段です。

<T>
    今日は
    {" お店に行きました"}
    <p>
        <b>買う</b>ために<i>食料品</i>を少し。
    </p>
</T>

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

リファレンス

Props

説明

返り値

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

動作

本番環境

CDプロセス（継続的デリバリー／継続的デプロイ）中は、<T> 内のすべての children がアプリケーションのデプロイ前に翻訳されます。 これにより、すべての対応ロケールで高速に読み込めますが、翻訳できるのはビルド時点で判明しているコンテンツに限られます。

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

必ずこちらのデプロイガイドに従ってください。

開発

開発中は、<T> 関数がコンテンツをオンデマンドで翻訳します。 これは、アプリが異なる言語でどのように見えるかを素早く試作するのに役立ちます。 この動作を有効にするには、環境に Dev API key を追加することを忘れないでください。

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

開発環境でのオンデマンド翻訳では遅延が発生します。 この遅延は、コンテンツを明示的にオンデマンドで翻訳している場合、つまり <Tx> または tx を使用しているときを除き、本番ビルドでは発生しません。

例

基本的な使い方

<T> はその children を翻訳します。

import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            こんにちは、世界！
        </T>
    );
}

variables を使う

<Var> コンポーネントを使うと、children を variables として指定できます。 これにより、翻訳対象外のコンテンツであることを明確にできます。 通常、<Var> コンポーネントは動的なコンテンツを包みます。

import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            こんにちは、<Var>{user.name}</Var>さん！
        </T>
    );
}

複数形を扱う場合

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

import { T, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                singular={<>アイテムが1件あります。</>} 
                plural={<>アイテムが{count}件あります。</>}
            />
        </T>
    );
}

制限事項

<T> コンポーネントは動的なコンテンツを翻訳しません。

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* エラーになります */}
        </T>
    );
}

<T> 関数は、その子要素（および入れ子の要素）を翻訳します。

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>
            <div><b>これは有効です！</b></div> {/* 翻訳対象 */}

            
            <ValidTranslation>
                こんにちは、世界！  {/* 翻訳対象 */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* 翻訳対象外 */}
        </T>
    );
}

注意事項

• <T> コンポーネントは、アプリケーション内のコンテンツを翻訳するために設計されています。gt-next における主要なローカリゼーション手段です。
• <T> コンポーネントを使用して、変数や複数形ルールを含むプレーンテキストやJSX構造を翻訳します。
• クライアント側で <T> コンポーネントを使用する場合は、翻訳コンテキストにアクセスできるように、必ず <GTProvider> でラップしてください。

次のステップ

• オンデマンド翻訳については、<Tx> コンポーネントを参照してください。
• より高度な機能については、<T> リファレンス を参照してください。
• 文字列の翻訳については、tx、getGT、useGT を参照してください。