ローカル翻訳ストレージ

ローカルの翻訳とは？

ローカルの翻訳は、CDN（コンテンツ配信ネットワーク）から取得するのではなく、アプリのバンドルに同梱して保存する方式です。ビルドプロセスに gtx-cli translate コマンドを追加すると、JSON 形式で翻訳が生成されます。最後のステップは、これらの翻訳をアプリで利用できるように取り込むことです。

実現方法は2つあります:

アプリのバンドル内（ローカル）：生成後の翻訳をアプリのバンドルに保存する
CDN 内（デフォルト）：実行時に CDN から翻訳を取得する

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

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

トレードオフ

ローカル翻訳の利点

より高速な読み込み: ローカル翻訳はアプリから直接提供され、CDN（コンテンツ配信ネットワーク）経由の翻訳よりも高速に読み込まれます
外部サービスに依存しない: 翻訳の読み込みはCDNの稼働状況に左右されません。あるlocaleの翻訳が見つからない場合、アプリは自動的に既定の言語にフォールバックします
オフライン対応: 翻訳はアプリに同梱されています

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

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

セットアップ

ステップ 1: ロード関数を作成する

./src 配下に loadTranslations.[js|ts] ファイルを作成し、次の内容を追加します:

src/loadTranslations.ts

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

ステップ 2: GTProvider を設定する

<GTProvider> コンポーネントに loadTranslations をプロップとして渡します。

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 を設定する

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

npx gtx-cli configure

When prompted:

CDN に保存しますか？ 「いいえ」を選択
Translation directory: CLI は自動的に ./src/_gt を使用します

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

ステップ 4: 翻訳の生成

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

npx gtx-cli translate

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

ビルド統合

React のビルドプロセス

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

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

CI/CD パイプライン

# .github/workflows/deploy.yml
- name: 翻訳を生成する
  run: npx gtx-cli translate
  
- name: アプリケーションをビルド  
  run: npm run build

よくある問題

翻訳ファイルが見つかりません

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

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

# ✅ 最初に翻訳を生成
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

インポートパスのエラー

load 関数内でディレクトリ構造を一致させてください：

// ❌ 間違ったパス
const t = await import(`../translations/${locale}.json`);

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

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

多言語対応のアプリでは、コード分割の導入を検討してください。

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

ローカルストレージは、翻訳が安定していて頻繁な更新を必要としないアプリに最適です。

次のステップ

Languages Guide - 対応言語を構成する

ローカルの翻訳とは？

実現方法は2つあります:

アプリのバンドル内（ローカル）：生成後の翻訳をアプリのバンドルに保存する
CDN 内（デフォルト）：実行時に CDN から翻訳を取得する

トレードオフ

ローカル翻訳の利点

より高速な読み込み: ローカル翻訳はアプリから直接提供され、CDN（コンテンツ配信ネットワーク）経由の翻訳よりも高速に読み込まれます
外部サービスに依存しない: 翻訳の読み込みはCDNの稼働状況に左右されません。あるlocaleの翻訳が見つからない場合、アプリは自動的に既定の言語にフォールバックします
オフライン対応: 翻訳はアプリに同梱されています

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

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

セットアップ

ステップ 1: ロード関数を作成する

./src 配下に loadTranslations.[js|ts] ファイルを作成し、次の内容を追加します:

src/loadTranslations.ts

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

ステップ 2: GTProvider を設定する

<GTProvider> コンポーネントに loadTranslations をプロップとして渡します。

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 を設定する

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

npx gtx-cli configure

When prompted:

CDN に保存しますか？ 「いいえ」を選択
Translation directory: CLI は自動的に ./src/_gt を使用します

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

ステップ 4: 翻訳の生成

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

npx gtx-cli translate

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

ビルド統合

React のビルドプロセス

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

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

CI/CD パイプライン

# .github/workflows/deploy.yml
- name: 翻訳を生成する
  run: npx gtx-cli translate
  
- name: アプリケーションをビルド  
  run: npm run build

よくある問題

翻訳ファイルが見つかりません

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

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

# ✅ 最初に翻訳を生成
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

インポートパスのエラー

load 関数内でディレクトリ構造を一致させてください：

// ❌ 間違ったパス
const t = await import(`../translations/${locale}.json`);

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

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

多言語対応のアプリでは、コード分割の導入を検討してください。

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

ローカルストレージは、翻訳が安定していて頻繁な更新を必要としないアプリに最適です。

次のステップ

Languages Guide - 対応言語を構成する

ローカルの翻訳とは？

実現方法は2つあります:

アプリのバンドル内（ローカル）：生成後の翻訳をアプリのバンドルに保存する
CDN 内（デフォルト）：実行時に CDN から翻訳を取得する

トレードオフ

ローカル翻訳の利点

より高速な読み込み: ローカル翻訳はアプリから直接提供され、CDN（コンテンツ配信ネットワーク）経由の翻訳よりも高速に読み込まれます
外部サービスに依存しない: 翻訳の読み込みはCDNの稼働状況に左右されません。あるlocaleの翻訳が見つからない場合、アプリは自動的に既定の言語にフォールバックします
オフライン対応: 翻訳はアプリに同梱されています

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

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

セットアップ

ステップ 1: ロード関数を作成する

./src 配下に loadTranslations.[js|ts] ファイルを作成し、次の内容を追加します:

src/loadTranslations.ts

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

ステップ 2: GTProvider を設定する

<GTProvider> コンポーネントに loadTranslations をプロップとして渡します。

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 を設定する

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

npx gtx-cli configure

When prompted:

CDN に保存しますか？ 「いいえ」を選択
Translation directory: CLI は自動的に ./src/_gt を使用します

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

ステップ 4: 翻訳の生成

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

npx gtx-cli translate

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

ビルド統合

React のビルドプロセス

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

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

CI/CD パイプライン

# .github/workflows/deploy.yml
- name: 翻訳を生成する
  run: npx gtx-cli translate
  
- name: アプリケーションをビルド  
  run: npm run build

よくある問題

翻訳ファイルが見つかりません

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

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

# ✅ 最初に翻訳を生成
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

インポートパスのエラー

load 関数内でディレクトリ構造を一致させてください：

// ❌ 間違ったパス
const t = await import(`../translations/${locale}.json`);

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

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

多言語対応のアプリでは、コード分割の導入を検討してください。

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

ローカルストレージは、翻訳が安定していて頻繁な更新を必要としないアプリに最適です。

次のステップ

Languages Guide - 対応言語を構成する

ローカル翻訳ストレージ

このページについて

ローカル翻訳ストレージ

このページについて

ローカル翻訳ストレージ

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける