Inline Translations

getMessages

getMessages() 文字列翻訳関数のAPIリファレンス

概要

getMessages 関数は、ビルド時に msg が出力する encoded string を翻訳するための非同期関数です。

const m = await getMessages();

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

Buildtime Translation: getMessages の翻訳はビルド時、アプリのデプロイ前に実行されます。 msg の encoded string を渡すと、ユーザーの好みの言語に翻訳されます。

リファレンス

パラメータ

なし

戻り値

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

Promise<(encodedContent: string, options?: Record<string, any>) => string>
名称説明
encodedContentstring翻訳対象の、msg から生成された encoded string コンテンツ。
options?Record<string, any>encoded string 内の variables を上書きするための任意のパラメータ。

動作

本番環境

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

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

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

開発

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

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


基本的な使い方

msg が出力する encoded string を翻訳するには、getMessages を使用できます。

import { msg, getMessages } from 'gt-next/server';

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

export default async function TranslateGreeting() {
  const m = await getMessages();

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

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

variables を使用する

encoded string に含まれる variables を上書きできます。

import { msg, getMessages } from 'gt-next/server';

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

export default async function TranslateGreeting() {
  const m = await getMessages();

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

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

ICU message format の使用

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

import { msg, getMessages } from 'gt-next/server';

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

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

ICU message format は、variables を整形・表示するための強力な方法です。 くわしくは、ICU message format のドキュメントをご覧ください。


注意事項

  • getMessages 関数はサーバーサイド関数で、msg が出力する encoded string を翻訳します。
  • getMessages を用いた翻訳は、実行時ではなくビルド処理中(開発時を除く)に行われます。

次のステップ

  • ビルド時にencoded stringからクライアントサイドで文字列を翻訳するには、useMessages を参照してください。
  • 翻訳用に文字列をエンコードする方法は、msg を参照してください。
  • 実行時の翻訳については、tx および <Tx> を参照してください。

このガイドはどうでしたか?

getMessages