<T>

概要

<T>コンポーネントはgt-nextのメインの翻訳メソッドです。

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

<T>コンポーネントは、プレーンテキストだけでなく複雑なJSX構造の翻訳もサポートしています。 さらに、変数、複数形、コンテキスト固有の翻訳を処理する機能も提供します。

リファレンス

プロパティ

説明

戻り値

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

挙動

本番環境

CDプロセス中に、<T> 内のすべての子要素は、アプリケーションのデプロイ前に翻訳されます。 これにより、すべてのロケールで高速な読み込みが保証されますが、ビルド時に既知のコンテンツのみが翻訳可能です。

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

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

開発環境

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

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

開発環境でオンデマンド翻訳を行う際には遅延が発生します。 この遅延は、本番ビルド時には発生しません。ただし、コンテンツが明示的にオンデマンドで翻訳されている場合（例：<Tx> や tx() を使用している場合）を除きます。

例

基本的な使用方法

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

import { T } from 'gt-next';

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

変数を使用する場合

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

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

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

複数形を使用する場合

<T>コンポーネントは<Plural>コンポーネントを使用した複数形もサポートしています。

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

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

制限事項

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

import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* will create an error */}
        </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>This is valid!</b></div> {/* will be translated */}

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

            <InvalidTranslation /> {/* will not be translated */}
        </T>
    );
}

注意事項

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

次のステップ

• オンデマンド翻訳については、<Tx> コンポーネントをご覧ください。
• より高度な機能については、<T> リファレンス をご参照ください。
• 文字列の翻訳には、tx()、getGT()、useGT() をご覧ください。
• より高度な翻訳パターンについては、変数コンポーネントの使用 や 分岐コンポーネントの使用 をご確認ください。