<T>

概要

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

<T id="example"> // [!code highlight]
    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> は元のコンテンツを返します。

開発中のオンデマンド翻訳では遅延が発生します。 この遅延は、本番ビルドではすでにすべて翻訳されているため発生しません。

例

基本的な使い方

<T> コンポーネントは、id とその子要素を使ってシンプルな文字列を翻訳できます。 <T> コンポーネントは、翻訳にアクセスするために必ず <GTProvider> の中で使用する必要があります。

import { T } from 'gt-react';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> 
    );
}

変数を使う場合

<T> コンポーネントは、翻訳内で動的な内容のために変数を含めることができます。

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

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

複数形を使う場合

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

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  
                singular={<>You have an item.</>}  
                plural={<>You have items.</>}  
            />  // [!code highlight]
        </T>
    );
}

制限事項

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

import { T } from 'gt-react';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // will create an error // [!code highlight]
        </T>
    );
}

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

import { T } from 'gt-react';

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 // [!code highlight]

            <ValidTranslation> // will be translated // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

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

注意事項

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

次のステップ

• オンデマンド翻訳、変数、コンテキスト、複数形の処理など、より高度な機能については、<T> Design Patterns のドキュメントを参照してください。
• 文字列の翻訳については、useGT() をご覧ください。
• より高度な翻訳パターンについては、using variable components や using branching components もチェックしてみてください。