# vue: useMessages
URL: https://generaltranslation.com/ja/docs/vue/reference/composables/use-messages.mdx
---

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

---

`useMessages` コンポーザブルは、[`msg()`](/docs/vue/reference/functions/msg) で登録された文字列を同期的に解決するリゾルバーを返します。通常のソース文字列も受け付け、nullish 値はそのまま保持します。

## 概要 [#overview]

モジュールスコープでソーステキストを登録し、コンポーネント内で登録済みの各文字列を解決します。

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

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

```vue title="SettingsStatus.vue"
<script setup lang="ts">
import { useMessages } from 'gt-vue';
import { savedMessage } from './messages';

const m = useMessages();
</script>

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

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

* **登録済みメッセージ。** [`msg()`](/docs/vue/reference/functions/msg) は、抽出対象としてソースを登録します。options を受け取ると、呼び出し元の options より優先されるソースとコンテキストのメタデータをエンコードします。options がない場合は、ソース文字列をそのまま返します。
* **生の文字列。** 通常の文字列は、[`useGT()`](/docs/vue/reference/composables/use-gt) の呼び出しと同様に検索され、呼び出し元の `$context` を指定できます。
* **Nullish のパススルー。** `null` は `null` を返し、`undefined` は `undefined` を返します。
* **ソースへのフォールバック。** カタログにエントリがない場合や互換性のないエントリの場合は、元のソース文字列が返されます。
* **プレーンな文字列のみ。** 波括弧はリテラルとして扱われ、ICU フォーマットや補間は行われません。

[`createGT()`](/docs/vue/reference/functions/create-gt) のカタログまたはロケールの変更に応じて更新する必要がある場合は、テンプレート、`computed`、または他のリアクティブエフェクトからリゾルバーを呼び出します。setup 中に一度解決された値は、プレーンな文字列のスナップショットです。[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) で初期化されたブラウザ SPA は、初期カタログを事前読み込みし、ロケール変更後の再読み込み時にスナップショットを再作成します。

## パラメータ [#parameters]

`useMessages` はパラメータを受け取りません。

## 戻り値 [#returns]

**型** `<T extends string | null | undefined>(message: T, options?: GTStringOptions) => T extends string ? string : T`

以下のパラメータを受け取る同期リゾルバーです。

| パラメータ                 | 説明                                | 型                                                                | 任意  | デフォルト |
| --------------------- | --------------------------------- | ---------------------------------------------------------------- | --- | ----- |
| [`message`](#message) | 登録済みメッセージ、生のソース文字列、または nullish 値。 | `string \| null \| undefined`                                    | いいえ | —     |
| [`options`](#options) | エンコードされていない生のソース文字列のコンテキスト。       | [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) | はい  | `{}`  |

### `message`

**型** `string | null | undefined` · **必須**

[`msg()`](/docs/vue/reference/functions/msg) が返す個別の文字列、静的な生のソース文字列、`null`、または `undefined`。[`msg()`](/docs/vue/reference/functions/msg) で配列が登録されている場合は、各要素を個別に解決します。

### `options`

**型** [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) · **任意** · **デフォルト** `{}`

対応フィールドは `$context?: string` のみです。これは生のソース文字列に適用されます。[`msg()`](/docs/vue/reference/functions/msg) ですでにエンコードされているコンテキストが優先されます。

## 例 [#examples]

個別のガードを設けずに、null 許容の登録済みメッセージを解決します。

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

defineProps<{ encodedMessage: string | null }>();
const m = useMessages();
</script>

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

コンテキスト付きの生の文字列を解決します：

```vue
<p>{{ m('Open', { $context: 'Adjective: an open issue' }) }}</p>
```