# General Translation React SDKs (gt-react, gt-next): SPA翻訳で開発する
URL: https://generaltranslation.com/ja/docs/react/guides/developing-spa-translations.mdx
---
title: SPA翻訳で開発する
description: シングルページのReactアプリを開発しながら、General Translationの翻訳をプレビューする方法。
related:
  links:
    - /docs/react/guides/storing-translations
    - /docs/react/guides/configuring
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/managing-locales

---

# SPA 翻訳での開発

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

**前提条件:**

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

## セットアップ [#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. コンパイラプラグインを追加する

お使いのバンドラー用のプラグインを追加します。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';
import gtConfig from './gt.config.json'; // [!code highlight]

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

<Accordions>
  <Accordion title="Viteを使っていない場合">
    `@generaltranslation/compiler` は `webpack`、`rollup`、`esbuild` 向けのプラグインもエクスポートしています。お使いのバンドラーに対応するプラグインをインポートしてください。

    ```ts
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    ```
  </Accordion>
</Accordions>

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

[dash.generaltranslation.com](https://dash.generaltranslation.com/signup) で開発用 API キーを取得するか、以下を実行してください:

```bash
npx gt auth
```

次に、`.env.local` に project ID と開発用 API キーを追加します。

```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.VITE_GT_DEV_API_KEY,
  loadTranslations,
});
```

<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