GitHub

概要

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

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

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

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

復号

元の文字列に戻すには、decodeMsg で復号する必要があります

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

リファレンス

パラメーター

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

返り値

encoded string。存在する場合は、補間された変数がそれぞれの値に置き換えられます。

動作

本番環境

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

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

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

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

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

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 message format の使用

gt-react は ICU message format に対応しており、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 をご覧ください。

概要

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

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

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

復号

元の文字列に戻すには、decodeMsg で復号する必要があります

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

リファレンス

パラメーター

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

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

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

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 message format の使用

gt-react は ICU message format に対応しており、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 をご覧ください。

概要

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

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

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

復号

元の文字列に戻すには、decodeMsg で復号する必要があります

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

リファレンス

パラメーター

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

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

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

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 message format の使用

gt-react は ICU message format に対応しており、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 をご覧ください。

msg

このページについて

msg

このページについて

msg

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする