# gt-react: General Translation React SDK: ローカル翻訳の保存
URL: https://generaltranslation.com/ja/docs/react/guides/local-tx.mdx
---
title: ローカル翻訳の保存
description: CDNを使わずに、翻訳をアプリのバンドル内に保存します
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## ローカル翻訳とは？

ローカル翻訳は、CDN (Content Distribution Network) から取得するのではなく、アプリのバンドル内に保存される翻訳です。ビルドプロセスに `gt translate` コマンドを追加すると、JSON 形式の翻訳が生成されます。最後のステップは、これらの翻訳をアプリ内で使えるようにすることです。

これを行う方法は 2 つあります。

1. **アプリのバンドル内** (ローカル) : 生成後の翻訳をアプリのバンドルに保存する
2. **CDN** (デフォルト) : runtime に CDN から翻訳を取得する

デフォルトでは、`gt-react` は General Translation の CDN から翻訳を取得します。API を使ってアプリを翻訳すると、翻訳は自動的にその CDN に保存されます。

<Callout>
  **デフォルトの動作:** GT はデフォルトで CDN ストレージを使用します。ローカルストレージに切り替えるのは、その特定の利点が必要な場合だけにしてください。
</Callout>

## トレードオフ

### ローカル翻訳のメリット

* **読み込みが速い**: ローカル翻訳はアプリから直接配信されるため、CDN から配信される翻訳よりも高速に読み込まれます
* **外部サービスに依存しない**: 翻訳の読み込み可否が CDN の稼働状況に左右されません。ロケールに対応する翻訳が見つからない場合、アプリは自動的にデフォルト言語にフォールバックします
* **オフラインでも動作**: 翻訳はアプリにバンドルされます

### ローカル翻訳のデメリット

* **バンドルサイズの増加**: ローカル翻訳を使うとアプリのバンドルサイズが増え、初回読み込みが遅くなる可能性があります
* **コンテンツ管理**: 翻訳を修正するたびに、新しい翻訳を反映したアプリを再デプロイする必要があります

## セットアップ

### ステップ 1: 読み込み関数を作成する

以下の内容で、`./src` 配下に `loadTranslations.[js|ts]` ファイルを追加します。

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}
```


### ステップ 2：GTProvider を設定する

[`<GTProvider>`](/docs/react/api/components/gtprovider) コンポーネントに `loadTranslations` を prop として渡します：

```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations';

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}
```


### ステップ3: CLI を設定する

設定コマンドを実行し、ローカルストレージを選択します:

```bash
npx gt configure
```

プロンプトが表示されたら、以下のように設定してください。

* **CDN に保存しますか？** &quot;No&quot; を選択します
* **翻訳ディレクトリ:** CLI は自動的に `./src/_gt` を使用します

または、`gt.config.json` ファイルを手動で設定してローカル翻訳を使用することもできます。詳しくは、[CLI 設定ドキュメント](/docs/cli/reference/config) を参照してください。


### ステップ4: 翻訳を生成する

これで、`translate` コマンドを実行すると、翻訳が自動的にダウンロードされ、コードベースに取り込まれます。

```bash
npx gt translate
```

翻訳は`src/_gt/`に保存され、アプリと一緒にバンドルされます。


## ビルドとの統合

### React のビルドプロセス

ビルドスクリプトに翻訳生成を追加します:

```json
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### CI/CD パイプライン

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## よくある問題

### 翻訳ファイルがありません

ビルド前に翻訳が生成されていることを確認してください。

```bash
# ❌ 翻訳なしでビルド
<...YOUR_BUILD_COMMAND...>

# ✅ 先に翻訳を生成する
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### インポートパスのエラー

`読み込み関数` では、ディレクトリ構造を一致させてください。

```ts
// ❌ パスが間違っています
const t = await import(`../translations/${locale}.json`);

// ✅ src/_gt の正しいパス
const t = await import(`./_gt/${locale}.json`);
```


### バンドルサイズが大きい場合

多くの言語をサポートするアプリでは、コード分割を検討してください。

```ts
// 必要な場合のみ翻訳を読み込む
export default async function loadTranslations(locale: string) {
  // ロケールがアクティブな場合のみ読み込む
  if (locale === getCurrentLocale()) {
    const translations = await import(`./_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  ローカルストレージは、翻訳内容が安定していて頻繁な更新が不要なアプリに最適です。
</Callout>


## 次のステップ

* [言語ガイド](/docs/react/guides/languages) - サポートする言語を設定する