# gt: General Translation CLI tool: 自動 JSX インジェクション を使う
URL: https://generaltranslation.com/ja/docs/cli/guides/using-auto-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 自動 JSX インジェクション を使って、ビルド時に翻訳可能な JSX テキストを General Translation のコンポーネントでラップする方法。

自動 JSX インジェクション を使用すると、コンパイラがビルド時に翻訳可能な JSX テキストを [`<T>`](/docs/react/reference/components/t) コンポーネントでラップするため、手動で追加する必要がありません。

自動 JSX インジェクション はデフォルトで無効になっています。これは React のシングルページアプリ (SPA)、サーバーサイドレンダリングされた React アプリ、Next.js の webpack ビルドで動作します。

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

コンパイラをインストールします。

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

`gt.config.json` の `files.gt.parsingFlags` で `enableAutoJsxInjection` を設定します。これにより、CLI での抽出とコンパイラによる変換を同期した状態に保てます。

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```

## ビルドを設定する [#configure-build]

`gt.config.json` フラグは、General Translation コンパイラの実行時に適用されます。

### React SPAs

`@generaltranslation/compiler` を Vite、webpack、Rollup、Rspack、または esbuild の設定に追加します。adapter の例については、[SPA translations での開発](/docs/react/guides/developing-spa-translations#setup)を参照してください。

### React アプリ (非 SPA)  [#react-apps]

Vite を使用するサーバーサイドレンダリングされた React アプリの場合は、Vite の設定にコンパイラプラグインを追加します。

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

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

### Next.js

Babel ベースの webpack コンパイラを使用するように `gt-next` を設定します。

```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';

const nextConfig = {};

export default withGTConfig(nextConfig, {
  experimentalCompilerOptions: {
    type: 'babel',
    enableAutoJsxInjection: true,
  },
});
```

webpack で開発サーバーと本番ビルドの両方を実行します:

```json title="package.json"
{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}
```

Next.js 16 では、デフォルトで Turbopack が使用されます。Turbopack は Babel コンパイラを無効にし、自動インジェクションがスキップされることを警告し、JSX はラップされないままになります。[Next.js compiler options](/docs/react/nextjs/config#compiler-options) を参照してください。

## 仕組み [#how]

インジェクションを使わない場合は、翻訳可能なテキストを自分でラップします。

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

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

Next.js のプロジェクトでは、代わりに `gt-next` から [`<T>`](/docs/react/reference/components/t) をインポートします。

インジェクションを有効にすると、コンパイラが翻訳可能なテキストを検出し、ビルド時に自動的にラップします。

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

すでに [`<T>`](/docs/react/reference/components/t) でラップされているテキストは、[`<Var>`](/docs/react/reference/components/var)、[`<Branch>`](/docs/react/reference/components/branch)、[`<Plural>`](/docs/react/reference/components/plural)、[`<Derive>`](/docs/react/reference/components/derive) などの他の General Translation コンポーネントと同様に、そのまま保持されます。

## Next steps

- /docs/cli/guides/using-autoderive
- /docs/cli/guides/generating-translations
- /docs/cli/guides/configuring
- /docs/cli/guides/managing-translations

## Sitemap

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