# General Translation React SDKs (gt-react, gt-next): msg
URL: https://generaltranslation.com/ja/docs/react/reference/functions/msg.mdx
---

title: msg
description: General Translation gt-react で、モジュールスコープで翻訳用の文字列を登録してエンコードします。msg の API リファレンス。

---

`msg` 関数は、翻訳用の文字列をマークしてエンコードします。これを使うと、文字列をモジュールスコープ (コンポーネントの外側) で登録し、[`useMessages`](/docs/react/reference/hooks/use-messages) を使って実行時に解決できます。

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

## 概要 [#overview]

文字列を `msg` に渡すと、エンコードされた文字列が得られます。翻訳を取得するには、そのエンコードされた値を [`useMessages`](/docs/react/reference/hooks/use-messages) に渡します。

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

*注: `msg` は入力をエンコードするため、そのままでは render できません。元の文字列を復元するには、[`decodeMsg`](/docs/node/reference/functions/decode-msg) でデコードしてください。*

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

* **抽出のための登録。** `msg` は文字列をマークし、CLI が翻訳用に抽出できるようにするとともに、[`useMessages`](/docs/react/reference/hooks/use-messages) が実行時にそれを解決できるようにします。オプションを指定しない場合は文字列をそのまま返し、指定した場合はそれらのオプションを保持したエンコードされた文字列を返します。
* **ビルド時の翻訳。** 本番環境では、登録された文字列はビルド時に翻訳されます。翻訳がない場合は元の文字列が使われます。開発環境では、翻訳はわずかな遅延を伴ってオンデマンドで行われます。
* **デコード。** `decodeMsg` は、エンコードされたメッセージから元の補間済み文字列を抽出します。[`decodeOptions`](/docs/node/reference/functions/decode-options) はオプションを抽出します。
* **配列。** `msg` は文字列の配列も受け取ります。`$id` が指定されている場合、各エントリには `${id}.${index}` という一意の id が付与されます。

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

const encoded = msg('Hello, world!');
const decoded = decodeMsg(encoded);
console.log(decoded); // "Hello, world!"
```

## パラメータ [#parameters]

| パラメータ                 | 説明                                 | 型                                                                                    | 任意  | デフォルト |
| --------------------- | ---------------------------------- | ------------------------------------------------------------------------------------ | --- | ----- |
| [`message`](#message) | 登録する文字列 (または文字列の配列) 。              | `string \| string[]`                                                                 | いいえ | —     |
| [`options`](#options) | 補間変数と、`$context` や `$id` などのオプション。 | [`InlineTranslationOptions`](/docs/react/reference/types/inline-translation-options) | はい  | —     |

### `message` [#message]

**型** `string | string[]` · **必須**

登録してエンコードする文字列です。配列を指定すると、複数の文字列を一度に登録できます。

### `options` [#options]

**型** [`InlineTranslationOptions`](/docs/react/reference/types/inline-translation-options) · **省略可能**

補間変数と、`$context`、`$id`、`$maxChars` などのオプションです。変数は文字列の解決時に埋め込まれます。

## 戻り値 [#returns]

**型** `string`

補間変数が反映されたエンコードされた文字列です。入力が配列の場合は、エンコードされた文字列の配列が返されます。結果は [`useMessages`](/docs/react/reference/hooks/use-messages) で解決してください。

## 例 [#examples]

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

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

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

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

const encodedString = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedString)}</p>;
}
// "Alice" は変数のため、翻訳されません。
```

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

// $context で曖昧さを解消する
const LABEL = msg('Bank', { $context: 'a bank of a river' });
```

`gt-react` は、登録済みの文字列内で変数をフォーマットするための [ICU message format](https://unicode-org.github.io/icu/userguide/format_parse/messages/) をサポートしています。

## メモ [#notes]

* `msg` は文字列を翻訳対象としてマークします。翻訳はビルド時に実行されます (開発時は必要に応じて実行されます) 。
* エンコードされた文字列は [`useMessages`](/docs/react/reference/hooks/use-messages) を使って解決します。