# vue: ロケールの管理
URL: https://generaltranslation.com/ja/docs/vue/guides/managing-locales.mdx
---

title: ロケールの管理
description: Vue のロケールを宣言し、言語切り替え機能を実装して、リアクティブな変更または再読み込みによる変更を制御する方法。
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/translating-content

---

`en-US` や `fr` などのロケールコードは、ユーザーが選択した言語を適切なカタログとフォーマット規則に結び付けます。ソースロケールとターゲットロケールを設定し、Vue コンポーネント内でロケール composable を使用します。

## 利用可能なロケールを宣言する [#declare]

`gt.config.json` でソースロケールとターゲットロケールを設定します。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

`defaultLocale` はソースコンテンツの言語です。`locales` には、CLI で生成する言語を指定します。

`defaultLocale` を [`createGT()`](/docs/vue/reference/functions/create-gt) に渡します。言語切り替え機能のためにターゲットのリストを保持します。

```ts
const gt = createGT({
  defaultLocale: gtConfig.defaultLocale,
  loadTranslations,
});

const availableLocales = [gtConfig.defaultLocale, ...gtConfig.locales];
```

[`createGT()`](/docs/vue/reference/functions/create-gt) で作成したプラグインでは、ロケールコードはこのリストに限定されません。インターフェースではサポートされている値のみを提示し、ローダーでは空のカタログを返すか、サポート対象外のリクエストを明示的に拒否してください。

## アクティブなロケールを取得する [#read]

[`useLocale()`](/docs/vue/reference/composables/use-locale) は読み取り専用の Vue ref を返します。テンプレートでは自動的にアンラップされます。

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

const locale = useLocale();

watch(locale, (nextLocale) => {
  document.documentElement.lang = nextLocale;
});
</script>

<template>
  <p>Active locale: {{ locale }}</p>
</template>
```

通常のスクリプト式では `locale.value` を読み取ります。ref を読み取るコンポーネント、算出値、レンダーエフェクトは、リアクティブなロケール切り替えの完了後に更新されます。

## 言語切り替え機能を実装する [#switcher]

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) は非同期セッターを返します。読み込み中の状態を インターフェース に反映したり、エラーを処理したりできるよう、await してください：

```vue title="src/components/LocaleSwitcher.vue"
<script setup lang="ts">
import { ref } from 'vue';
import { useLocale, useSetLocale } from 'gt-vue';

const props = defineProps<{ locales: readonly string[] }>();
const locale = useLocale();
const setLocale = useSetLocale();
const changing = ref(false);

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  changing.value = true;

  try {
    await setLocale(target.value);
  } finally {
    changing.value = false;
  }
}
</script>

<template>
  <select :value="locale" :disabled="changing" @change="changeLocale">
    <option v-for="code in props.locales" :key="code" :value="code">
      {{ code }}
    </option>
  </select>
</template>
```

[`createGT()`](/docs/vue/reference/functions/create-gt)プラグインでは、setter はロケールを変更する前に、キャッシュされていないカタログを読み込みます。正常に読み込まれた結果はキャッシュされます。リクエストが重複した場合、アクティブなロケールを変更できるのは最新のリクエストのみです。

空のカタログも読み込み成功として扱われます。この場合、ロケールは変更され、ソースコンテンツがフォールバックとしてレンダリングされます。ローダーが失敗した場合、アクティブなロケールとその cookie は変更されません。

## ロケールを永続化する [#persistence]

ブラウザでは、アクティブなロケールは `generaltranslation.locale` という名前のパス全体に適用されるセッションCookie に保存されます。[`createGT()`](/docs/vue/reference/functions/create-gt) で `locale` を省略した場合、このCookieが `defaultLocale` より優先されます。

アプリでルーターまたはサーバーと別のCookieを共有する必要がある場合は、`localeCookieName` を設定します。

```ts
createGT({
  defaultLocale: 'en',
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

Cookie を直接書き込むのではなく、[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) を使用してください。ブラウザは Cookie の変更に対してリアクティブイベントを発火しないため、外部から書き込んだだけでは Vue の再レンダリングはスケジュールされません。

## リアクティブな切り替えまたは再読み込みによる切り替えを選択する [#runtime-mode]

初期化モードによって、cookie の変更後の動作が決まります。

* [`createGT()`](/docs/vue/reference/functions/create-gt) は、ページを再読み込みせずにカタログを読み込み、リアクティブなコンシューマーを更新します。
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) は cookie を書き込み、新しいロケールを事前に読み込んだ後、モジュールレベルでの [`t()`](/docs/vue/reference/functions/t) 呼び出しを再実行するためにドキュメントを再読み込みします。

SPA 初期化関数は `locales` を受け取り、保存済みまたはリクエストされたロケールがサポートされていない場合は `defaultLocale` にフォールバックします。モジュールレベルでの翻訳にこの動作が必要な場合は、[SPA 翻訳を使った開発](/docs/vue/guides/developing-spa-translations)に従ってください。

サーバーレンダリングでは、サーバー上でリクエストロケールを解決し、明示的に [`createGT()`](/docs/vue/reference/functions/create-gt) に渡します。明示的に指定した値は古いブラウザ cookie より優先され、サーバーレンダリングと hydration のロケールの整合性を保ちます。
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/storing-translations
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/translating-content