msg()

概要

msg() 関数は、翻訳用に文字列にマーキングを施してエンコードする関数です。

const encodedString = msg('Hello, world!');

エンコードされた文字列は、翻訳を取得するために useMessages() フックまたは getMessages() 関数に渡します。

エンコード: msg() は入力文字列をエンコードするため、JSX などで直接使用することはできません。元の文字列を取得したい場合は、decodeMsg() でデコードしてください。

デコード

元の文字列に戻すには、decodeMsg() でデコードします。

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('Hello, world!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "Hello, world!"

リファレンス

パラメータ

名前	型	説明
`content`	`string`	エンコードする文字列。
`options?`	`InlineTranslationOptions`	`msg()` の動作をカスタマイズするための翻訳オプション。

戻り値

エンコードされた文字列。補間された変数がある場合は、その値に置き換えられます。

動作

本番環境

CD プロセス中、msg() 関数内のコンテンツはアプリケーションのデプロイ前に翻訳されます。これにより、すべてのロケールで高速な読み込みが実現しますが、ビルド時に確定しているコンテンツのみが翻訳対象となります。

生成された翻訳は、設定に応じて (1) CDN に保存されるか、(2) アプリのビルド出力に保存されます。そこから、翻訳済みコンテンツがユーザーに配信されます。翻訳が見つからない場合は、原文コンテンツが表示されます。

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

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

const encodedString = msg('Hello, world!');

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

注: "Hello, world!" はユーザーの優先言語に翻訳されます。

変数の使用

辞書に定義された翻訳へ変数を渡せます。

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

const encodedString = msg('Hello, {name}!', { name: 'Alice' });

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

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

注: "Alice" は変数のため、ユーザーの優先言語には翻訳されません。

ICU メッセージ形式の使用

gt-next は ICU メッセージ形式をサポートしており、変数のフォーマットも可能です。

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

const encodedString = msg('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 });

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

ICU メッセージ形式は、変数を強力にフォーマットできる方法です。詳しくは、ICU メッセージ形式のドキュメントを参照してください。

注意

msg() 関数は、文字列を翻訳用にマークするための関数です。
msg() でマークされた翻訳文字列は、実行時ではなくビルド時に処理されます（開発モードを除く）。

次のステップ

文字列の翻訳方法は useMessages() を参照してください。
非同期サーバー側コンポーネントでの文字列翻訳については getMessages() を参照してください。
翻訳のカスタマイズについては InlineTranslationOptions を参照してください。