GitHub

ローカルの翻訳とは？

ローカルの翻訳は、CDN（Content Delivery Network）から取得するのではなく、アプリのバンドル内に保存されます。ビルドプロセスに 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 を構成する

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

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 に保存しますか？ 「No」を選択
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 {};
}

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

次のステップ

言語ガイド - 対応言語の設定

ローカルの翻訳とは？

取り込み方法は2つあります:

アプリのバンドル内（ローカル）：生成後、翻訳をアプリのバンドルに保存する
CDN 内（デフォルト）：実行時に 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 を構成する

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

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 に保存しますか？ 「No」を選択
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 {};
}

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

次のステップ

言語ガイド - 対応言語の設定

ローカルの翻訳とは？

取り込み方法は2つあります:

アプリのバンドル内（ローカル）：生成後、翻訳をアプリのバンドルに保存する
CDN 内（デフォルト）：実行時に 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 を構成する

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

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 に保存しますか？ 「No」を選択
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 {};
}

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

次のステップ

言語ガイド - 対応言語の設定

ローカル翻訳ストレージ

このページについて

ローカル翻訳ストレージ

このページについて

ローカル翻訳ストレージ

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする