# General Translation React SDKs (gt-react, gt-next, gt-react-native): i18nライブラリの移行
URL: https://generaltranslation.com/ja/docs/react/guides/migrating-i18n-libraries.mdx
---

title: i18nライブラリの移行
description: 既存の翻訳を破棄せずに、Reactの国際化設定をGeneral Translationへ移行する方法。
related:
  links:
    - /docs/react/guides/translating-with-dictionaries
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring

---

変更の全期間を通じてロケールの選択、翻訳出力、フォールバックの動作をテストできるよう、機能またはルート単位で1つずつ移行してください。

## 始める前に [#before-start]

使用するフレームワークの クイックスタート を完了し、最後のコンシューマーを移行するまで、既存の i18n プロバイダー を有効にしておいてください。

* [React SPA クイックスタート](/docs/react/react-spa-quickstart)
* [Next.js クイックスタート](/docs/react/nextjs-quickstart)
* [TanStack Start クイックスタート](/docs/react/tanstack-start-quickstart)
* [React Native クイックスタート](/docs/react/react-native-quickstart)

コンテンツを移行する前に、現在のソースロケール、サポートされているロケール、フォールバック の動作、ロケール URL の形式を記録してください。`gt.config.json` でも同じ値を使用します。

## 移行戦略を選ぶ [#strategies]

### キーをソースコンテンツに置き換える

翻訳可能なテキストを、それをレンダリングするコンポーネントの近くに置きたい場合は、このアプローチを選択します。

キーによる参照を、JSX では [`<T>`](/docs/react/reference/components/t)、文字列では [`useGT`](/docs/react/reference/hooks/use-gt) に置き換えます。

```tsx
// 変更前
const { t } = = useTranslation();
return <h1>{t('home.welcome')}</h1>;

// 変更後
return (
  <T>
    <h1>Welcome back</h1>
  </T>
);
```

翻訳済みの値ではなく、古い辞書からソースロケールの値をコピーします。General Translationは、そのソースコンテンツと周囲の構造を翻訳コンテキストとして使用します。

### 既存の辞書を維持する

安定したキーがコンテンツワークフローの一部である場合や、すべての参照を置き換える必要がない場合は、この方法を選択してください。

ソース辞書を[辞書のセットアップ](/docs/react/guides/translating-with-dictionaries)に移行し、古いフックを[`useTranslations`](/docs/react/reference/hooks/use-translations)に置き換えます。

```tsx
// 変更前
import { useTranslation } from 'react-i18next';

const { t } = useTranslation();
return <h1>{t('home.welcome')}</h1>;

// 変更後
import { useTranslations } from 'gt-react';

const t = useTranslations();
return <h1>{t('home.welcome')}</h1>;
```

Next.js では、`dictionary.json`、`dictionary.ts`、または `dictionary.js` をプロジェクトルートまたは `src/` に配置します。[`withGTConfig`](/docs/react/nextjs/config) が自動的に検出します。

### 両方のライブラリを一時的に併用する

個別にデプロイされるルートや機能を段階的に移行する場合は、この方法を選択してください。両方のライブラリは同時に実行でき、両方のインテグレーションでプロバイダーを使用する場合は、それらのプロバイダーを共存させることができます。各stringの翻訳は1つのライブラリが担当し、両方のライブラリに同じアクティブなロケールを渡す必要があります。

<Callout type="warn">
  2つのi18nライブラリで、アクティブなロケール、cookie、URLルーティング、フォールバックルールの扱いが異なる可能性があります。ロケールの唯一の信頼できる情報源を定義し、移行済みと未移行のルート間のナビゲーションをテストして、最後の利用元がなくなり次第、古いプロバイダーを削除してください。
</Callout>

## 1 つの機能を移行する [#migrate-feature]

1. 1 つのルートまたはコンポーネントを選び、読み取っている古い翻訳キーをすべて洗い出します。
2. ソースロケールのテキストと、補間または複数形ルールをコピーします。
3. 選択した方針に応じて、各参照を [`<T>`](/docs/react/reference/components/t)、[`useGT`](/docs/react/reference/hooks/use-gt)、または [`useTranslations`](/docs/react/reference/hooks/use-translations) に置き換えます。
4. 現在の値をソーステキストに挿入するのではなく、変数は変数のまま保持します。
5. [`npx gt translate`](/docs/cli/reference/commands/translate) を実行します。
6. ソースロケール、すべての対象ロケール、翻訳欠落時のフォールバック、ロケール切り替えをテストします。
7. リポジトリ内に参照が残っていないことを確認してから、古いキーを削除します。

古いプロバイダーと依存関係を利用する箇所がなくなるまでこの手順を繰り返し、その後、それらの設定、生成ファイル、ビルドコマンドを削除します。

## 既存の翻訳を保持する [#preserve-translations]

ソース辞書を維持すればキーは保持されますが、既存のターゲット言語ファイルが General Translation に自動的にインポートされることはありません。移行中もそれらの辞書を読み込み続けるか、[Core upload workflow](/docs/platform/core/reference/gt-class-methods/translation/upload-translations)を使用してレビュー済みの翻訳をアップロードしてください。

翻訳済みの文字列をソースコンテンツとして[`<T>`](/docs/react/reference/components/t)に手作業でコピーしないでください。コードには元のソース言語を残し、インポートした翻訳が同じソースバージョンに対応していることを確認してください。
## Next steps

- /docs/react/guides/translating-with-dictionaries
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/configuring