Types
RuntimeTranslationOptions
RuntimeTranslationOptions 型のAPIリファレンス
概要
RuntimeTranslationOptions 型は、インライン翻訳に variables を渡し、そのレンダー動作を指定するために使用します。
翻訳の言語を切り替えるために locale を追加することもできます。
これは tx 関数と併せて使用します。
ランタイム翻訳:
変数をオンデマンドで翻訳するには、tx に渡す文字列内に直接含めてください。
options オブジェクト経由で tx に渡された variables は翻訳されません。
リファレンス
パラメータ
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | 各 value が文字列内のどこにマッピングされるかをキーで示すオブジェクト。 |
$locale | 翻訳の locale を指定するために、任意で variables オブジェクト内に Variable として $locale を含められます。デフォルトは、アプリでサポートされている中でブラウザーの最優先の locale になります。 |
サンプル
変数の渡し方
文字列に変数を挿入するには、{variable-name} 構文を使用します。これは、波かっこで変数の名称を囲む書式です。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>
{tx(`{username}さん、こんにちは！`,{ username: 'Brian123' })}
</div>;
};ICU メッセージ形式の使用
gt-next は ICU メッセージ形式をサポートしており、variables の書式設定も可能です。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>
{ tx(
'あなたの口座残高：{dollars, number, ::currency/USD}',
{
"dollars" : 1000000,
}
) }
</div>;
};variables を翻訳する
variables を翻訳するには、tx に渡す文字列内に直接埋め込んでください。
import { tx } from 'gt-next/server';
const Component = ({ hairColor }: { hairColor: string }) => {
return <div>{tx(
`こんにちは、{username}さん！あなたの髪色は${hairColor}です。`,
{ username: 'Brian123' }
)}</div>;
};変数 hairColor は翻訳されますが、username は翻訳されません。
locale を指定する
翻訳に使用する locale を指定できます。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>{tx('こんにちは、世界！', { $locale: 'fr' })}</div>;
};これは常にフランス語に翻訳されます。
注意
RuntimeTranslationOptionsは、実行時に文字列を翻訳するために使用します。variablesオブジェクトは、テキストに値を渡します。variablesOptionsオブジェクトは、variables の挙動を定義します。
次のステップ
- インライン文字列の翻訳については、
txを参照してください。 - フォーマットの options の詳細については、
ICU message formatを参照してください。
このガイドはいかがですか?