<T>

概要

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

<T> // [!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> は元のコンテンツを返します。

開発中のオンデマンド翻訳では遅延が発生します。 この遅延は、コンテンツが明示的にオンデマンドで翻訳されていない限り、本番ビルド中には発生しません。 つまり、<Tx> または tx() を使用することによってです。

例

基本的な使い方

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

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

変数を使用する場合

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

import { T, Var } from 'gt-next';
 
export default function DynamicGreeting(user) {
    return (
        <T>
            こんにちは、<Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}

複数形を使用する場合

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

import { T, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count}  
                singular={<>アイテムがあります。</>}  
                plural={<>アイテムがあります。</>}  
            />  // [!code highlight]
        </T>
    );
}

制限事項

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

import { T } from 'gt-next';
 
export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // エラーが発生します // [!code highlight]
        </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> // 翻訳されます // [!code highlight]
 
            <ValidTranslation> // 翻訳されます // [!code highlight]
                こんにちは、世界！ // [!code highlight]
            </ValidTranslation> // [!code highlight]
 
            <InvalidTranslation /> // 翻訳されません
        </T>
    );
}

メモ

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

次のステップ

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