# General Translation React SDKs (gt-react, gt-next): useMessages
URL: https://generaltranslation.com/ja/docs/react/reference/hooks/use-messages.mdx
---

title: useMessages
description: General Translation gt-react で `msg` に登録された文字列をアクティブなロケールに解決します。useMessages の API リファレンス。

---

`useMessages` フックは、[`msg`](/docs/react/reference/functions/msg) で作成されたエンコードされた文字列をアクティブなロケールに解決する関数を返します。コンポーネントの外、モジュールスコープで登録された文字列を翻訳する際に使用します。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` から import していますが、代わりに使用しているフレームワークのパッケージから import してください。*

## 概要 [#overview]

`msg` で文字列を登録し、`useMessages` が返す関数でその文字列を解決します。

```tsx
const m = useMessages();

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

*注: `gt-react` では、[`<GTProvider>`](/docs/react/reference/components/gt-provider) 配下で `useMessages` を呼び出してください。`gt-next` では、同期的なサーバーコンポーネント内でも使用できます。*

## 仕組み [#how-it-works]

* **登録済みの文字列の翻訳を返します。** 以前に [`msg`](/docs/react/reference/functions/msg) でエンコードされた文字列の翻訳を参照し、アクティブなロケールで返します。
* **そのまま返します。** `null` と `undefined` は変更せず、そのまま返されます。
* **変数の優先順位。** 変数が `msg` とリゾルバーの両方に渡された場合は、`msg` に渡した値が優先されます。
* **ビルド時の翻訳。** [`useGT`](/docs/react/reference/hooks/use-gt) と同様に、翻訳はビルド時 (または開発時に必要に応じて) に行われ、変数が翻訳されることはありません。

## パラメータ [#parameters]

`useMessages` にパラメータはありません。

## 戻り値 [#returns]

**型** `(encodedContent: string, options?: object) => string`

`msg` のエンコードされたコンテンツを、アクティブなロケール向けの文字列として解決する関数です。

| 名前               | 説明                          | 型        | 任意  |
| ---------------- | --------------------------- | -------- | --- |
| `encodedContent` | 解決対象の `msg` のエンコードされた文字列です。 | `string` | いいえ |
| `options`        | エンコードされた文字列に渡す補間変数です。       | `object` | はい  |

## 例 [#examples]

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

const encodedGreeting = msg('Hello, Alice!');

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

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

const encodedGreeting = msg('Hello, {name}!');

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

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

// msg() に渡された変数は m() に渡された変数より優先されます
const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

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

## メモ [#notes]

* `useMessages` は [`msg`](/docs/react/reference/functions/msg) のエンコードされた文字列を解決します。
* 非同期の App Router コンポーネントでは、代わりに [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) を使用してください。
* 翻訳はビルド時に行われます (開発時はオンデマンドでも行われます) 。