Tx
<Tx> コンポーネントのAPIリファレンス
概要
<Tx> コンポーネントは、実行時に JSX のコンテンツを翻訳します。
<Tx>
今日は
{" お店に行きました"}
<p>
<b>買い物</b>をしに、<i>食料品</i>を少し。
</p>
</Tx> <Tx> コンポーネントは、プレーンテキストだけでなく、複雑な JSX 構造の翻訳にも対応します。
また、変数、複数形、コンテキストに応じた翻訳を扱う機能も備えています。
<Tx> はサーバーサイド専用です。
ランタイム翻訳:
<Tx> の翻訳は実行時に行われます。
つまり、その場で翻訳が実施されます。
リファレンス
Props
Prop
Type
説明
| Prop | 説明 |
|---|---|
children | 翻訳対象のコンテンツ。プレーンテキストや JSX の構造を含められます。 |
context | 翻訳の精度を高めるための追加コンテキスト。あいまいな表現の解消に役立ちます。 |
locale | 翻訳に使用する任意の locale。アプリでサポートされている中で、ブラウザーの最優先の locale が既定で使用されます。 |
挙動
<Tx> は実行時に JSX を翻訳します。
つまり、翻訳はリアルタイムで行われ、実行時になって初めて判明するコンテンツも翻訳できます。
その代わりに、オンデマンド翻訳の読み込み待ちによる遅延が発生し、体感的に大きく遅くなる場合があります。
読み込み中は、言語が近い場合（en-US と en-GB など）を除き、<Tx> は undefined を返します。この挙動はレンダー設定でカスタマイズできます。
エラーが発生した場合、<Tx> は元のコンテンツを返します。
推奨事項として、可能な限りビルド時に <T>、getGT、または useGT を使って翻訳し、
必要な場合にのみ、<Tx> や tx といったオンデマンド翻訳を使用してください。
デプロイガイドに必ず従ってください。
例
基本的な使い方
<Tx> コンポーネントは、実行時に children（子コンテンツ）を翻訳します。
import { Tx } from 'gt-next';
export default function Greeting() {
return (
<Tx id="greeting">
こんにちは、世界！
</Tx>
);
}variables を使う
<Var> コンポーネントを使うと、children を variables として指定できます。
これにより、翻訳対象外にすべきコンテンツを明示できます。
import { Tx, Var } from 'gt-next';
export default function DynamicGreeting(user) {
return (
<Tx>
こんにちは、<Var>{user.name}</Var> さん
</Tx>
);
}複数形の扱い
<T> コンポーネントは、<Plural> コンポーネントを用いた複数形ルールにも対応しています。
import { Tx, Plural } from 'gt-next';
export default function ItemCount({ count }) {
return (
<Tx>
<Plural n={count}
singular={<>アイテムが1件あります。</>}
plural={<>アイテムが複数あります。</>}
/>
</Tx>
);
}制限事項
<Tx> 関数は、その配下の要素のみを翻訳します。
import { Tx } from 'gt-next';
const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);
const InvalidTranslation = ({ children }) => (<div><b>翻訳はありません</b></div>);
export default function Example() {
return (
<Tx>
<div><b>有効です！</b></div> // 翻訳されます
<ValidTranslation> // 翻訳されます
こんにちは、世界！
</ValidTranslation>
<InvalidTranslation /> // 翻訳されません
</Tx>
);
}注: ファイル内で2つの <Tx> の間に（文字どおり）含まれているコンテンツは翻訳されます。
翻訳されていないコンテンツは、必要に応じて別の <Tx> を追加して翻訳できますが、<Tx> コンポーネントのネストは推奨されません。
注意事項
<Tx>コンポーネントは、アプリケーション内のコンテンツを実行時に翻訳するために設計されています。<Tx>コンポーネントを使用すると、variables や 複数形ルール を含むプレーンテキストや JSX 構造を翻訳できます。
次のステップ
- Buildtime Translation については、
<T>コンポーネントを確認してください。 - より高度な機能については、
<T>リファレンス を参照してください。 - 文字列の翻訳については、
tx、getGT、useGTを確認してください。
このガイドはどうでしたか？