# vue: msg
URL: https://generaltranslation.com/ja/docs/vue/reference/functions/msg.mdx
---

title: msg
description: 後で解決する静的文字列をモジュールスコープで登録します。msg の API リファレンス。

---

`msg` は、ロケールの状態を読み取ったり文字列を翻訳したりすることなく、ソース文字列を抽出対象としてマークします。登録した値は、コンポーネント内で [`useMessages()`](/docs/vue/reference/composables/use-messages) を使用して解決します。

## 概要 [#overview]

```ts
function msg<T extends string | readonly string[]>(message: T): T;
function msg<T extends string | readonly string[]>(
  message: T,
  options?: GTStringOptions
): T extends string ? string : string[];
```

登録済みの文字列はモジュールスコープで宣言します。

```ts title="src/messages.ts"
import { msg } from 'gt-vue';

export const saved = msg('Your preferences are saved.', {
  $context: 'status message',
});
```

この呼び出しはプラグインやブラウザのグローバルランタイムを使用しないため、クライアントモジュールとサーバーモジュールのどちらでも安全に使用できます。

## パラメータ [#parameters]

| パラメータ     | 説明                                  | 型                                                                | 任意  | デフォルト |
| --------- | ----------------------------------- | ---------------------------------------------------------------- | --- | ----- |
| `message` | 静的なソース文字列、または静的なソース文字列からなる読み取り専用配列。 | `string \| readonly string[]`                                    | いいえ | —     |
| `options` | 各ソース文字列に関連付けられたエンコード済みのコンテキスト。      | [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) | はい  | なし    |

サポートされているオプションは `$context` のみです。各呼び出しとすべての配列エントリは、CLI によって静的に検出可能である必要があります。

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

`options`を指定しない場合、`msg`は元の文字列または配列をそのまま返します。エクストラクターは引き続き静的な呼び出しを登録し、[`useMessages()`](/docs/vue/reference/composables/use-messages)は返されたソース文字列を解決できます。

options オブジェクトを指定すると、`msg`はプレーンな`STRING`ハッシュを計算し、ソースと`$context`を含む不透明なメタデータを付加します。[`useMessages()`](/docs/vue/reference/composables/use-messages)はこのメタデータをデコードし、解決時に渡された options よりも優先します。

options を指定した配列では、各エントリが個別にエンコードされ、新しい`string[]`が返されます。`msg`は catalog の参照、補間、ICU 処理を行いません。中かっこはリテラルテキストのままです。

## 戻り値 [#returns]

| 入力          | 戻り値の型      | 動作                           |
| ----------- | ---------- | ---------------------------- |
| オプションなしの文字列 | 推定された入力型   | 同じソース文字列を返します。               |
| オプションなしの配列  | 推定された入力型   | 同じ読み取り専用配列を返します。             |
| オプション付きの文字列 | `string`   | ソース文字列に不透明な参照メタデータを付加して返します。 |
| オプション付きの配列  | `string[]` | エンコードされた文字列からなる新しい配列を返します。   |

エンコードされた値を直接レンダリングしないでください。[`useMessages()`](/docs/vue/reference/composables/use-messages) が返す [`MessagesFunction`](/docs/vue/reference/types/messages-function) に渡してください。

## 例 [#examples]

Vue テンプレート内で登録済みのメッセージを解決します。

```vue title="src/StatusMessage.vue"
<script setup lang="ts">
import { msg, useMessages } from 'gt-vue';

const saved = msg('Your preferences are saved.', {
  $context: 'status message',
});
const m = useMessages();
</script>

<template>
  <p>{{ m(saved) }}</p>
</template>
```

複数の独立したメッセージをまとめて登録します。

```ts
const labels = msg(['Save', 'Cancel', 'Delete'] as const);
```

どちらの場合も補間は行われません。リッチコンテンツ内のランタイム値には、[`<T>`](/docs/vue/reference/components/t) と [`<Var>`](/docs/vue/reference/components/var) を使用してください。