GitHub

概要

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

const m = useMessages();

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

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

リファレンス

パラメータ

なし

戻り値

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

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

名称	Type	説明
`encodedContent`	`string`	翻訳対象の、`msg` から生成された encoded string のコンテンツ。
`options?`	`Record<string, any>`	encoded string 内の variables を上書きするための任意のパラメータ。

挙動

本番環境

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

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

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

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

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

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

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

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

variables の使用

encoded string 内の variables は上書きできます。

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは「Hello, Bob!」と表示されます。変数はレンダー時に上書きされます。

ICU message format の使用

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

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

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 のドキュメントをご参照ください。

`gt-next/client` からのインポート

"use client" ディレクティブで動作する場合は、gt-next ではなく gt-next/client からインポートしてください。

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('こんにちは、アリスさん！');

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

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

メモ

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

名称	Type	説明
`encodedContent`	`string`	翻訳対象の、`msg` から生成された encoded string のコンテンツ。
`options?`	`Record<string, any>`	encoded string 内の variables を上書きするための任意のパラメータ。

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

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

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

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

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

variables の使用

encoded string 内の variables は上書きできます。

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは「Hello, Bob!」と表示されます。変数はレンダー時に上書きされます。

ICU message format の使用

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

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

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 のドキュメントをご参照ください。

`gt-next/client` からのインポート

"use client" ディレクティブで動作する場合は、gt-next ではなく gt-next/client からインポートしてください。

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('こんにちは、アリスさん！');

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

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

メモ

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

名称	Type	説明
`encodedContent`	`string`	翻訳対象の、`msg` から生成された encoded string のコンテンツ。
`options?`	`Record<string, any>`	encoded string 内の variables を上書きするための任意のパラメータ。

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

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

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

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

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

variables の使用

encoded string 内の variables は上書きできます。

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注: これは「Hello, Bob!」と表示されます。変数はレンダー時に上書きされます。

ICU message format の使用

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

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

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 のドキュメントをご参照ください。

`gt-next/client` からのインポート

"use client" ディレクティブで動作する場合は、gt-next ではなく gt-next/client からインポートしてください。

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('こんにちは、アリスさん！');

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

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

メモ

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

次のステップ

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

useMessages

このページについて

useMessages

このページについて

useMessages

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする