<T>

概要

<T> コンポーネントは gt-react の主要な翻訳メソッドです。

<T id="example"> // [!code highlight]
    今日、私は
    {" 店に行きました"}
    <p>
        <b>買う</b>ために <i>食料品</i>を。
    </p>
</T> 

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

リファレンス

Props

説明

戻り値

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

挙動

本番環境

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

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

こちらのデプロイメントガイドに従ってください。

開発環境

開発中は、<T> 関数が要求に応じてコンテンツを翻訳します。 これは、アプリが異なる言語でどのように見えるかをプロトタイプするのに役立ちます。 この動作を有効にするには、環境にDev APIキーを追加することを忘れないでください。

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

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

例

基本的な使い方

<T> コンポーネントは、id とその子要素を使用して単純な文字列を翻訳できます。 <T> コンポーネントは、翻訳にアクセスするために <GTProvider> 内で使用する必要があることを忘れないでください。

import { T } from 'gt-react';
 
export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            こんにちは、世界！
        </T> 
    );
}

変数を使用する場合

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

import { T, Var } from 'gt-react';
 
export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            こんにちは、<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={<>アイテムが1つあります。</>}  
                plural={<>アイテムがあります。</>}  
            />  // [!code highlight]
        </T>
    );
}

制限事項

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

import { T } from 'gt-react';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // エラーが発生します // [!code highlight]
        </T>
    );
}

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

import { T } from 'gt-react';
 
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> // 翻訳されます // [!code highlight]
 
            <ValidTranslation> // 翻訳されます // [!code highlight]
                こんにちは、世界！ // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // 翻訳されません
        </T>
    );
}

メモ

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

次のステップ

• オンデマンド翻訳、変数、コンテキスト、複数形の処理などの高度な機能については、<T> デザインパターンのドキュメントを参照してください。
• 文字列の翻訳については、useGT()を参照してください。
• より高度な翻訳パターンについては、変数コンポーネントの使用および分岐コンポーネントの使用を確認してください。