ローカル翻訳

ローカル翻訳とは？

ローカル翻訳は、CDN（コンテンツ配信ネットワーク）から取得されるのではなく、アプリのバンドル内に保存されます。

例えば、gtx-cli translate コマンドをCDプロセスに追加したとします。 これにより、アプリ用の翻訳がJSON形式で生成されます。 最終ステップは、これらの翻訳をAPIから取得し、アプリ内に取り込んで利用できるようにすることです。

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

• アプリのバンドル内に保存する方法： 翻訳が生成された後、それらをアプリのバンドルに保存します。
• CDNで管理する方法（デフォルト）： 実行時にCDNから翻訳を取得します。

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

概要

このガイドでは、外部のCDN（例えば当社のもの）を使用せずに、翻訳データをReactアプリのバンドル内に保存する方法を説明します。 つまり、翻訳データがアプリのバンドル内に含まれるため、外部インフラに依存する必要がなくなります。

このガイドでは、以下の内容を順にご案内します。

トレードオフ

利点は何ですか？

1. より速い読み込み時間： ローカル翻訳はアプリから直接提供されるため、CDNから提供される翻訳よりも速く読み込まれます。

2. 外部サービスへの依存がない： アプリが翻訳を読み込めるかどうかはCDNの稼働状況に依存しません。 gt-react を使えば、指定したロケールの翻訳が見つからない場合でも、アプリは自動的にデフォルト言語にフォールバックし、元のコンテンツを表示します。

欠点は何ですか？

1. バンドルサイズの増加： ローカル翻訳はアプリと一緒に提供されるため、アプリのバンドルサイズが増加します。 そのため、クライアントでアプリの読み込みに時間がかかる場合があります。

2. コンテンツ管理： 翻訳を編集したい場合（例えば、他言語での表現が気に入らない場合）、 変更を加えるたびに新しい翻訳でアプリを再デプロイする必要があります。

セットアップ

前提条件

すでにReactアプリでGTをセットアップしていることを確認してください。 まだの場合は、まずクイックスタートガイドまたはプロジェクトセットアップを完了してください。

手順

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

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

import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations'; 

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

npx gtx-cli configure

npx gtx-cli translate

以上です！これでアプリはローカルファイルからのみ翻訳を読み込むようになります。

さらなるカスタマイズ

loadTranslations 関数をさらにカスタマイズして、データベースや独自CDNなど他のソースから翻訳を読み込むこともできます。 詳細はloadTranslations()ドキュメントをご覧ください。

注意事項

• ローカル翻訳は、CDNから翻訳を取得する代替手段です。
• ローカル翻訳を使用することには利点と欠点があり、それについてはトレードオフのセクションで説明しています。

次のステップ

• カスタム翻訳ローダーの作成方法については、loadTranslations() を参照してください。