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

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


## 概要

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

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

## 前提条件

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

## なぜ移行するのか？

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

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

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

## セットアップ

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

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

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

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

      <Tab value="pnpm">
        ```bash
        pnpm add gt-react-native
        bun 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-native'
    import config from './gt.config.json'

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

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

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

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

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

## 移行戦略 [#strategies]

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

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

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

アプリで `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-native` に移行したいものの、古い i18n ライブラリの辞書はそのまま使い続け、
新しいコンテンツに対してのみ GT のインライン機能を使いたいケースを考えます。

この場合は、オプション 1 と同じような方法で対応できます。

`useTranslation` フックなど、古い i18n ライブラリを使っている箇所をすべて見つけて、`useTranslations` フックに置き換えてください。

`useTranslations` フックは `useTranslation` フックとほぼ同じように動作するため、同じ使い方ができます。

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

  <Tab value="変更後">
    ```tsx
    import { useTranslations } from 'gt-react-native'
    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-native'
import dictionary from './dictionary.json'
import config from './gt.config.json'

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

詳細は、[dictionaries](/docs/react-native/guides/dictionaries) ガイドを参照してください。


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

このオプションは最も柔軟で、コードの変更も一度に最小限で済みます。

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

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

<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 ツールはプロジェクトの移行を支援するのに必要な情報にすべてアクセスできます。