概要

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

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

<T> コンポーネントは、プレーンテキストだけでなく、複雑な JSX 構造の翻訳にも対応します。 また、variables、複数形、コンテキストに応じた翻訳を扱う機能も提供します。

リファレンス

Props

説明

戻り値

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

挙動

本番環境

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

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

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

開発

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

読み込み中は、言語が近い場合（en-US と en-GB など）を除き、<T> は undefined を返しますが、この挙動はレンダー設定でカスタマイズできます。 エラーが発生した場合、<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 における主なローカリゼーション手段です。
• 変数や複数形ルールを含むプレーンテキストや JSX 構造の翻訳には、<T> コンポーネントを使用します。
• 翻訳コンテキストにアクセスできるよう、<T> コンポーネントを必ず <GTProvider> でラップしてください。

次のステップ

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