useMessages

概要

useMessages 関数は、ビルド時に msg の encoded string を翻訳するためのフックです。

const m = useMessages();

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

Buildtime Translation: useMessages の翻訳は、アプリのデプロイ前であるビルド時に実行されます。 msg から encoded string を渡すと、ユーザーの優先言語に翻訳されます。

リファレンス

パラメータ

なし

戻り値

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

(encodedContent: string, options?: Record<string, any>) => string

Name	Type	Description
`encodedContent`	`string`	翻訳対象となる、`msg` から取得したエンコード済み文字列。
`options?`	`Record<string, any>`	エンコード済み文字列に変数を埋め込むためのオプションパラメーター。

動作

本番環境

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

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

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

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

const encodedGreeting = msg('こんにちは、Alice!');

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

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

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

変数の使用

エンコードされた文字列に変数を渡せます。

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

const encodedGreeting = msg('こんにちは、{name}さん！');

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* 「こんにちは、Bobさん！」と表示されます */}
    </p>
  );
}

`msg` 変数は `m` 変数より優先される

msg と m の両方に変数を渡した場合、msg に渡された変数が m に渡された変数より優先されます。

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

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

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは "Hello, Alice!" と表示されます。変数はレンダリング時には上書きされません。

ICU メッセージ形式の使用

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

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

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

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

ICU message format は、variables をフォーマットするための強力な手段です。詳細は、ICU message format のドキュメントを参照してください。

注意事項

useMessages 関数は、msg の encoded string を翻訳するフックです。
useMessages による翻訳は、（開発環境を除き）実行時ではなく、ビルド時に行われます。

次のステップ

ビルド時に encoded string から非同期で文字列を翻訳するには、getMessagesを参照してください。
翻訳用に文字列をエンコードするには、msgを参照してください。
実行時の翻訳については、txおよび<Tx>を参照してください。

概要

useMessages 関数は、ビルド時に msg の encoded string を翻訳するためのフックです。

const m = useMessages();

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

(encodedContent: string, options?: Record<string, any>) => string

Name	Type	Description
`encodedContent`	`string`	翻訳対象となる、`msg` から取得したエンコード済み文字列。
`options?`	`Record<string, any>`	エンコード済み文字列に変数を埋め込むためのオプションパラメーター。

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

const encodedGreeting = msg('こんにちは、Alice!');

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

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

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

変数の使用

エンコードされた文字列に変数を渡せます。

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

const encodedGreeting = msg('こんにちは、{name}さん！');

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* 「こんにちは、Bobさん！」と表示されます */}
    </p>
  );
}

`msg` 変数は `m` 変数より優先される

msg と m の両方に変数を渡した場合、msg に渡された変数が m に渡された変数より優先されます。

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

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

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは "Hello, Alice!" と表示されます。変数はレンダリング時には上書きされません。

ICU メッセージ形式の使用

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

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

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

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

ICU message format は、variables をフォーマットするための強力な手段です。詳細は、ICU message format のドキュメントを参照してください。

注意事項

useMessages 関数は、msg の encoded string を翻訳するフックです。
useMessages による翻訳は、（開発環境を除き）実行時ではなく、ビルド時に行われます。

次のステップ

ビルド時に encoded string から非同期で文字列を翻訳するには、getMessagesを参照してください。
翻訳用に文字列をエンコードするには、msgを参照してください。
実行時の翻訳については、txおよび<Tx>を参照してください。

概要

useMessages 関数は、ビルド時に msg の encoded string を翻訳するためのフックです。

const m = useMessages();

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

(encodedContent: string, options?: Record<string, any>) => string

Name	Type	Description
`encodedContent`	`string`	翻訳対象となる、`msg` から取得したエンコード済み文字列。
`options?`	`Record<string, any>`	エンコード済み文字列に変数を埋め込むためのオプションパラメーター。

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

const encodedGreeting = msg('こんにちは、Alice!');

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

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

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

変数の使用

エンコードされた文字列に変数を渡せます。

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

const encodedGreeting = msg('こんにちは、{name}さん！');

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* 「こんにちは、Bobさん！」と表示されます */}
    </p>
  );
}

`msg` 変数は `m` 変数より優先される

msg と m の両方に変数を渡した場合、msg に渡された変数が m に渡された変数より優先されます。

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

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

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは "Hello, Alice!" と表示されます。変数はレンダリング時には上書きされません。

ICU メッセージ形式の使用

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

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

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

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

ICU message format は、variables をフォーマットするための強力な手段です。詳細は、ICU message format のドキュメントを参照してください。

注意事項

useMessages 関数は、msg の encoded string を翻訳するフックです。
useMessages による翻訳は、（開発環境を除き）実行時ではなく、ビルド時に行われます。

次のステップ

ビルド時に encoded string から非同期で文字列を翻訳するには、getMessagesを参照してください。
翻訳用に文字列をエンコードするには、msgを参照してください。
実行時の翻訳については、txおよび<Tx>を参照してください。

useMessages

このページについて

useMessages

このページについて

useMessages

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける