# General Translation Knowledge Base: React アプリを翻訳するには？ URL: https://generaltranslation.com/ja/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: React アプリを翻訳するには、まずコンポーネントを国際化してユーザーの言語でレンダリングできるようにし、次にすべての文字列をサポート対象の各言語に翻訳します。General Translation の gt-react は `` コンポーネント内の JSX をインプレースで翻訳し、npx gt translate は言語ごとに 1 つのファイルを書き出します。 Category: 国際化 Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 React アプリの翻訳は 2 つの作業に分かれます。1 つはコンポーネントをユーザーの言語でレンダリングできるようにする国際化 (i18n) 、もう 1 つはすべての文字列をサポート対象の各言語に翻訳する作業です。難しいのは、テキストが JSX の中にあり、マークアップや変数、そして言語ごとに規則が異なる複数形 (英語は 2 種類、アラビア語は 6 種類) と混ざり合っている点です。一般的なセットアップでは、各文字列を `t('home.welcome')` のようなキーに置き換え、言語ごとの JSON ファイルを常に同期させておく必要があります。周囲の UI を把握しないまま翻訳すると、「Save」ボタンがドイツ語で *speichern* (ファイルを保存する) ではなく *sparen* (お金を節約する) と訳されてしまうこともあります。 ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48 秒) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## React アプリを翻訳する方法 | アプローチ | 得意なこと | 自分で対応が必要なこと | | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | キーベースの i18nライブラリ ([`i18next`](/kb/general-translation-vs-i18next) と `react-i18next`、または [`react-intl`](/kb/general-translation-vs-react-intl)) | 翻訳のレンダリング、複数形の選択、値のフォーマットを担う成熟したランタイム | 文字列をキーに置き換えること、言語ごとの JSON ファイルを常に同期しておくこと、すべての翻訳を用意すること | | [Lingui](/kb/general-translation-vs-lingui) | `` マクロでテキストをインラインのまま記述でき、`lingui extract` が言語ごとにカタログを書き出す | 各カタログを手作業または連携サービス経由で翻訳すること、テキストを変更するたびに extract と compile を再実行すること | | 翻訳管理システム ([Crowdin](/kb/general-translation-vs-crowdin)、[Lokalise](/kb/general-translation-vs-lokalise)) | 翻訳者がスクリーンショット、用語集、翻訳メモリを活用して作業できる Web エディタを備え、リポジトリと同期できる | コード内の i18nライブラリとキーファイル、同期のセットアップ、リリースのたびに翻訳者の作業完了を待つこと | | General Translation (`gt-react` と `gt` CLI) | [``](/docs/react/reference/components/t) がキーを使わずに JSX をインプレースで翻訳し、[`npx gt translate`](/docs/cli/reference/commands/translate) が周囲の JSX 構造を文脈として、言語ごとに 1 つのファイルを書き出す | テキストを [``](/docs/react/reference/components/t) でラップすること、初回のみのセットアップ (`gt.config.json` での言語指定、ローダー、エントリファイル、サインイン、プロジェクトID) 、コンテンツの変更時に [`npx gt translate`](/docs/cli/reference/commands/translate) を (ローカルまたは CI で) 再実行すること | 文字列が少なく、ほとんど変更されないアプリであれば、キーベースのライブラリと手書きの JSON ファイルだけで十分です。テキストをインラインで管理したく、カタログを翻訳する翻訳者がいる場合は Lingui を、ローカライゼーションチームがリリースのたびにすべてを手作業で翻訳する場合は翻訳管理システムを選びましょう。アプリが頻繁に更新され、すべてのリリースを全言語で出荷する必要がある場合は、General Translation が最適です。 ## General Translation で React アプリを翻訳する General Translation のオープンソースの `gt-react` ライブラリと `gt` CLI を使うと、Vite や webpack プロジェクトなどの React シングルページアプリ (SPA) を翻訳できます。`npx gt@latest` セットアップウィザードを使えば、Vite のエントリと翻訳の読み込みを自動で設定できます (実験的な機能) 。手動でセットアップする場合は、次の手順に従ってください。 1. `gt-react` と `gt` CLI をインストールします。 2. `gt.config.json` に使用する言語を指定します。 3. [`loadTranslations`](/docs/react/reference/functions/load-translations) 関数を追加し、小さなエントリファイル内で [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) を呼び出して、アプリのレンダリング前に翻訳が読み込まれるようにします。 4. テキストを [``](/docs/react/reference/components/t) コンポーネントでラップします。 ```tsx title="src/components/Welcome.tsx" import { T } from 'gt-react'; export default function Welcome() { return (

