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

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

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

## React esbuild 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) を使用してライブラリを初期化します。

アプリケーションの既存のエントリファイルと同じ場所にブートストラップファイルを作成します。この例では、元のエントリファイルは `src/main.tsx`、新しいブートストラップファイルは `src/index.ts` です。esbuild の既存の `entryPoints` 設定でブートストラップファイルを指定します。その他のビルド設定はすべてそのまま保持します。

```js title="esbuild.config.mjs"
const buildOptions = {
  // ...プロジェクトの既存のオプション
  entryPoints: ['src/index.ts'],
};
```

開発用 HTML が元のソースエントリを直接参照している場合は、そちらも更新します。

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

次にGTを初期化し、初期化の完了後にのみ元のエントリを動的にインポートします。esbuildのリファレンスアプリケーションはESMを出力し、トップレベル awaitをサポートしています。

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

await initializeGTSPA(gtConfig);

await import('./main'); // GT の準備が完了した後にのみアプリをレンダーする
```

既存のesbuildの出力ターゲットがトップレベルのawaitに対応していない場合、このセットアップのためだけにアプリケーションの出力形式を変更しないでください。代わりに、async bootstrap関数を使用します。

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

async function bootstrap() {
  await initializeGTSPA(gtConfig);
  await import('./main');
}

void bootstrap();
```

## 翻訳の読み込み [#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` は保持してください。以下の値は例であり、プロジェクトで設定済みのロケールを置き換えないでください。

通常、esbuild を使用するアプリケーションでは、翻訳は `src/_gt` ディレクトリに保存します。これにより、esbuild は翻訳モジュールをアプリケーションバンドルに含められます。

```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`);
  return translations.default;
}
```

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

イニシャライザを更新して、新しいローダー関数を使用します。アプリケーションで使用しているトップレベル await または async 関数による bootstrap 形式を維持します。

```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');
```

## 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.