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

名前	型	説明
`encodedContent`	`string`	翻訳対象となる `msg` からエンコードされた文字列データ。
`options?`	`Record<string, any>`	エンコードされた文字列に変数を渡すための省略可能なパラメーター。

挙動

本番運用

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>
  );
}

注記：「Alice」はユーザーの希望する言語に翻訳されます。

変数の使用

エンコード済みの文字列に変数を渡すことができます。

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

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-next';

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

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

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

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 は、Variable を整形するための強力な手段です。詳細は、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('こんにちは、Aliceさん！');

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

名前	型	説明
`encodedContent`	`string`	翻訳対象となる `msg` からエンコードされた文字列データ。
`options?`	`Record<string, any>`	エンコードされた文字列に変数を渡すための省略可能なパラメーター。

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

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

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

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

注記：「Alice」はユーザーの希望する言語に翻訳されます。

変数の使用

エンコード済みの文字列に変数を渡すことができます。

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

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-next';

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

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

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

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 は、Variable を整形するための強力な手段です。詳細は、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('こんにちは、Aliceさん！');

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

名前	型	説明
`encodedContent`	`string`	翻訳対象となる `msg` からエンコードされた文字列データ。
`options?`	`Record<string, any>`	エンコードされた文字列に変数を渡すための省略可能なパラメーター。

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

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

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

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

注記：「Alice」はユーザーの希望する言語に翻訳されます。

変数の使用

エンコード済みの文字列に変数を渡すことができます。

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

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-next';

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

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

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

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 は、Variable を整形するための強力な手段です。詳細は、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('こんにちは、Aliceさん！');

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でスターを付ける