Welcome to my app

This content will be translated automatically.
); } ``` 5. [`npx gt login`](/docs/cli/reference/commands/login) でサインインし、プロジェクトIDを設定します。 6. [`npx gt translate`](/docs/cli/reference/commands/translate) を実行すると、言語ごとに翻訳ファイルが 1 つずつ書き出されます。 [``](/docs/react/reference/components/t) の `context` プロパティを使えば「Save」のような曖昧な語の意味を明確にでき、ダッシュボードの用語集とカスタムプロンプトを使えば用語やトーンを統一できます。[サーバーでレンダリングされた React](/docs/react/react-quickstart)、[React Router フレームワーク](/docs/react/react-router-quickstart)、[Next.js](/docs/react/nextjs-quickstart) (`gt-next` を使用) のアプリには、それぞれ専用のクイックスタートがあります。SPA の詳しい手順については、[React SPA クイックスタート](/docs/react/react-spa-quickstart)を参照してください。 ## Related questions - [Next.js App Router アプリに i18n を追加するには？](https://generaltranslation.com/ja/kb/add-i18n-to-nextjs.mdx): まず gt init を実行して、対応する App Router プロジェクトに General Translation を設定します。次にソースコンテンツをマークし、翻訳を生成して、言語の切り替えが機能することを確認します。gt-next はテキストを翻訳の文脈とともに JSX 内に保持し、生成、レビュー、継続的な更新は CLI、ダッシュボード エディター、Locadex が担います。このガイドでは、ローカルファイルを明示的に使うセットアップ方法も紹介します。 - [React Native アプリを翻訳するにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translate-react-native-app.mdx): コンポーネント内のテキストをマークし、言語ごとに翻訳ファイルを生成して Intl ポリフィルを追加し、デバイスの言語に対応するファイルを読み込みます。General Translation の実験的な gt-react-native では、テキストを `` でラップするだけで、Babel プラグインがポリフィルを追加し、npx gt translate がファイルを書き出します。 - [翻訳ファイルなしでi18nは実現できますか？](https://generaltranslation.com/ja/kb/i18n-without-translation-files.mdx): はい。General Translationの gt-react と gt-next ライブラリを使えば、翻訳キーも、言語ごとに管理するJSONファイルもなしで、ReactとNext.jsのi18nを実現できます。文言は `` コンポーネント内のJSXにインラインで記述したままで、gt translate コマンドがコードから得た文脈をもとに、ビルド時に各言語の翻訳を生成します。さらにLocadexを使えば、プルリクエストを通じて翻訳を常に最新の状態に保てます。 - [JSX の外にある文字列はどのように翻訳しますか？](https://generaltranslation.com/ja/kb/translate-strings-outside-jsx.mdx): プレースホルダーやモジュールスコープの定数など、JSX の子要素ではない文字列は、それぞれレンダリングされる場所で翻訳関数に渡します。General Translation の useGT フックはこの翻訳関数を返します。また、msg と useMessages を組み合わせれば、コンポーネントの外で定義された定数も翻訳できます。 - [React で複数形を扱うにはどうすればよいですか？](https://generaltranslation.com/ja/kb/how-to-handle-plurals-in-react.mdx): React で複数形を扱うには、各言語の複数形ごとに文を 1 つずつ用意し、その言語の複数形規則に従って選択します。英語の複数形は 2 種類ですが、ロシア語は 4 種類、アラビア語は 6 種類あるためです。gt-react と gt-next に含まれる General Translation の `` コンポーネントに翻訳元の形を渡せば、各対象言語に必要な形は General Translation が生成します。 ## Previous and next questions - Previous question: [React Native アプリを翻訳するにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translate-react-native-app.mdx) - Next question: [Sanity でコンテンツを翻訳するには？](https://generaltranslation.com/ja/kb/translate-sanity-content.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.