# vue: 翻訳をローカルに保存する
URL: https://generaltranslation.com/ja/docs/vue/guides/storing-translations.mdx
---

title: 翻訳をローカルに保存する
description: gt-vue の翻訳カタログを生成してアプリケーションにバンドルし、読み込む方法。
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/translating-content

---

`gt-vue` は、[`loadTranslations`](/docs/vue/reference/types/load-translations) コールバックを通じてターゲットロケールのカタログを受け取ります。カタログをソースツリーに生成してアプリにバンドルすることで、ランタイムで翻訳サービスに依存せずに済みます。

カタログをバンドルすると、翻訳の更新もデプロイに含まれます。ソースコンテンツまたは翻訳が変更されるたびに、アプリを再生成して再デプロイしてください。

## `output` パスを設定する [#configure]

`gt.config.json` の `gt` の出力先を、ソースディレクトリ配下のパスに設定します。`[locale]` プレースホルダーを使用すると、対象ロケールごとに1つのファイルが作成されます。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

デフォルトロケールでは、ソースコンテンツがすでにアプリケーションに含まれているため、カタログファイルは必要ありません。

## カタログを生成する [#generate]

翻訳可能なコンテンツを追加または変更したら、CLI を実行します。

```bash
npx gt translate
```

このコマンドは、サポート対象の [`<T>`](/docs/vue/reference/components/t)、[`useGT()`](/docs/vue/reference/composables/use-gt)、[`msg()`](/docs/vue/reference/functions/msg)、[`t()`](/docs/vue/reference/functions/t) の使用箇所を抽出し、ターゲットロケール用のファイルを書き出します。これらのファイルは手動で編集せず、生成物として扱ってください。

すべてのデプロイに最新のカタログを含める場合は、本番ビルドの前に翻訳生成を追加します。

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && vue-tsc -b && vite build"
  }
}
```

CLI では、ビルド環境に `GT_PROJECT_ID` と `GT_API_KEY` が必要です。本番用のキーはブラウザバンドルに含めないでください。

## Vite でカタログを読み込む [#vite]

設定した出力先に一致するインポートパスを持つ [`loadTranslations`](/docs/vue/reference/types/load-translations) コールバックを作成します。

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loadTranslations: LoadTranslations = async (locale) => {
  try {
    return (await import(`./_gt/${locale}.json`)).default;
  } catch {
    return {};
  }
};

export default loadTranslations;
```

リアクティブに読み込む場合は [`createGT()`](/docs/vue/reference/functions/create-gt) に、事前読み込み済みのブラウザ専用 SPA の場合は [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) に渡します。

上記のコールバックでは、ファイルが見つからない場合は空のカタログとして扱われるため、そのロケールではソースコンテンツが表示されます。本番用カタログが見つからない場合にロケールの変更やアプリケーションのブートストラップを阻止する必要がある場合は、代わりにエラーを reject させてください。

## 必要に応じて明示的にインポートする [#explicit-imports]

一部の bundler では、variable import で参照されるすべてのファイルを検出できません。各ターゲットが ビルド time に認識されるよう、静的な loader マップを定義します。

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loaders = {
  es: () => import('./_gt/es.json'),
  fr: () => import('./_gt/fr.json'),
};

const loadTranslations: LoadTranslations = async (locale) => {
  const load = loaders[locale as keyof typeof loaders];
  return load ? (await load()).default : {};
};

export default loadTranslations;
```

このマップは `gt.config.json` の `locales` と同期させてください。意図的にサポートしないロケールには `{}` を返すのが適切です。拒否すれば、呼び出し元は失敗を明確に認識できます。

## 別のソースから読み込む [#custom-source]

コールバックでは、バンドル済みファイルをインポートする代わりに、独自のエンドポイントからカタログを取得できます。

```ts
const loadTranslations: LoadTranslations = async (locale) => {
  const response = await fetch(`/translations/${locale}.json`);
  if (!response.ok) throw new Error(`Catalog unavailable for ${locale}`);
  return response.json();
};
```

[`createGT()`](/docs/vue/reference/functions/create-gt) は、プラグインインスタンスの存続期間中、取得に成功した各カタログをキャッシュし、同時読み込みを重複排除します。エンドポイント境界でレスポンスを検証してください。ランタイム は、リクエストされたロケールに対する完全なハッシュキー付きの [`TranslationCatalog`](/docs/vue/reference/types/translation-catalog) を想定しています。
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/managing-locales
- /docs/vue/guides/translating-content