GitHub

概要

msg 関数は、翻訳対象として文字列をマーキングし、エンコードするための関数です。

const encodedString = msg('こんにちは、世界！');

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

エンコード: msgは入力文字列をエンコードするため、JSXなどで直接使用することはできません。元の文字列をそのまま取得したい場合は、decodeMsgでデコードする必要があります。

デコード

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

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('こんにちは、世界！');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // 「こんにちは、世界！」

参考

パラメーター

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

返り値

encoded string。存在する場合は variables を補間し、対応する値に置き換えたものを返します。

挙動

本番環境

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

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

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

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

const encodedString = msg('こんにちは、世界！');

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

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

variables の使用

dictionary の翻訳に variables を渡せます。

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

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

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

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

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

ICU message format の使用

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

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

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 を参照してください。
非同期サーバーサイドコンポーネントで文字列を翻訳するには getMessages を参照してください。

概要

msg 関数は、翻訳対象として文字列をマーキングし、エンコードするための関数です。

const encodedString = msg('こんにちは、世界！');

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

デコード

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

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('こんにちは、世界！');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // 「こんにちは、世界！」

参考

パラメーター

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

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

const encodedString = msg('こんにちは、世界！');

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

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

variables の使用

dictionary の翻訳に variables を渡せます。

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

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

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

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

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

ICU message format の使用

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

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

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 を参照してください。
非同期サーバーサイドコンポーネントで文字列を翻訳するには getMessages を参照してください。

概要

msg 関数は、翻訳対象として文字列をマーキングし、エンコードするための関数です。

const encodedString = msg('こんにちは、世界！');

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

デコード

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

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('こんにちは、世界！');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // 「こんにちは、世界！」

参考

パラメーター

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

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

const encodedString = msg('こんにちは、世界！');

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

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

variables の使用

dictionary の翻訳に variables を渡せます。

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

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

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

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

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

ICU message format の使用

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

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

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 を参照してください。
非同期サーバーサイドコンポーネントで文字列を翻訳するには getMessages を参照してください。

msg

このページについて

msg

このページについて

msg

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする