# General Translation Changelog: gt-react 10.19.0: SPA 向け翻訳ホットリロード
URL: https://generaltranslation.com/ja/blog/gt-react_v10_19_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-16

import Video from '@/components/Video';

<Video src="https://assets.gtx.dev/devlogs/gt-react-browser-tx-hot-reload.mp4" />

## 概要

`gt-react/browser` が、訳文の開発時ホットリロードに対応しました。これまでは、ブラウザ側の GT アプリでコードを変更するたびに、更新された訳文を確認するには翻訳コマンドを再実行する必要がありました。このリリースにより、開発中は訳文が runtime で事前計算されるため、手動で再翻訳する必要はありません。

これにより、`gt-react/browser` は標準の `gt-react` と同じ翻訳ワークフローになりました。なお、`gt-react/browser` は **シングルページアプリケーション (SPA) 専用** です。サーバーレンダリングされるフレームワークを使用している場合は、`gt-react/browser` ではなく `gt-react` を使用してください。この機能も **開発専用** です。本番環境用の build では、これまでどおり事前計算された訳文が使用されます。

## 仕組み

コンパイラプラグイン は、module レベルで runtime 翻訳の呼び出しを挿入します。これらの処理が完了するまで、rendering は中断されます。

`devHotReload` が有効な場合、compiler は `GtInternalRuntimeTranslateString` と `GtInternalRuntimeTranslateJsx` の呼び出しを追加し、module の読み込み時に翻訳キャッシュをウォームアップします。JSX の場合、翻訳は module レベルで読み込むのではなく、[`<T>`](/docs/react/reference/components/t) コンポーネント 自体の Suspense 呼び出しを通じて解決することもできます。

翻訳は runtime で行われるため、実際にユーザーがアクセスした言語だけが翻訳されます。これは、build-time アプローチでは、実際には確認しない言語も含めて、開発 build のたびに設定済みのすべての言語の翻訳を生成しなければならないのとは対照的です。

runtime で取得した訳文は localStorage にキャッシュされるため、ページを再読み込みしても保持されます。

## 設定

### 1. コンパイラプラグイン を追加する

開発時のホットリロードには、GT コンパイラプラグイン が必要です。まだ追加していない場合は、バンドラの設定に追加してください。たとえば、Vite plugin です。

```ts
// vite.config.ts
import { vite as gtCompiler } from "@generaltranslation/compiler";
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import gtConfig from './gt.config.json';

export default defineConfig({
  plugins: [react(), gtCompiler({ gtConfig })],
});
```

他のバンドラーについては、[`gt-react` SPA クイックスタート](/docs/react/react-spa-quickstart)を参照してください。

### 2. `gt.config.json` で開発時のホットリロードを有効にする

```json
{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": true
      }
    }
  }
}
```

デフォルトでは、`devHotReload: true` を設定すると、文字列のホットリロードは有効になりますが、JSX は有効になりません。JSX は、[`<T>`](/docs/react/reference/components/t) コンポーネントが Suspense を通じて Runtime に JSX の翻訳をすでに処理するため無効のままになっており、それらが解決されるのを待つためにモジュールの読み込みをブロックする必要がないからです。必要に応じて、これらは個別に設定できます。

```json
{
  "files": {
    "gt": {
      "parsingFlags": {
        "devHotReload": {
          "strings": true,
          "jsx": false
        }
      }
    }
  }
}
```

### 3. 認証情報を `bootstrap()` に渡す

[`loadTranslations`](/docs/react/reference/functions/load-translations) 関数に加えて、プロジェクト ID と開発用 API キーも `bootstrap()` の呼び出し時に直接渡す必要があります。これは現在の実装上の制約であり、今後のリリースで簡略化する予定です。

```tsx
await bootstrap({
  ...gtConfig,
  loadTranslations,
  projectId: import.meta.env.VITE_GT_PROJECT_ID,
  devApiKey: import.meta.env.VITE_GT_DEV_API_KEY,
});
```

## リンク

* [前回の開発ログ: React コンテキストからの脱却 (gt-react@10.12.0)](/devlog/gt-react_v10_12_0)
* [PR #1217](https://github.com/generaltranslation/gt/pull/1217)

## Sitemap

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