msg
msg() 文字列関数のAPIリファレンス
概要
msg 関数は、翻訳対象の文字列をマーキングしてエンコードするための関数です。
const encodedString = msg('こんにちは、世界！');エンコードされた文字列は、翻訳を取得するためにuseMessagesフックまたはgetTranslations関数に渡す必要があります。
エンコード:
msgは入力文字列をエンコードするため、JSXなどでそのまま使用することはできません。
元の文字列が必要な場合は、decodeMsgでデコードしてください。
復号
元の文字列に戻すには、decodeMsg を使って復号します。
import { msg, decodeMsg } from 'gt-react';
const encodedString = msg('Hello, world!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "Hello, world!"リファレンス
パラメーター
| 名称 | 型 | 説明 |
|---|---|---|
content | string | エンコードする文字列。 |
options? | InlineTranslationOptions | msg の動作をカスタマイズするための翻訳 options。 |
戻り値
エンコードされた文字列。挿入された variables（ある場合）は、それぞれの value に置き換えられます。
動作
本番環境
CDプロセス（継続的デリバリー／継続的デプロイ）の間、msg 関数内のコンテンツは、アプリケーションのデプロイ前に翻訳されます。
これにより、すべての対応ロケールで高速な読み込みが実現しますが、ビルド時点で把握されているコンテンツのみが翻訳対象となります。
生成された翻訳は、設定に応じて (1) CDN（コンテンツ配信ネットワーク）に保存されるか、(2) アプリのビルド出力に保存されます。 その後、翻訳済みコンテンツがユーザーに配信されます。 翻訳が見つからない場合は、元のコンテンツが表示されます。
必ずこちらのデプロイガイドに従ってください。
開発
開発中は、msg 関数が必要に応じてコンテンツを翻訳します。
これは、アプリが各言語でどのように見えるかを試作・検証するのに役立ちます。
この挙動を有効にするには、環境に Dev APIキー を追加するのを忘れないでください。
開発環境でのオンデマンド翻訳時には遅延が発生します。
これは、本番ビルドでは、コンテンツを明示的にオンデマンドで翻訳している場合を除き発生しません。
たとえば、tx や <Tx> を使用する場合です。
例
基本的な使い方
翻訳対象の文字列をマークするには、msg を使用します。
import { msg, useMessages } from 'gt-react';
const encodedString = msg('こんにちは、世界！');
export default function TranslateGreeting() {
const m = useMessages();
return (
<p>
{m(encodedString)}
</p>
);
}注: 「Hello, world!」はユーザーの優先言語に翻訳されます。
variables を使う
dictionary の翻訳に variables を渡せます。
import { msg, useMessages } from 'gt-react';
const encodedString = msg('こんにちは、{name}さん！', { name: 'Alice' });
export default function TranslateGreeting() {
const m = useMessages();
return (
<p>
{m(encodedString)}
</p>
);
}Note: 「Alice」は Variable であるため、ユーザーの希望言語には翻訳されません。
ICU メッセージ形式の使用
gt-react は ICU メッセージ形式をサポートしており、variables のフォーマットも行えます。
import { msg, useMessages } from 'gt-react';
const encodedString = msg('カートに{count, plural, =0 {商品はありません} =1 {商品が1点あります} other {商品が{count}点あります}}', { count: 10 });
export default function TranslateGreeting() {
const m = useMessages();
return (
<p>
{m(encodedString)}
</p>
);
}ICU message format は、variables をフォーマットする強力な方法です。 詳細は、ICU message format のドキュメントをご覧ください。
注意事項
msg関数は、翻訳対象として文字列をマークするための関数です。msgでマークされた文字列の翻訳は、（開発環境を除き）実行時ではなくビルド時に処理されます。
次のステップ
- 文字列の翻訳については
useMessagesをご覧ください。
このガイドはいかがですか?