概要

useGT 関数は、ビルド時に文字列を翻訳するためのフックです。

const t = useGT();

<p>{  t('このテキストは翻訳されます')  }</p>;

リファレンス

パラメータ

なし

返り値

与えられたコンテンツを翻訳するコールバック関数 t。

(content: string, options?: InlineTranslationOptions) => string

挙動

本番環境

CDプロセス（継続的デリバリー／継続的デプロイ）の間、t 関数内のコンテンツは、アプリケーションのデプロイ前に翻訳されます。 これにより、すべての対応ロケールで読み込みが高速になりますが、翻訳できるのはビルド時点で把握されているコンテンツに限られます。

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

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

開発

開発中は、t 関数が必要に応じてコンテンツを翻訳します。 これにより、アプリが各言語でどのように表示されるかを試作・確認できます。 この動作を有効にするため、環境に Dev APIキー を追加することを忘れないでください。

開発環境でのオンデマンド翻訳時には待ち時間が発生します。 これは本番ビルドでは発生しません。

例

基本的な使い方

useGT を使って文字列を翻訳できます。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('こんにちは、Alice！')}
    </p>
  );
}

注: 「Alice」はユーザーの優先言語に翻訳されます。

variables を使用する

dictionary の翻訳に variables を渡すことができます。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('こんにちは、{name}さん！', { name: 'Alice' })}
    </p>
  );
}

注意：「Alice」は変数のため、ユーザーの設定言語には翻訳されません。

ICU message format の使用

gt-react は ICU message format をサポートしており、variables のフォーマットも行えます。

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('カートに{count, plural, =0 {商品がありません} =1 {商品が1つあります} other {商品が{count}個あります}}', { count: 10 })}
    </p>
  );
}

注意事項

• useGT 関数は、文字列を翻訳するためのフックです。
• useGT フックは、<GTProvider> コンポーネントでラップされたコンポーネント内でのみ使用できます。
• useGT による翻訳は、（開発時を除き）実行時ではなくビルド時に行われます。

次のステップ

• dictionary を使って文字列を翻訳する方法については、useTranslations を参照してください。