# General Translation Changelog: compiler 1.3.0: ビルド時での自動`<T>`ラッピング
URL: https://generaltranslation.com/ja/blog/compiler_v1_3_0.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 
Authors: Ernest McCarter
Published: 2026-04-06

## 概要

GT コンパイラで、クライアントサイドの React SPA 向けに **JSX の自動インジェクション** がサポートされるようになりました。これにより、翻訳対象の JSX テキストはビルド時に自動で [`<T>`](/docs/react/reference/components/t) コンポーネントにラップされるため、手動で対応する必要がありません。

これまでは、翻訳対象の文字列ごとに手動で [`<T>`](/docs/react/reference/components/t) ラッパーを付ける必要がありました。`enableAutoJsxInjection` を使えば、その処理はコンパイラが自動で行います。通常どおり JSX を書くだけで、残りはコンパイラが処理します。

| Package                        | Version |
| ------------------------------ | ------- |
| `@generaltranslation/compiler` | 1.3.0   |
| `gt-react`                     | 10.17.0 |
| `gt-next`                      | 6.15.2  |

## セットアップ

JSX の自動インジェクションは、[`t()`](/docs/react/reference/functions/t-function) 関数とあわせて導入された [bootstrap ベースの SPA アーキテクチャ](/devlog/gt-react_v10_12_0) に基づいています。まず bootstrap のエントリーポイントをセットアップしてから、コンパイラプラグインを追加する必要があります。

### 1. bootstrap エントリーポイント

アプリのレンダリング前に翻訳データを読み込む `bootstrap.tsx` を作成します:

```tsx
// bootstrap.tsx (新しいエントリーポイント)
import gtConfig from '../gt.config.json';
import { bootstrap } from 'gt-react/browser';

async function loadTranslations(locale: string) {
  return (await import(`./_gt/${locale}.json`)).default;
}

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

await import('./main.tsx');
```

`index.html` が `main.tsx` ではなく `bootstrap.tsx` を参照するように更新します。


### 2. コンパイラをインストール

```bash
npm install @generaltranslation/compiler
```


### 3. Vite

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

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


### 4. gt.config.json

設定で JSX の自動インジェクションを有効にします。

```json
{
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json",
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```


## できること

これまでは、翻訳対象の文字列をすべて手動でラップする必要がありました。

```jsx
import { T } from "gt-react/browser";

export default function Hero() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

変更後は — JSX を書くだけです:

```jsx
export default function Hero() {
  return <h1>Welcome to our app</h1>;
}
```

コンパイラはビルド時に[`<T>`](/docs/react/reference/components/t)ラッパーを挿入します。インポートもidも定型コードも不要です。

### Variable の埋め込み

動的な式も自動的に [`<Var>`](/docs/react/reference/components/var) でラップされます:

```jsx
// 記述するコード:
export default function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

// コンパイラが生成するコード:
import { T, Var } from "gt-react/browser";

export default function Greeting({ name }) {
  return (
    <T>
      <p>Hello, <Var>{name}</Var>!</p>
    </T>
  );
}
```

## リンク

* [コンパイラのコンセプト](/docs/react/reference/config)
* [コンパイラ v1.0.0 開発ログ](/devlog/compiler_v1_0_0_gt-next_v6_7_0) — React 向けコンパイラの初回リリース
* [PR #1158](https://github.com/generaltranslation/gt/pull/1158)

## Sitemap

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