# General Translation Knowledge Base: 翻訳ファイルなしでi18nは実現できますか？ URL: https://generaltranslation.com/ja/kb/i18n-without-translation-files.mdx Docs index: https://generaltranslation.com/llms.txt Description: はい。General Translationの gt-react と gt-next ライブラリを使えば、翻訳キーも、言語ごとに管理するJSONファイルもなしで、ReactとNext.jsのi18nを実現できます。文言は `` コンポーネント内のJSXにインラインで記述したままで、gt translate コマンドがコードから得た文脈をもとに、ビルド時に各言語の翻訳を生成します。さらにLocadexを使えば、プルリクエストを通じて翻訳を常に最新の状態に保てます。 Category: 国際化 Last updated: 2026-10-21 Authors: Jackie Chen, Ernest McCarter Published: 2026-05-07 はい。General Translationのオープンソースライブラリ `gt-react` と `gt-next` を使えば、翻訳キーを使わず、言語ごとのJSONファイルを書くこともなく、ReactやNext.jsアプリを国際化 (i18n) できます。文言は [``](/docs/react/reference/components/t) コンポーネント内のJSXにインラインで記述するだけで、ビルド時に [`npx gt translate`](/docs/cli/reference/commands/translate) がすべての言語の翻訳を生成します。 i18next、react-intl、next-intl などのキーベースのライブラリは、言語ごとのメッセージファイルからキーを使って各文字列を参照します。そのため、文字列を追加するたびに、すべてのファイルにキーを追加しなければなりません。`en.json` に追加したキーを `ja.json` に入れ忘れれば、日本語のチェックアウトページの1行が未翻訳のまま表示されてしまいます。 General Translationでも翻訳ファイルはなくなりませんが、あくまでビルドで生成される成果物です。CLIは言語ごとに1つのファイルを生成し、翻訳をGeneral TranslationのCDNに公開することもできます。これらのファイルを手作業で編集したり、ファイル間でキーをコピーしたりする必要はありません。 ## Video The video is narrated in English, with English captions. [Can I do i18n without translation files?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-i18n-without-translation-files.mp4) (46 秒) General Translation lets you stop writing translation files with `gt-react` or `gt-next`. Run `npx gt init`, write the English inside a `` component, then add `npx gt translate` to your build script so every build writes the translations. ## キーファイルを使わずに、React コンポーネントをインラインで翻訳できますか？ はい。General Translation では、各文は [``](/docs/react/reference/components/t) で囲んだままコンポーネント内に記述でき、CLI がそのブロック全体を翻訳します。一方、react-i18next を使った注文確認サマリーでは、すべての文字列を JSON ファイルからキーで読み込みます。 ```json title="locales/en/checkout.json" { "summary": { "title": "Order summary", "item_count_one": "You have {{count}} item in your cart.", "item_count_other": "You have {{count}} items in your cart.", "tax_notice": "Tax is calculated at checkout." } } ``` ```tsx title="CheckoutSummary.tsx" import { useTranslation } from 'react-i18next'; export function CheckoutSummary({ itemCount }: { itemCount: number }) { const { t } = useTranslation('checkout'); return (

{t('summary.title')}

{t('summary.item_count', { count: itemCount })}

