useGT()
useGT() 文字列翻訳関数のAPIリファレンス
概要
useGT()
関数は、ビルド時に文字列を翻訳するためのフックです。
const t = useGT();
<p>{ t('This text will be translated') }</p>;
ビルド時翻訳:
useGT()
の翻訳はビルド時、つまりアプリがデプロイされる前に実行されます。
翻訳された文字列に変数を渡すことはできますが、ビルド時に既知のコンテンツのみを翻訳できます。
リファレンス
パラメータ
なし
戻り値
提供されたコンテンツを翻訳するコールバック関数 t()
です。
(content: string, options?: InlineTranslationOptions) => string
名前 | 型 | 説明 |
---|---|---|
content | string | 翻訳される文字列コンテンツ。 |
options? | InlineTranslationOptions | t() の動作をカスタマイズする翻訳オプション。 |
動作
本番環境
CDプロセス中に、t()
関数内のすべてのコンテンツは、アプリケーションがデプロイされる前に翻訳されます。
これにより、すべてのロケールで高速な読み込み時間が保証されますが、ビルド時に既知のコンテンツのみを翻訳できます。
生成された翻訳は、設定に応じて(1)CDNに保存されるか、(2)アプリのビルド出力に保存されます。 そこから、翻訳されたコンテンツがユーザーに提供されます。 翻訳が見つからない場合は、元のコンテンツにフォールバックします。
こちらのデプロイメントガイドに従ってください。
開発環境
開発中、t()
関数はオンデマンドでコンテンツを翻訳します。
これは、アプリが異なる言語でどのように見えるかをプロトタイピングするのに便利です。
この動作を有効にするには、環境にDev APIキーを追加することを忘れないでください。
開発環境でのオンデマンド翻訳中に遅延が発生します。 これは本番ビルドでは発生しません。
例
基本的な使用方法
useGT()
を使用して文字列を翻訳できます。
import { useGT } from 'gt-react';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('Hello, Alice!')}
</p>
);
}
注意:「Alice」はユーザーの優先言語に翻訳されます。
変数の使用
辞書翻訳に変数を渡すことができます。
import { useGT } from 'gt-react';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('Hello, {name}!', { name: 'Alice' })}
</p>
);
}
注意:「Alice」は変数であるため、ユーザーの優先言語に翻訳されません。
ICUメッセージフォーマットの使用
gt-react
はICUメッセージフォーマットをサポートしており、変数をフォーマットすることもできます。
import { useGT } from 'gt-react';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 })}
</p>
);
}
ICUメッセージフォーマットは変数をフォーマットする強力な方法です。 詳細については、ICUメッセージフォーマットのドキュメントを参照してください。
Notes
useGT()
関数は文字列を翻訳するためのフックです。useGT()
フックは<GTProvider>
コンポーネントでラップされたコンポーネント内でのみ使用できます。useGT()
による翻訳文字列は、実行時ではなくビルドプロセス中に処理されます(開発時を除く)。
次のステップ
- 辞書を使用して文字列を翻訳するには、
useTranslations()
を参照してください。 - 翻訳のカスタマイズに関する詳細情報については、
InlineTranslationOptions
を参照してください。
このガイドはいかがですか?