移行

概要

このガイドでは、すでにi18nライブラリを使用しているプロジェクトをgt-reactに移行するために必要な手順を説明します。

また、移行をできるだけスムーズに行うためのヒントや提案もいくつか紹介します。

前提条件

現在他のi18nライブラリを使用しているプロジェクト。
gt-reactライブラリの基本的な理解。

なぜ移行するのか？

gt-reactにプロジェクトを移行したい理由はたくさんあります。

以下はほんの一例です：

JSONファイルが不要： 二度とJSONファイルで翻訳を管理する必要はありません。すべてのコンテンツはコードと一緒にインラインで存在し、あるべき場所にあります。
自動翻訳： CLIツールで高品質でコンテキストを考慮した翻訳を生成できます。もう翻訳を待つ必要はありません。
開発環境での実験： 翻訳のホットリローディングにより、開発中に簡単に翻訳を試すことができます。

セットアップ

gt-react と gtx-cli CLI ツールをインストールします。

npm i gt-react
npm i --save-dev gtx-cli

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

プロジェクトのルートに gt.config.json ファイルを作成し、defaultLocale プロパティと locales 配列を含めます。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

アプリのルートに <GTProvider> コンポーネントを追加し、config オブジェクトを props としてスプレッドします。

import { GTProvider } from 'gt-react'
import config from './gt.config.json'

<GTProvider {...config}>
  <App />
</GTProvider>

より詳しい手順については、プロジェクトクイックスタートガイドをご覧ください。

この時点で、3つの選択肢があります：

プロジェクト全体を完全に gt-react に移行し、古い i18n ライブラリを削除する。
プロジェクト全体を移行するが、古い i18n ライブラリの辞書を引き続き使用する。
しばらくは古い i18n ライブラリを使い続け、一部のみ gt-react に移行する。

各選択肢の詳細については、移行戦略セクションをご覧ください。

移行戦略

オプション1: プロジェクト全体を完全に移行する

このオプションは最も分かりやすく、一度に最も多くのコード変更が必要になります。

プロジェクトのセットアップが完了したら、古いi18nライブラリのすべてのインスタンスを検索し、gt-reactに置き換える必要があります。

アプリがuseTranslationなどのReactフックを使用している場合は、コードベース内のすべてのuseTranslationインスタンスを検索し、useGTに置き換えます。

次に、すべての文字列キーを実際の文字列値に置き換える必要があります。

例えば、古いコードが次のようになっている場合：

dictionary.json

{
  "hello": {
    "description": "Hello, world!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

次のように置き換える必要があります：

export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// または
export default function MyComponent() {
  return <T>Hello, world!</T>
}

古いi18nライブラリのすべてのインスタンスに対してこれを行います。

オプション2: プロジェクトを完全に移行するが、古いi18nライブラリの辞書を引き続き使用する

プロジェクトをgt-reactに移行したいが、古いi18nライブラリの辞書を引き続き使用し、新しいコンテンツにのみGTのインライン機能を使用したい場合を考えてみましょう。

この場合、オプション1と似たようなことができます：

useTranslationフックなどの古いi18nライブラリのすべてのインスタンスを見つけて、useTranslationsフックに置き換えます。

useTranslationsフックはuseTranslationフックと非常に似た動作をし、同じ方法で使用できます。

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useTranslations } from 'gt-react'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

設定に関しては、プロジェクトルートまたはsrcディレクトリにdictionary.[js|ts|json]ファイルを作成する必要があります。古い辞書ファイルの内容をこの新しいファイルにコピーし、GTProviderコンポーネントに渡します。

import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>