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

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

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

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

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

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

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

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

プロジェクトのrootに`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/index.js` をブートストラップファイルとして作成し、初期化後に既存の `src/main.jsx` エントリをインポートします。

ブラウザバンドルをビルドする Bazel ターゲットを特定します。プロジェクトの既存のルール、依存関係、ソース宣言、ビルドオプションを保持してください。バンドラー を置き換えたり、2 つ目のビルド pipeline を追加したりしないでください。

ターゲットは、新しい ブートストラップ からインポートされるすべてのファイルを受け取る必要があります。インストール済みの `gt-react` npm ラベルを依存関係リストに追加します。宣言済みの input にまだ含まれていない場合は、`gt.config.json` を `srcs` または `data` に追加します。ターゲットがすでに glob でソースディレクトリを含んでいる場合、ブートストラップ ファイルは自動的に含まれます。

次に、ターゲットのブラウザエントリポイントを既存の React entry から新しい ブートストラップ ファイルに変更します。リポジトリ root で Aspect の `esbuild` ルールを使用するアプリケーションの場合、結果のターゲットは次のようになります。

```python title="BUILD.bazel"
load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")

esbuild(
    name = "app",
    srcs = glob(["src/**"]) + ["gt.config.json"],
    deps = [
        ":node_modules/react",
        ":node_modules/react-dom",
        ":node_modules/gt-react",
    ],
    entry_point = "src/index.js",
    format = "esm",
    output = "app.js",
)
```

プロジェクトですでに使用されているラベルと属性に従います。たとえば、子 Bazel package 内のターゲットでは、ルート package からの相対ラベルではなく、`//:gt.config.json` や `//:node_modules/gt-react` を使用できます。バンドル がファーストパーティの `js_library` に依存している場合は、任意に重複して宣言するのではなく、インポート元の source を所有するターゲットで `gt-react` を宣言します。

既存の Bazel バンドル がすでにトップレベル await をサポートしている場合を除き、async ブートストラップ 関数を使用します。トップレベル await を有効にするためだけに、出力形式や JavaScript ターゲットを変更しないでください。

```js title="src/index.js"
import { initializeGTSPA } from 'gt-react';

import gtConfig from '../gt.config.json';

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

void bootstrap();
```

元のエントリを2つ目のブラウザエントリとして構成したままにしないでください。[`initializeGTSPA`](/docs/react/reference/config#initialize-spa) が完了してからのみレンダリングする必要があります。アプリケーションのリポジトリで通常使用する Bazel のビルドまたはテストターゲットを実行してください。常駐する開発サーバーやプレビューサーバーは起動しないでください。

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

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

### 1. config を更新する

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

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

通常、Bazel を使用するアプリケーションでは、翻訳は `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"
{}
```

該当する Bazel ターゲットで、これらの JSON ファイルが宣言されていることを確認してください。既存の `glob(["src/**"])` に含まれている場合は問題ありません。含まれていない場合は、ルールの API に従ってターゲットの `srcs` または `data` にファイルを追加してください。

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

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

設定されているターゲットロケールをすべて `translationLoaders` に明示的に列挙します。Bazel と基盤となるバンドラーがビルド時にすべての翻訳ファイルを検出できるように、各ローダーではリテラルなインポートパスを使用する必要があります。以下の `fr` と `zh` のエントリはこのガイドの設定例に対応しています。実際には、プロジェクトで設定されているターゲットロケールを使用してください。

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

export default async function loadTranslations(locale) {
  const loader = translationLoaders[locale];
  if (!loader) {
    console.warn(`No translations found for locale "${locale}"`);
    return {};
  }

  const translations = await loader();
  return translations.default;
}
```

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

新しいローダー関数を使用するようにイニシャライザを更新します。非同期ブートストラップ形式と元のアプリケーションエントリのインポートはそのまま保持してください。

```js title="src/index.js"
import { initializeGTSPA } from 'gt-react';

import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

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

void bootstrap();
```

バンドルされた翻訳を追加した後、Bazel の build または test ターゲットを再実行します。

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