# vue: 文字列の翻訳
URL: https://generaltranslation.com/ja/docs/vue/guides/translating-strings.mdx
---

title: 文字列の翻訳
description: useGT と useMessages を使用して、Vue のラベル、属性、共有文字列を翻訳する方法。
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/configuring

---

プレースホルダー、アクセシビリティ用ラベル、別のコンポーネントに渡す値など、テンプレートのコンテンツとして表現できない文字列には [`useGT()`](/docs/vue/reference/composables/use-gt) を使用します。静的メッセージをあるモジュールで宣言し、別のモジュールでレンダリングする場合は、[`useMessages()`](/docs/vue/reference/composables/use-messages) と [`msg()`](/docs/vue/reference/functions/msg) を使用します。

## `useGT`で翻訳する [#use-gt]

コンポーネントのセットアップ時に[`useGT()`](/docs/vue/reference/composables/use-gt)を呼び出し、テンプレート内でその戻り値の関数を呼び出します。

```vue
<script setup lang="ts">
import { useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <input
    type="search"
    :placeholder="gt('Search products')"
    :aria-label="gt('Search')"
  />
</template>
```

CLI で抽出できるよう、文字列リテラルを使用します。カタログにエントリがない場合は、ソース文字列が返されます。

サポートされているオプションは、静的な `$context` のみです。

```vue
<button>{{ gt('Archive', { $context: 'verb on a project action' }) }}</button>
```

中括弧はそのままテキストとして扱われます。[`useGT()`](/docs/vue/reference/composables/use-gt) は ICU 構文の処理や変数の補間を行わず、`$id`、`$maxChars`、`$format` などの React の文字列オプションも受け付けません。

## 翻訳結果をリアクティブに保つ [#reactivity]

[`useGT()`](/docs/vue/reference/composables/use-gt) が返す関数は、呼び出し時にアクティブなカタログを読み取ります。ロケールまたはカタログの変更に応じて結果を更新するには、テンプレート、算出値、またはリアクティブエフェクト内から呼び出してください。

```vue
<script setup lang="ts">
import { computed } from 'vue';
import { useGT } from 'gt-vue';

const gt = useGT();
const pageTitle = computed(() => gt('Account settings'));
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>
```

`const pageTitle = gt('Account settings')` はセットアップ時に一度だけ翻訳され、スナップショットを保存します。[`createGT()`](/docs/vue/reference/functions/create-gt) プラグインによってロケールが切り替わっても、再実行されません。

## 共有メッセージを登録する [#messages]

共有モジュールで静的文字列を登録するには、[`msg()`](/docs/vue/reference/functions/msg) を使用します。これによりコンテンツが抽出対象としてマークされますが、翻訳の参照は行われません。

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

export const statusMessages = {
  active: msg('Active', { $context: 'account status' }),
  paused: msg('Paused', { $context: 'account status' }),
};
```

レンダリングする箇所で、[`useMessages()`](/docs/vue/reference/composables/use-messages) を使用して選択したメッセージを解決します。

```vue title="src/components/StatusBadge.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useMessages } from 'gt-vue';
import { statusMessages } from '../messages';

const props = defineProps<{ status: keyof typeof statusMessages }>();
const m = useMessages();
const label = computed(() => m(statusMessages[props.status]));
</script>

<template>
  <span>{{ label }}</span>
</template>
```

オプションを指定しない場合、[`msg()`](/docs/vue/reference/functions/msg) は元の文字列をそのまま返します。`$context` を指定すると、[`useMessages()`](/docs/vue/reference/composables/use-messages) が読み取る不透明な参照用メタデータが追加されます。このエンコードされた表現を解析したり、その内容について前提を置いたりしないでください。

## ランタイム値を含むコンテンツを翻訳する [#variables]

プレーンな文字列の参照では、ランタイムデータは補間されません。フレーズ全体を [`<T>`](/docs/vue/reference/components/t) で囲み、変化する値を [`<Var>`](/docs/vue/reference/components/var) でマークします：

```vue
<T>Welcome back, <Var>{{ accountName }}</Var>!</T>
```

値にロケール対応のフォーマットも必要な場合は、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency)、[`<DateTime>`](/docs/vue/reference/components/datetime) を使用します。

モジュールの評価時に静的な参照が必要なブラウザ専用 SPA では、[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) の完了を待ってから [`t()`](/docs/vue/reference/functions/t) を使用できます。必要なインポート順を維持するには、[SPA 翻訳を使用した開発](/docs/vue/guides/developing-spa-translations) に従ってください。
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/formatting-variables
- /docs/vue/guides/configuring