# General Translation React SDKs (gt-react, gt-next, gt-react-native): SPA翻訳で開発する
URL: https://generaltranslation.com/ja/docs/react/guides/developing-spa-translations.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: シングルページのReactアプリを開発しながら、General Translationの翻訳をプレビューする方法。

開発時の翻訳を使うと、SPA の編集中に翻訳済みコンテンツをプレビューできます。これには GT コンパイラと開発用 API キーが必要です。

**前提条件:**

* [SPA クイックスタート](/docs/react/react-spa-quickstart)に従って設定されたシングルページの React アプリ
* `gtx-dev-` で始まる開発用 API キー

<Callout type="warn">
  **CommonJS の制限:** 開発時の hot reload には、コンパイラがトップレベルの `await` を挿入するため、ESM が必要です。CommonJS としてコンパイルされたアプリケーションでは動作しません。本番用の翻訳は、[SPA クイックスタート](/docs/react/react-spa-quickstart)の CommonJS 起動パターンでも引き続き動作します。
</Callout>

## セットアップ [#setup]

### 1. コンパイラ をインストールする

`@generaltranslation/compiler` を開発依存関係として追加します:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i -D @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

### 2. コンパイラプラグインを追加する

CLI とコンパイラで共有される config で、開発時のhot reloadを有効にします:

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json",
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}
```

続けて、使用しているバンドラ用のプラグインを追加します。

<Callout type="info">
  **Bazel と Rolldown：** コンパイラはこれらのビルドシステム向けの専用アダプタを提供していません。コンパイラによるhot reloadに頼るのではなく、[翻訳をローカルに保存](/docs/react/guides/storing-translations)してください。
</Callout>

<Tabs items={['Vite', 'webpack', 'Rollup', 'Rspack', 'esbuild']}>
  <Tab value="Vite">
    ```ts title="vite.config.ts"
    import react from '@vitejs/plugin-react';
    import { vite as gtCompiler } from '@generaltranslation/compiler'; // [!code highlight]
    import { defineConfig } from 'vite';

    export default defineConfig({
      plugins: [react(), gtCompiler()], // [!code highlight]
    });
    ```

    `gtCompiler()` はルートの `gt.config.json` を自動的に読み込みます。
  </Tab>

  <Tab value="webpack">
    webpack が `.env` と `.env.local` を読み込めるように、まず開発依存関係として `dotenv` をインストールし、続けて他のプラグインより前にコンパイラを追加します。`DefinePlugin` を使って、開発用の認証情報だけをブラウザコードに公開します。

    ```js title="webpack.config.mjs"
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    import dotenv from 'dotenv';
    import webpack from 'webpack';
    import gtConfig from './gt.config.json' with { type: 'json' };

    dotenv.config({ path: '.env' });
    dotenv.config({ path: '.env.local', override: true });

    export default (_env, argv) => {
      const isProduction = (argv.mode ?? 'production') === 'production';

      return {
        // 既存の webpack 設定はそのままにします。
        plugins: [
          gtCompiler({ ...gtConfig }),
          new webpack.DefinePlugin({
            'process.env.GT_PROJECT_ID': JSON.stringify(
              isProduction ? '' : (process.env.GT_PROJECT_ID ?? '')
            ),
            'process.env.GT_DEV_API_KEY': JSON.stringify(
              isProduction ? '' : (process.env.GT_DEV_API_KEY ?? '')
            ),
          }),
        ],
      };
    };
    ```

    loader、ローカル翻訳ファイル、開発サーバーの設定については、[`gt-react` の webpack 完全版サンプル](https://github.com/generaltranslation/gt/tree/main/examples/webpack-spa)を参照してください。
  </Tab>

  <Tab value="Rollup">
    他の Rollup プラグインより前にコンパイラを登録します：

    ```js title="rollup.config.mjs"
    import { rollup as gtCompiler } from '@generaltranslation/compiler';

    export default {
      input: 'src/index.ts',
      plugins: [
        gtCompiler(),
        // 他の Rollup プラグイン
      ],
    };
    ```

    Rollup では完全に動的な翻訳インポートを解析できません。各ロケールを静的なインポート指定子で列挙してください：

    ```ts title="src/loadTranslations.ts"
    const translationLoaders = {
      es: () => import('./_gt/es.json'),
      fr: () => import('./_gt/fr.json'),
    };

    export default async function loadTranslations(locale: string) {
      const loader =
        translationLoaders[locale as keyof typeof translationLoaders];
      return loader ? (await loader()).default : {};
    }
    ```

    素の Rollup では、Vite と webpack で示した開発用認証情報のインテグレーションは利用できません。ソースコンテンツが変更されたら、ローカル翻訳ファイルを再生成してください。完全な [`gt-react` Rollup サンプル](https://github.com/generaltranslation/gt/tree/main/examples/rollup-spa)を参照してください。
  </Tab>

  <Tab value="Rspack">
    Rspack アダプタをプラグインに追加します：

    ```js title="rspack.config.mjs"
    import { rspack as gtCompiler } from '@generaltranslation/compiler';

    export default {
      plugins: [gtCompiler()],
    };
    ```

    開発時の翻訳では、`GT_PROJECT_ID` と `GT_DEV_API_KEY` をブラウザコードに公開する必要もあります。ただし、どちらの値も本番バンドルには含めないでください。
  </Tab>

  <Tab value="esbuild">
    esbuild アダプタを `plugins` 配列に追加します：

    ```js title="build.mjs"
    import { build } from 'esbuild';
    import { esbuild as gtCompiler } from '@generaltranslation/compiler';

    await build({
      entryPoints: ['src/index.ts'],
      bundle: true,
      format: 'esm',
      outdir: 'dist',
      plugins: [gtCompiler()],
    });
    ```

    *メモ：esbuild アダプタは自動 JSX インジェクションをサポートしていません。`enableAutoJsxInjection` が必要な場合は、翻訳対象の JSX を明示的にラップするか、別のアダプタを使用してください。*
  </Tab>
</Tabs>

Vite の完全なセットアップについては、[`gt-react` の Vite 完全版サンプル](https://github.com/generaltranslation/gt/tree/main/examples/vite-spa)を参照してください。

### 3. 開発用認証情報を追加する

[dash.generaltranslation.com](https://dash.generaltranslation.com/en-US/signin) で開発用 API キーを取得するか、次を実行します:

```bash
npx gt auth
```

次に、プロジェクト ID と開発用 API キーを `.env.local` に追加し、それらを初期化関数に渡します。

<Tabs items={['Vite', 'webpack']}>
  <Tab value="Vite">
    ```bash title=".env.local"
    VITE_GT_PROJECT_ID="your-project-id"
    VITE_GT_DEV_API_KEY="your-dev-api-key"
    ```

    ```ts
    await initializeGTSPA({
      ...gtConfig,
      projectId: import.meta.env.VITE_GT_PROJECT_ID,
      devApiKey: import.meta.env.DEV
        ? import.meta.env.VITE_GT_DEV_API_KEY
        : undefined,
      loadTranslations,
    });
    ```
  </Tab>

  <Tab value="webpack">
    ```bash title=".env.local"
    GT_PROJECT_ID="your-project-id"
    GT_DEV_API_KEY="your-dev-api-key"
    ```

    ```ts
    await initializeGTSPA({
      ...gtConfig,
      projectId: process.env.GT_PROJECT_ID,
      devApiKey: process.env.GT_DEV_API_KEY,
      loadTranslations,
    });
    ```

    上記の webpack の設定では、本番ビルド時に両方の値が空文字列に置き換えられるため、開発用の認証情報が本番バンドルに含まれることはありません。
  </Tab>
</Tabs>

<Callout type="warn">
  **開発時のみ:** `gtx-dev-` で始まるキーを使用してください。`gtx-api-` で始まる本番用のキーをブラウザコードに含めないでください。
</Callout>

### 4. 開発を始める

開発サーバーを起動し、デフォルト以外のロケールに切り替えます。翻訳対象のコンテンツを編集すると、コンパイラが変更を検知して登録し、`gt-react` が更新された開発時の翻訳をリクエストします。

## Next steps

- /docs/react/guides/storing-translations
- /docs/react/guides/configuring
- /docs/react/guides/translating-jsx
- /docs/react/guides/managing-locales

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.