{t('summary.tax_notice')}
); } ``` `gt-next` を使えば、同じコンポーネントでも英語のテキストを JSX 内にそのまま記述できます。その他の React フレームワークでは、`gt-react` などそれぞれ専用のパッケージからインポートします。 ```tsx title="CheckoutSummary.tsx" import { T, Plural, Num } from 'gt-next'; export function CheckoutSummary({ itemCount }: { itemCount: number }) { return (

Order summary

You have {itemCount} item in your cart.

} other={

You have {itemCount} items in your cart.

} /> Tax is calculated at checkout.
); } ``` `gt-next` 版には、`checkout.json` も、名前を付けるべきキーも、更新が必要な `ja.json` もありません。[`npx gt translate`](/docs/cli/reference/commands/translate) は、各 [``](/docs/react/reference/components/t) ブロックをその要素構造を文脈として添えて General Translation API に送信し、`gt.config.json` に指定されたすべての言語の翻訳を書き出します。[``](/docs/react/reference/components/plural) は言語ごとに必要な複数形を選び (日本語は 1 種類、アラビア語は 6 種類) 、[``](/docs/react/reference/components/num) は読み手のロケールに合わせて数値を書式設定します。 ## キーファイルなしで JSX に直接テキストを書ける i18n ライブラリはどれですか？ General Translation の `gt-react` と `gt-next` を使えば、キーファイルなしで翻訳対象のテキストを JSX に直接記述でき、翻訳は General Translation が生成します。Lingui や next-intl の実験的な抽出機能もインラインのメッセージに対応していますが、メッセージはカタログに抽出されるため、その翻訳は別途チーム、翻訳者、または外部サービスが行う必要があります。 | ライブラリ | テキストを書く場所 | 翻訳の提供元 | チームが管理するもの | | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | i18next (`react-i18next`) | 言語ごとの JSON ファイル内のキー | チーム、翻訳者、または外部サービス | 全言語のファイルにある、文字列ごとのキー | | next-intl | 言語ごとの JSON カタログ内のキー。[`useExtracted` によるインラインメッセージ](https://next-intl.dev/docs/usage/extraction)は実験的機能 | チーム、翻訳者、または外部サービス | すべてのカタログ (テキストの変更に合わせて常に最新に保つ必要あり) | | [Lingui](https://lingui.dev/introduction) | メッセージ ID が自動生成されるインラインの `` マクロ (PO カタログに抽出) | チーム、翻訳者、または外部サービス | カタログの抽出、翻訳、コンパイル | | General Translation (`gt-react`, `gt-next`) | [``](/docs/react/reference/components/t) 内のインライン JSX、[`useGT`](/docs/react/reference/hooks/use-gt) による文字列、または任意のキー付きの辞書 | ビルドごとに [`npx gt translate`](/docs/cli/reference/commands/translate) がコードの文脈を踏まえて生成 | テキストを [``](/docs/react/reference/components/t) でラップすることと、ビルドステップ 1 つ | 翻訳者や翻訳管理システムがすでにカタログファイルで作業している場合や、テキストがほとんど変更されない場合は、i18next または next-intl が適しています。翻訳元のテキストはインラインで書きつつ、カタログは外部に翻訳を依頼する予定であれば、Lingui または next-intl の抽出機能を使用してください。テキストをインラインで書き、ビルドのたびに全言語の翻訳を生成したい場合は、General Translation を使用してください。安定したキーを使いたいチームは、General Translation の[辞書モード](/docs/react/guides/translating-with-dictionaries)でキーをそのまま使い続けられます。 ## キーベースの i18n とインライン翻訳の長所と短所は何ですか？ インライン翻訳では、各文をそれをレンダリングする React コンポーネント内に直接記述します。そのため、コンポーネントやプルリクエストの可読性が保たれ、キーの命名、同期、整理も不要です。一方で、翻訳元の文言がコード内にあるため、文言の修正には開発者の手が必要になります。キーベースの i18n では、文言をコードとは別のカタログで管理します。これにより、ライターや翻訳者はコンポーネントに触れずに作業できますが、文字列ごとにキーを用意し、各言語のファイルにエントリを追加する手間がかかります。General Translation はどちらにも対応しており、[``](/docs/react/reference/components/t) によるインラインの文言と、辞書モードによるキーのどちらも使えます。 | タスク | 翻訳キー (i18next、next-intl) | インラインの文言 (General Translation) | | ------------------ | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | コンポーネントやプルリクエストを読む | `t('summary.tax_notice')` としか書かれておらず、文を確認するには JSON ファイルを開く必要がある | JSX 内で文をそのまま確認できる | | 文字列を追加する | キーを命名してソースファイルに追加し、さらに各言語のファイルに反映させる | [``](/docs/react/reference/components/t) 内に書くだけで、次回の [`gt translate`](/docs/cli/reference/commands/translate) の実行で翻訳される | | 翻訳元の文言を変更する | 誰かが更新するまで、他の言語には古い翻訳が残る | 次回の実行で変更されたエントリが再翻訳される | | コンポーネントを削除する | 誰かまたはスクリプトが削除するまで、そのキーがすべてのファイルに残る | 次回の実行からそのコンテンツは収集されなくなる | | 言語を追加する | すべてのキーを含むファイルを作成して翻訳する | `gt.config.json` の `locales` にロケールコードを追加し、[`gt translate`](/docs/cli/reference/commands/translate) を実行する | | 安定した ID | すべての文字列に付与される | 任意。[``](/docs/react/reference/components/t) の [`$id`](/docs/react/reference/components/t#id) または辞書モードで指定可能 | | 翻訳元の文言を編集する人 | ライターはコードに触れずにカタログを編集できる | 文言の変更はコードの変更になる | ライターがコードに触れずに翻訳元の文言を編集したい場合や、コンポーネントに特定の言語の文を一切含めたくない場合は、キーのほうが適しています。その場合はキーをそのまま使い続けてください。General Translation の[辞書モード](/docs/react/guides/translating-with-dictionaries)なら、キー付きの辞書を読み込んだうえで翻訳を生成できます。 ## 翻訳キーを使わずに Next.js App Router アプリを多言語対応させるには？ General Translation の `gt-next` ライブラリと `gt` CLI を使い、次の 4 ステップで対応できます。同じ手順を手動で行う方法は [Next.js App Router クイックスタート](/docs/react/nextjs-quickstart)でも解説しています。 1. [`npx gt@latest init`](/docs/cli/reference/commands/init) を実行します。セットアップウィザードが App Router を検出し、`gt-next` のインストール、`next.config.ts` への `withGTConfig` の追加、`app/layout.tsx` への [`GTProvider`](/docs/react/reference/components/gt-provider) の追加を行えるほか、対象言語を `gt.config.json` に書き込みます。開発用キーを `.env.local` に書き込むこともできるので、`next dev` の実行中に新しく追加したテキストがオンデマンドで翻訳されます。ウィザードによる変更内容は必ず確認してください。 2. テキストを [``](/docs/react/reference/components/t) でラップし、言語を切り替えるための [``](/docs/react/reference/components/locale-selector) ドロップダウンを追加します。[``](/docs/react/reference/components/t) はサーバーコンポーネントとクライアントコンポーネントのどちらでも動作します。 3. ビルドスクリプトで、`next build` の前に [`npx gt translate`](/docs/cli/reference/commands/translate) を実行するようにします。 4. ホスティングプロバイダーで `GT_PROJECT_ID` と `GT_API_KEY` を設定します。ビルドで使用するキーでは、**Files > Write** と **Translation queue** の権限を有効にしておく必要があります。 ```tsx title="app/page.tsx" import { T, LocaleSelector } from 'gt-next'; export default function Home() { return (

Find your next project

Explore projects from teams around the world.
); } ``` ```json title="package.json" { "scripts": { "build": "npx gt translate && next build" } } ``` 以降は本番環境のビルドを実行するたびに、`gt.config.json` に指定されたすべての言語の翻訳が書き出されます。サーバーコンポーネントとクライアントコンポーネントを使ったより詳しい手順については、[Next.js App Router アプリに i18n を追加するには？](/kb/add-i18n-to-nextjs)を参照してください。セットアップをコーディングエージェントに任せたい場合は、[コーディングエージェントを使ったワークフロー](/kb/ai-agent-i18n-setup)をご覧ください。 ## 翻訳JSONファイルがソースコードと同期しなくなるのを防ぐにはどうすればよいですか？ 翻訳JSONファイルは手作業で編集せず、ビルドのたびにソースコードから生成しましょう。キーファイル方式の場合、400個の文字列を12の対象言語に翻訳するアプリには4,800個のエントリがあり、誰かがそれらをコードと常に一致させておく必要があります。General Translationでは、[`npx gt translate`](/docs/cli/reference/commands/translate) がビルド前に実行され、すべての [``](/docs/react/reference/components/t) ブロックと [`useGT`](/docs/react/reference/hooks/use-gt) の文字列を収集します。そのうえで、新規または変更された内容を `gt.config.json` で指定された各言語に翻訳し、言語ごとに1つのJSONファイルを `files.gt.output` のパスに書き出します。 ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "fr", "ja"], "files": { "gt": { "output": "public/_gt/[locale].json" } } } ``` ```txt title=".gitignore" public/_gt/ ``` General Translation はビルドのたびに、コンパイル対象のコードからこれらのファイルを再生成するため、ファイルは常にそのコードと一致します。ファイルは自動生成されるものなので、Next.js のクイックスタートでは出力ディレクトリを `.gitignore` に追加しています。General Translation の[インクリメンタルワークフロー](/docs/cli/guides/generating-translations#retranslate)は、変更された翻訳元のみを翻訳し、以前のバージョンで一致する翻訳を再利用します。[ブランチ追跡](/docs/cli/guides/branching) (`--enable-branching`、Starter プランまたはエンタープライズプランで利用可能) を使うと、フィーチャーブランチの翻訳はマージされるまで本番環境とは分離して管理されます。 翻訳の変更をリポジトリにコミットしたい場合は、[Locadex の自動化](/docs/platform/locadex/guides/configuring-automations)を利用できます。新規または更新されたソースコンテンツの翻訳や、言語リストの変更に応じたロケールファイルの追加・削除を、プルリクエスト経由で行います。各自動化は、プルリクエストの変更、コミットのプッシュ、手動での開始という 3 つのトリガーのいずれかで実行されます。CI のセットアップについては、[デプロイのたびに翻訳を最新の状態に保つには？](/kb/translations-in-ci)を参照してください。 ## General Translation は React アプリに i18n を自動で追加できますか？ はい。General Translation は、React の i18n に必要な 2 つのステップ (翻訳対象テキストのラップと翻訳の生成) を両方とも自動化します。 * **ビルド時:** `gt.config.json` の `files.gt.parsingFlags` で `enableAutoJsxInjection` を設定すると、General Translation のコンパイラ `@generaltranslation/compiler` が、翻訳可能な JSX テキストを [``](/docs/react/reference/components/t) で自動的にラップします。[自動 JSX インジェクション](/docs/cli/guides/using-auto-jsx)は、React のシングルページアプリ、サーバーサイドレンダリングされた React アプリ、Next.js の webpack ビルドで動作します。Next.js でこのコンパイラのワークフローを使う場合は webpack を使用してください。Turbopack を使用する場合は、コンテンツを [``](/docs/react/reference/components/t) で直接マークするか、Locadex でラッパーを追加してください。 * **プルリクエスト経由:** General Translation の AI エージェントである Locadex が **Generate code** 自動化を実行し、翻訳元のコードを [``](/docs/react/reference/components/t) でラップしたり、[`useGT`](/docs/react/reference/hooks/use-gt) などの文字列呼び出しに置き換えたりしたうえで、プルリクエストを作成します。内容をレビューするか、auto-merge を利用できます。 * **翻訳の生成:** ビルドで [`npx gt translate`](/docs/cli/reference/commands/translate) を実行するか、Locadex の **Generate translations and push** 自動化を使用すると、新規コンテンツや変更されたコンテンツが、設定済みのすべての言語に翻訳されます。 ## gt-next と next-intl の違いは何ですか？ next-intl は、チームまたは外部サービスが作成した言語ごとの JSON カタログからメッセージをレンダリングします。一方、General Translation の Next.js ライブラリである gt-next は、テキストを [``](/docs/react/reference/components/t) 内にインラインで記述し、すべての翻訳を [`gt translate`](/docs/cli/reference/commands/translate) で生成します。どちらも App Router とサーバーコンポーネントに対応しており、MIT ライセンスで提供されています。 General Translation を使うためにライブラリを乗り換える必要はありません。`gt` CLI は `package.json` から next-intl、react-i18next、next-i18next を検出し、各ライブラリのメッセージ構文を保ったまま [JSON ファイルを翻訳](/docs/cli/guides/generating-translations)します。そのため、コンポーネントやルーティングはそのまま使えます。後からインライン記述に移行したい場合は、[移行ガイド](/docs/react/guides/migrating-i18n-libraries)を参照してください。キーを [``](/docs/react/reference/components/t) に置き換える方法、[`useTranslations`](/docs/react/reference/hooks/use-translations) で辞書を引き続き使う方法、ルートを 1 つずつ移行しながら両方のライブラリを併用する方法を解説しています。両者を並べて比較したい場合は、[next-intl と gt-next の比較](/kb/next-intl-vs-gt-next)をご覧ください。 ## レビュアーは翻訳ファイルを編集せずに翻訳をどう修正できますか？ レビュアーは General Translation の [ダッシュボードの翻訳エディター](/docs/platform/dashboard/guides/reviewing-translations) を使用します。ロケールを並べて比較しながら、生成された翻訳をその場で編集できるため、ロケールファイルを開いたり新しい翻訳ジョブを開始したりする必要はありません。チームがダウンロードしたファイルを直接編集する場合は、[`npx gt save-local`](/docs/cli/reference/commands/save-local) で編集内容をプラットフォームにアップロードするか、[`gt translate`](/docs/cli/reference/commands/translate) に `--save-local` を指定して、実行のたびに同期させます。 翻訳の文脈は、コードとダッシュボードの両方で設定します。[``](/docs/react/reference/components/t) の [`context` プロパティ](/docs/react/reference/components/t#context) を使うと、曖昧な語の意味を明確にできます。たとえば、ドキュメントエディターの「Save」はドイツ語で *speichern* になり、お金を貯める意味の「save」は *sparen* になります。コンテキストグループ内の [用語集とカスタムプロンプト](/docs/platform/dashboard/guides/defining-context-for-translations) を使えば、アプリ、ドキュメント、その他のプロジェクト全体で用語とトーンを統一できます。 ## 生成された翻訳はどこに保存されますか？アカウントは必要ですか？ 生成された翻訳の保存先は、次の2つのいずれかです。 * **アプリにバンドルする:** [ローカルローダー](/docs/react/guides/storing-translations)が生成されたファイルをインポートするため、本番環境のアプリは自身に含まれる翻訳を読み込み、General Translation へのランタイムリクエストは発生しません。新しい翻訳は次回のビルドで反映されます。 * **General Translation の CDN に置く:** [CDN 配信](/docs/react/guides/configuring#delivery)を使うと、公開した編集内容がリビルドなしでデプロイ済みのアプリに反映されます (反映タイミングはバージョンとキャッシュの設定によります) 。 `gt-react` と `gt-next` は [MIT ライセンス](https://github.com/generaltranslation/gt)で提供されており、翻訳を自分で用意すれば General Translation のアカウントがなくても利用できます。[`npx gt generate`](/docs/cli/reference/commands/generate) を実行すると、手作業で翻訳するためのテンプレートファイルがロケールごとに出力されます。[`gt translate`](/docs/cli/reference/commands/translate) による翻訳の生成には General Translation のホスティングサービスを使用します。詳しくは [General Translation の料金](https://generaltranslation.com/pricing)をご覧ください。 ## 重要なポイント * 翻訳ファイルがなくても i18n は実現できます。General Translation の `gt-react` と `gt-next` では、翻訳キーを使わずにテキストを [``](/docs/react/reference/components/t) 内にインラインで記述し、[`npx gt translate`](/docs/cli/reference/commands/translate) がビルドのたびに言語ごとのファイルを生成します。 * 生成されたファイルはビルド成果物です。手作業で編集したり、ファイル間でキーをコピーしたりする必要がないため、常にコードと同期した状態が保たれます。 * General Translation のコンパイラはビルド時に JSX を [``](/docs/react/reference/components/t) で自動的にラップできます。また、Locadex を使えば、コードのラップと翻訳をプルリクエスト経由で行えます。 * すでに next-intl や react-i18next を使用している場合は、`gt` CLI で既存の JSON カタログを翻訳できます。キーを使い続けたい場合は、辞書モードを利用すればキーをそのまま維持できます。 ## 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 が担います。このガイドでは、ローカルファイルを明示的に使うセットアップ方法も紹介します。 - [Cursor や Claude Code でアプリを国際化するには？](https://generaltranslation.com/ja/kb/ai-agent-i18n-setup.mdx): Cursor または Claude Code で General Translation の Setup for Agents プロンプトを使い、機能と対象言語を選んで、エージェントに実装と検証を任せます。ブラウザでのサインイン、機械可読なドキュメント、MCP ツールにより、セットアップから翻訳、レビューまでがシームレスにつながります。継続的なローカライゼーションは、Locadex を使ってプルリクエスト経由で自動化できます。 - [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 が生成します。 - [デプロイのたびに翻訳を最新の状態に保つにはどうすればよいですか？](https://generaltranslation.com/ja/kb/translations-in-ci.mdx): 本番環境のビルド前に、翻訳をパイプラインのステップとして毎回実行します。こうすることで、新しいテキストは追加されたデプロイと同時に翻訳済みの状態でリリースされます。General Translation の gt CLI では、CI シークレットとして保存したプロジェクトの APIキーとプロジェクトIDを使い、npx gt translate でこれを実現します。 ## Previous and next questions - Previous question: [開発者にとって最適なローカライゼーションソフトウェアとは？](https://generaltranslation.com/ja/kb/best-localization-software.mdx) - Next question: [Crowdin の代替ツール：General Translation と Crowdin の比較](https://generaltranslation.com/ja/kb/general-translation-vs-crowdin.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/ja/kb/sitemap.md) for every article.