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

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

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

## React webpack 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/main.tsx`、新しいbootstrapファイルは `src/index.ts` です。webpackの既存の `entry` 設定がbootstrapファイルを指すようにします。ほかのすべてのビルド設定と既存のエントリオブジェクト構造はそのまま保持します。

```js title="webpack.config.mjs"
export default {
  // ...プロジェクトの既存の設定
  entry: './src/index.ts',
};
```

webpack では通常、`HtmlWebpackPlugin` によってビルド済みのエントリが HTML に挿入されるため、プロジェクトですでに HTML プラグインを使用している場合は、2 つ目の script タグを追加しないでください。HTML で元のソースエントリを直接参照している場合は、その参照を bootstrap ファイルに更新してください。

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

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

await initializeGTSPA(gtConfig);

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

既存の webpack コンパイルターゲットがトップレベルの 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` は保持してください。以下の値は例であり、プロジェクトで設定されているロケールを置き換えてはなりません。

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

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