# react-native: ローカル翻訳の保存
URL: https://generaltranslation.com/ja/docs/react-native/guides/local-tx.mdx
---
title: ローカル翻訳の保存
description: CDN ではなく、翻訳をアプリのバンドル内に保存します
---

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


## ローカル翻訳とは？

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

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

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

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

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

## トレードオフ

### ローカル翻訳の利点

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

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

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

## セットアップ

### ステップ1: loadTranslations関数を作成

以下の内容で `./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-native/api/components/gtprovider) コンポーネントの props として `loadTranslations` を渡します。

```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react-native';
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...>
```


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

loadTranslations 関数のディレクトリ構造に合わせてください:

```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-native/guides/languages) - 対応言語を設定する