# General Translation React SDKs (gt-react, gt-next, gt-react-native): Vite SPA の設定
URL: https://generaltranslation.com/ja/docs/react/guides/spa/configuring-vite-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Vite を使用した単一ページ React アプリケーションで gt-react を設定する方法。

アプリケーションのランタイムを設定し、必要に応じて生成された翻訳カタログを Vite のビルドにバンドルします。

このガイドでは、アプリケーションのランタイムを準備します。ユーザー向けコンテンツは別途、翻訳対象として指定します。

## React Vite SPA のセットアップ [#setup]

アプリケーションのエントリポイントが実行される前に、`gt-react` を初期化します。

### 1. gt-react をインストールする

リポジトリで推奨されているパッケージマネージャーを使用して、最新の `gt-react` をインストールしてください。すでにインストール済みの場合は、この手順をスキップしてください。

### 2. プロジェクトのルートに `gt.config.json` ファイルを追加する

プロジェクトのルートに `gt.config.json` ファイルを追加します。このファイルには、`gt-react` パッケージの設定を記述します。

プロジェクトにすでにあるロケール、またはセットアップタスクで指定されたロケールを正とします。既存の `locales` と `defaultLocale` の値は保持してください。以下の値はあくまで例です。プロジェクトにロケール設定がない場合は、これらの例から必要なロケールを推測しないでください。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"]
}
```

任意の [`src`](/docs/cli/reference/config#src) フィールドでは、GT がインラインコンテンツをスキャンするソースファイルを指定します。省略した場合は、`src`、`app`、`pages`、`components` 配下にある次の JavaScript および TypeScript のグロブがデフォルトで使用されます：

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"],
  "src": [
    "src/**/*.{js,jsx,ts,tsx}",
    "app/**/*.{js,jsx,ts,tsx}",
    "pages/**/*.{js,jsx,ts,tsx}",
    "components/**/*.{js,jsx,ts,tsx}"
  ]
}
```

### 3. ライブラリを初期化する

[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) はモジュールレベルでの翻訳関数を設定し、初期カタログの読み込みを待機します。モジュールスコープで翻訳を行うコードをインポートする前に、bootstrap モジュール内でこれを呼び出します。

`src/index.ts` を bootstrap ファイルとして作成し、初期化後に既存の `src/main.tsx` エントリをインポートして、HTML エントリを更新します。

```html title="./index.html"
<!-- <script type="module" src="/src/main.tsx"></script> -->
<script type="module" src="/src/index.ts"></script>
```

`src/index.ts` を作成し、ライブラリの初期化と翻訳の読み込みが完了した後に、エントリポイントを動的にインポートします。

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';

await initializeGTSPA(gtConfig);

await import('./main'); // GT の準備が完了してからアプリをレンダリングする
```

## 翻訳の読み込み [#translations]

[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) が [`loadTranslations`](/docs/react/reference/functions/load-translations) 関数なしで呼び出された場合、ランタイム は [`projectId`](/docs/react/reference/config#project-id) が利用可能なときにのみ General Translation CDN から翻訳を読み込みます。カタログをアプリケーションバンドルに含めるには、`output` パスと対応するローダーを設定します。以下の手順では、`src/_gt/[locale].json` を使用します。

### 1. config を更新する

`files.gt.output` を、CLI が生成された翻訳ファイルを書き込む場所に設定します。

追加またはマージするのは `files.gt.output` 設定のみです。プロジェクトに既存の `locales` と `defaultLocale` がある場合は保持してください。以下の値はあくまで例であり、プロジェクトで設定済みのロケールを置き換えてはなりません。

通常、Vite を使用するアプリケーションでは、翻訳は `src/_gt` ディレクトリに保存されます。これにより、アプリケーションコード内で翻訳を使用できます。

```json title="gt.config.json"
{
  "locales": ["fr", "zh"],
  "defaultLocale": "en",
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

### 2. スタブを追加する

デフォルトロケールを除き、`gt.config.json` で設定済みのターゲットロケールごとに、空の JSON ファイルを 1 つ作成します。これらのスタブにより、翻訳バンドルが存在する前でも import を解決できます。以下の `fr` と `zh` のファイルは、このガイドの設定例を示したものです。代わりに、プロジェクトで実際に設定されているターゲットロケール用のファイルを作成してください。ターゲットロケールが設定されていない場合は、ロケールを勝手に追加したり、プレースホルダーファイルを作成したりしないでください。

<Files>
  <Folder name="src">
    <Folder name="_gt">
      <File name="fr.json" />

      <File name="zh.json" />
    </Folder>
  </Folder>
</Files>

```json title="src/_gt/fr.json"
{}
```

```json title="src/_gt/zh.json"
{}
```

### 3. ローダーを追加する

翻訳を読み込むために `src/loadTranslations.ts` を作成します。`files.gt.output` で設定した出力先と同じ場所に解決される必要があります。

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`./_gt/${locale}.json`); // `files.gt.output` で設定した出力先と同じ場所を指すようにする
  return translations.default;
}
```

### 4. イニシャライザを更新する

イニシャライザを更新して、新しいローダー関数を使用します。

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

await initializeGTSPA({ ...gtConfig, loadTranslations });

await import('./main'); // GT の準備が完了してからアプリをレンダリングする
```

## Next steps

- /docs/react/guides/spa/internationalizing-react-spa
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales

## Sitemap

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