# gt-react: General Translation React SDK: コンパイラ
URL: https://generaltranslation.com/ja/docs/react/concepts/compiler.mdx
---
title: コンパイラ
description: gt CLI による React のソースファイルの処理方法
---

`gt` CLI には、ビルド時に React のソースファイルを解析するコンパイラが含まれています。一般的な翻訳エラーを検出し、必要に応じて JSX を翻訳コンポーネントでラップする処理を自動化できます。

## 機能

### 動的コンテンツの検出

翻訳コンポーネントで囲まれていない動的コンテンツを検出します。

```jsx
// ❌ 無効 - 動的コンテンツがラップされていない
<T>Hello {userName}</T>

// ✅ 有効 - 動的コンテンツが variable component でラップされている  
<T>Hello <Var>{userName}</Var></T>
```


### 関数呼び出しの校验

翻訳関数に非リテラルの引数が渡された場合に検出します。

```jsx
const gt = useGT();

// ❌ 無効 - テンプレートリテラルと文字列連結
gt(`Hello ${name}`)
gt("Hello " + name)

// ✅ 有効 - 変数置換を使った文字列リテラル
gt("Hello, {name}!", { name })
```


## JSX の自動インジェクション

JSX の自動インジェクションを有効にすると、コンパイラが翻訳可能な JSX テキストを自動的に翻訳コンポーネントで囲むため、各テキストを `<T>` コンポーネントで手動で囲む必要がなくなります。

### JSX の自動インジェクションを有効にする

`gt.config.json` に `enableAutoJsxInjection` を追加します:

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


### 適用前と適用後

JSX の自動インジェクションを使わない場合は、テキストを手動でラップします。

```jsx
import { T } from 'gt-react';

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

JSX の自動インジェクションを有効にすると、通常の JSX を書くだけで、あとはコンパイラが処理します。

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

`npx gt translate` を実行すると、コンパイラが翻訳可能なテキストを検出して自動的にラップします。


### コンパイラがそのまま扱うもの

* **ユーザーが記述した `<T>` コンポーネント** は変更されません — コンパイラがコードを二重にラップすることはありません
* `<Var>`、`<Branch>`、`<Plural>`、`<Derive>` などの **他の GT コンポーネント** も同様にそのまま扱われます
* **文字列属性** (例: `placeholder`、`alt`) には影響しません — ラップされるのは JSX の子要素だけです
* 数値や真偽値などの **テキスト以外のコンテンツ** は無視されます