概要

useMessages 関数は、ビルド時に msg から生成された encoded string を翻訳するためのフックです。

const m = useMessages();

<p>{  m(encodedString)  }</p>;

参考資料

パラメータ

なし

返り値

コールバック関数 m。msg に含まれるエンコード済みコンテンツを翻訳します。

(encodedContent: string, options?: Record<string, any>) => string

動作

本番環境

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

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

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

開発

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

開発環境でのオンデマンド翻訳では遅延が発生します。 これは、本番ビルドではコンテンツをオンデマンドで明示的に翻訳している場合を除き発生しません。 つまり、tx や <Tx> を使用している場合です。

例

基本的な使い方

msg の encoded string を useMessages で翻訳できます。

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('アリスさん、こんにちは！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

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

variables の使用

encoded strings 内の variables は上書きできます。

import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('こんにちは、{name}さん！', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは「Hello, Bob!」と表示されます。変数はレンダリング時に上書きされます。

ICU message format の使用

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

import { msg, useMessages } from 'gt-react';

const encodedMessage = msg('カートに{count, plural, =0 {商品はありません} =1 {商品が1点あります} other {{count}点の商品があります}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

注意

• useMessages 関数は、msg からの encoded string を翻訳するためのフックです。
• useMessages による翻訳は、（開発環境を除き）実行時ではなくビルド時に行われます。

次のステップ

• ビルド時にエンコード済み文字列から非同期で文字列を取得・翻訳するには、getMessages を参照してください。
• 翻訳用に文字列をエンコードするには、msg を参照してください。
• 実行時の翻訳については、tx と <Tx> を参照してください。