# vue: SPA 翻訳を使った開発
URL: https://generaltranslation.com/ja/docs/vue/guides/developing-spa-translations.mdx
---

title: SPA 翻訳を使った開発
description: Vue SPA をプリロードし、モジュールスコープで t() を使って静的文字列を翻訳する方法。
related:
  links:
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations
    - /docs/vue/guides/configuring

---

ブラウザ専用のシングルページアプリでは、アプリケーションモジュールの実行前にアクティブなカタログをプリロードできます。これにより、定数やナビゲーション定義など、Vue コンポーネント外の文字列に対して、モジュールレベルで [`t()`](/docs/vue/reference/functions/t) を同期的に呼び出せます。

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) は [`useGT()`](/docs/vue/reference/composables/use-gt) を補完するものであり、これに代わるものではありません。通常のコンポーネントコンテンツには composable を使用してください。また、リアクティブなロケール切り替えが必要な Vue アプリケーションやサーバーサイドレンダリングされたアプリケーションでも使用します。

## SPA ランタイムを選択する [#choose]

次のすべての条件に当てはまる場合にのみ、[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) を使用してください。

* アプリケーションが完全にブラウザ上で実行される。
* モジュールの評価時に文字列を翻訳する必要がある。
* ロケールの変更時にページを再読み込みしても問題ない。

アプリがサーバーでレンダリングされる場合、またはページを再読み込みせずにロケールをリアクティブに切り替える必要がある場合は、[`createGT()`](/docs/vue/reference/functions/create-gt) を使用してください。

## アプリをインポートする前にブートストラップする [#bootstrap]

初期化処理は、[`t()`](/docs/vue/reference/functions/t) を呼び出すモジュールより先に実行する必要があります。小規模な非同期ブートストラップであれば、標準の Vite 6 build ターゲットで動作し、トップレベルの `await` や `build.target: 'esnext'` は不要です。

### 1. マウント関数をエクスポートする

通常の Vite エントリモジュールを、初期化済みの [`GTPlugin`](/docs/vue/reference/types/gt-plugin) を受け取る関数をエクスポートするように変更します。

```ts title="src/main.ts"
import { createApp } from 'vue';
import type { GTPlugin } from 'gt-vue';
import App from './App.vue';

export function mount(gt: GTPlugin) {
  createApp(App).use(gt).mount('#app');
}
```

### 2. 初期化して動的にインポートする

[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) の完了を待つブートストラップモジュールを作成します。その後、アプリケーションをインポートし、初期化で返されたプラグインそのものをインストールします。

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-vue';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

async function bootstrap() {
  const gt = await initializeGTSPA({
    ...gtConfig,
    loadTranslations,
  });

  const { mount } = await import('./main');
  mount(gt);
}

bootstrap().catch((error) => {
  console.error('Failed to initialize translations', error);
});
```

最初の呼び出しがページ全体の SPA ランタイムを所有します。同時に行われた呼び出しは初期化を共有し、後続の呼び出しでは同じプラグインが返されます。マウント済みのアプリに対して [`createGT()`](/docs/vue/reference/functions/create-gt) を呼び出さないでください。呼び出すと、コンポーネントの参照とモジュールレベルの参照で異なる状態が使用されます。

### 3. Vite がブートストラップを読み込むようにする

`index.html` のモジュールスクリプトを更新し、`src/main.ts` ではなく `src/index.ts` を読み込むようにします。

```html title="index.html"
<script type="module" src="/src/index.ts"></script>
```

## モジュールレベルの文字列を翻訳する [#translate]

動的なアプリケーションインポートで読み込まれるモジュールでは、[`t()`](/docs/vue/reference/functions/t) を同期的に呼び出せます。

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

export const message = t('Hello World');

export const navigation = [
  { label: t('Documentation', { $context: 'primary navigation' }), href: '/docs' },
  { label: t('Account settings'), href: '/settings' },
];
```

呼び出しでは静的なソース文字列を使用し、静的な`$context`を渡すこともできます。extractor がこれらの文字列を登録し、事前読み込み済みのカタログにより、モジュールの実行時に同期的に参照できます。

[`t()`](/docs/vue/reference/functions/t) はtagged templates、ICU構文、interpolation、`$format`、`$maxChars`をサポートしていません。Runtime値を含むcontentには、[`<Var>`](/docs/vue/reference/components/var) と組み合わせて [`<T>`](/docs/vue/reference/components/t) を使用してください。

## 初期化済みの SPA でロケールを変更する [#locales]

`gt.config.json` の `defaultLocale` と `locales` を [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) に渡します。保存済みのロケールがサポートされていない場合、次回の初期化時にデフォルトロケールへフォールバックします。

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) でロケールを変更すると、SPA ランタイムはロケール cookie を書き込み、ドキュメントを再読み込みします。再読み込みが完了するまで、現在のページは初期化時のロケールのまま維持されます。その後、モジュールレベルの呼び出しが再度実行される前に、ブートストラップが新しいカタログをプリロードします。

この再読み込みの仕組みにより、モジュールレベルの定数を安全に使用できます。ナビゲーションなしでロケールを変更する必要がある場合は、[`createGT()`](/docs/vue/reference/functions/create-gt) を使用し、代わりにテンプレートまたは算出プロパティから [`useGT()`](/docs/vue/reference/composables/use-gt) を呼び出してください。
## Next steps

- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales
- /docs/vue/guides/storing-translations
- /docs/vue/guides/configuring