概要

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

<T>
    今日は
    {" お店に"}
    <p>
        <b>食料品を買いに</b>行きました。
    </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> は子要素を翻訳します。

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={<>アイテムが複数あります。</>} 
            />
        </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>翻訳はありません</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>これは有効です！</b></div> {/* 翻訳されます */}

            
            <ValidTranslation>
                こんにちは、世界！  {/* 翻訳されます */}
            </ValidTranslation> 

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

注意事項

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

次のステップ

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