# gt-react: General Translation React SDK: 移行
URL: https://generaltranslation.com/ja/docs/react/guides/migration.mdx
---
title: 移行
description: プロジェクトをgt-reactへ移行する方法を説明します
---

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


## 概要

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

また、移行をできるだけスムーズに進めるためのヒントやポイントも紹介します。

## 前提条件

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

## なぜ移行するのか？

プロジェクトを`gt-react`に移行する理由は数多くあります。

その一部を挙げると、次のとおりです。

* **JSONファイルはもう不要:** もう翻訳をJSONファイルで管理する必要はありません。
  すべてのコンテンツを、あるべき場所であるコード内にインラインで保持できます。
* **自動翻訳:** CLIツールを使って、高品質でコンテキストを踏まえた翻訳を生成できます。
  もう翻訳を待つ必要はありません。
* **開発中に試せる:** 翻訳のホットリロードにより、開発中でも簡単に翻訳を試せます。

## セットアップ

<Steps>
  <Step>
    `gt-react` と `gt` CLI ツールをインストールします。

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm i gt-react
        npm i gt
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add gt-react
        yarn add --dev gt
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add gt-react
        bun add --dev gt
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add gt-react
        pnpm add --save-dev gt
        ```
      </Tab>
    </Tabs>
  </Step>

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

    ```json title="gt.config.json" copy
    {
      "defaultLocale": "en",
      "locales": ["en", "fr", "es"]
    }
    ```

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

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

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

    詳しい手順は、[プロジェクトのクイックスタート](/docs/react)ガイドを参照してください。
  </Step>

  <Step>
    この時点で、3 つの選択肢があります。

    1. プロジェクト全体を `gt-react` に完全移行し、古い i18n ライブラリを削除します。
    2. プロジェクトを完全移行しつつ、古い i18n ライブラリの辞書はそのまま使い続けます。
    3. 当面は古い i18n ライブラリを使い続け、プロジェクトの一部だけを `gt-react` に移行します。

    各選択肢の詳細は、[移行戦略](#strategies) セクションを参照してください。
  </Step>
</Steps>

## 移行戦略 [#strategies]

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

このオプションが最もシンプルですが、そのぶん一度に必要となるコード変更も最も多くなります。

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

アプリで `useTranslation` のような React フックを使用している場合は、コードベース内の `useTranslation` の使用箇所をすべて検索し、`useGT` に置き換えてください。

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

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

```json title="dictionary.json"
{
  "hello": {
    "description": "Hello, world!"
  }
}
```

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

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

```tsx
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` フックとほぼ同じように動作するため、同じ感覚で使えます。

<Tabs items={['Before', 'After']}>
  <Tab value="Before">
    ```tsx
    import { useTranslation } from 'react-i18next'
    export default function MyComponent() {
      const { t } = useTranslation()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>

  <Tab value="After">
    ```tsx
    import { useTranslations } from 'gt-react'
    export default function MyComponent() {
      const t = useTranslations()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>
</Tabs>

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

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

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

詳細については、[辞書](/docs/react/guides/dictionaries) ガイドを参照してください.


### オプション 3: 当面は古い i18n ライブラリを使い続け、プロジェクトの一部だけを `gt-react` に移行する

この方法が最も柔軟で、1 回で必要になるコード変更も最小限で済みます。

この場合は、オプション 2 と同様の進め方で、プロジェクトの一部だけを `gt-react` に移行できます。

たとえば、一部のコンポーネントでは引き続き古い i18n ライブラリを使い、他のコンポーネントや新しいコンテンツにのみ `gt-react` を使用できます。

<Callout type="warn">
  この方法は推奨されません。プロジェクト内で 2 つの異なる i18n ライブラリを管理する必要があり、複雑になってバグの原因になるおそれがあるためです。
</Callout>

## 移行のポイント

### 1. できるだけ `useGT` フックまたは `<T>` コンポーネントを使う

できる限り、`useGT` フックまたは `<T>` コンポーネントを使用することをおすすめします。

こうすることで、今後コンテンツを編集しやすくなり、コードベースの可読性も大幅に向上します。

### 2. 既存のコンテンツには `useTranslations` フックを使う

`useTranslations` フックは、既存の辞書をそのまま活用し続けるのに適した方法です。

移行をしやすくするための手段として提供していますが、新しいコンテンツでの使用は推奨していません。

### 3. AI の活用

AI を使ってプロジェクトの移行を進める場合は、次の場所で `LLMs.txt` と `LLMs-full.txt` を利用できます。

* [LLMs.txt](/llms.txt)
* [LLMs-full.txt](/llms-full.txt)

これらのファイルには、このドキュメント一式の内容がすべて含まれているため、AI ツールはプロジェクトの移行を支援するために必要な情報をすべて参照できます。