概要

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

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

<T> コンポーネントは、プレーンテキストだけでなく、複雑な JSX 構造の翻訳にも対応します。 また、variables、複数形、文脈依存の翻訳を扱うための機能も備えています。

リファレンス

Props

説明

返り値

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

動作

本番運用

CDプロセス（継続的デリバリー／継続的デプロイ）の間、<T> の内側にある子要素は、アプリケーションのデプロイ前に翻訳されます。 これにより、すべての対応ロケールで高速な読み込みが実現されますが、ビルド時点で既知のコンテンツのみが翻訳対象となります。

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

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

開発

開発中は、<T> 関数がコンテンツをオンデマンドで翻訳します。 アプリが各言語でどのように表示されるかを試作するのに便利です。 この挙動を有効にするには、環境に Dev API key を追加することを忘れないでください。

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

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

例

基本的な使い方

<T> コンポーネントは、id と children を使ってシンプルな文字列を翻訳できます。 翻訳にアクセスするには、<T> コンポーネントを必ず <GTProvider> の内側で使用してください。

import { T } from 'gt-react';

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

variables を使う

<T> コンポーネントには、翻訳内の動的コンテンツに対応するための variables を含められます。

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>No translation</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> コンポーネントを使用して、variables や 複数形ルール を含むプレーンテキストや JSX 構造を翻訳できます。
• 翻訳コンテキストにアクセスするために、<GTProvider> で <T> コンポーネントをラップしてください。

次のステップ

• オンデマンド翻訳、variables、コンテキスト、複数形の扱いといった高度な機能については、<T> Design Patterns のドキュメントを参照してください。
• 文字列の翻訳については、useGT を参照してください。