@vitejs/plugin-react とは？v6（Vite 8・Babel廃止）の導入設定と plugin-react-swc との違い【2026年最新】

@vitejs/plugin-react は、ViteでReactを動かすための公式プラグインです。JSXの変換と開発時のFast Refresh（状態を保ったままの画面更新）を担い、Reactプロジェクトなら実質これを入れることから始まります。2026年3月にリリースされた Vite 8 に合わせて出た v6（最新は6.0.3） で内部が大きく変わり、これまで依存していたBabelを廃止してRust製のOxcで変換するようになりました。この記事では、導入と vite.config.ts の書き方、v6の変更点、SWC版（@vitejs/plugin-react-swc）との使い分け、React Compilerの有効化までを最新の仕様で整理します。

まとめ：先に結論

• Reactを使うViteプロジェクトの標準は @vitejs/plugin-react。npm install -D @vitejs/plugin-react で入れ、vite.config.ts の plugins に react() を追加するだけで動く。
• 最新は v6.0.3。v6は Vite 8 が必須で、Babelを廃止しOxcで変換する。Node は 20.19以上または22.12以上が必要。
• 旧来の react({ babel: { ... } }) はv6で使えない。React Compiler を使うなら @rolldown/plugin-babel と reactCompilerPreset() を併用する。
• SWC版 @vitejs/plugin-react-swc（最新4.3.1）はVite 4〜8に対応。v6でOxc化した標準版との速度差は縮まっており、迷ったら標準版でよい。
• 最新バージョンは変動するため、正確な数値は必ず npmの公式ページで確認する。

@vitejs/plugin-react の役割：JSX変換とFast Refresh

Viteは素のJavaScript/TypeScriptはそのまま扱えますが、Reactの .jsx/.tsx（JSX構文）はブラウザが解釈できないため変換が要ります。@vitejs/plugin-react はこのJSX変換と、開発サーバーでコンポーネントを編集したとき状態を保持したまま差分だけ更新するFast Refreshをまとめて提供します。ReactのViteテンプレートに最初から組み込まれているのはこのプラグインで、Reactアプリの土台と考えて差し支えありません。

v6以降は変換エンジンがBabelからOxcへ置き換わりました。OxcはRust製の高速JavaScript/TypeScriptツールチェーンで、Vite 8のバンドラRolldownと同じ系譜です。ユーザーが書く設定は変わりませんが、Babelを持たなくなった分インストールサイズが小さくなり、変換もBabelを介するオーバーヘッドが減りました。

導入手順と vite.config.ts の設定

npm でのインストール

既存のViteプロジェクトに追加する場合は開発依存として入れます。

npm install -D @vitejs/plugin-react
# pnpm の場合
pnpm add -D @vitejs/plugin-react

vite.config.ts への記述

プラグイン配列に react() を追加します。オプション無しで大半の用途に足ります。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

調整が必要なときによく使うオプションは次の3つです。include/exclude（変換対象のファイル範囲、既定は .js/.jsx/.ts/.tsx と node_modules 除外）、jsxImportSource（EmotionなどでJSXの取り込み元を変える）、jsxRuntime（既定は automatic、旧構成に合わせるなら classic）。v5までの babel オプションはv6で削除されました。

Vite + React + TypeScript の新規作成

ゼロから作るなら create vite のテンプレートを使うのが速く、プラグインも設定済みで入ります。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

SWC版を最初から使いたい場合はテンプレート名を react-swc-ts にします。プロジェクト構成やLaravelなど他フレームワークとの組み合わせを含めた全体像はViteを使ったReactプロジェクトのセットアップ方法で詳しく扱っています。

v6の主な変更点と最新バージョン（Vite 8・Babel廃止・Oxc化）

2026年7月時点の最新は 6.0.3 です。v6はVite 8と同時に登場したメジャー更新で、既存プロジェクトを上げるときは次の破壊的変更に注意します。

• Babelを依存から削除：JSX変換とFast RefreshをOxcが担う。速度向上と依存の軽量化が主目的。
• Vite 8 が必須：Vite 7以下では動かない。プラグインだけ上げてもViteが古いままなら失敗する。
• Nodeの下限が上昇：Node 20.19以上、または22.12以上が必要。
• react({ babel: ... }) の廃止：Babelプラグインを差し込む口が無くなった。React CompilerやEmotionのBabel変換は別パッケージ（後述）で行う。
• react/react-dom の自動 dedupe をやめた：重複解決が要る構成では resolve.dedupe を自分で書く。

「Vite 8にしたら react({ babel }) が動かない」という詰まり方はほぼこの世代交代が原因です。Vite 8へ上げず現状維持したいなら、plugin-reactもv5系に留める判断が現実的です。

plugin-react と plugin-react-swc の違いと使い分け

公式には標準版のほかに SWC版（@vitejs/plugin-react-swc）があり、さらに実験的な Oxc版（@vitejs/plugin-react-oxc）も存在します。役割は同じ「ReactのJSX変換とFast Refresh」で、違いは変換に使うコンパイラです。

標準版とSWC版の選定基準

結論から言うと、新規プロジェクトは標準の @vitejs/plugin-react でよいです。SWC版はもともと「Babelより高速なFast Refresh変換」を売りにしていましたが、v6で標準版がOxc化したことで速度差は実用上ほぼ消えました。SWC版が向くのは、既にSWCのカスタム変換（デコレータ処理や特定のSWCプラグイン）を運用に組み込んでいるケースに限られます。逆に、Babelプラグインへ依存した構成が残っているならv6では動かないため、その部分を先に別プラグインへ移すか、移行が済むまでv5に留めます。

@vitejs/plugin-react-oxc は、v6でOxcが標準版へ統合される前の橋渡しとして提供されていたもので、現在は役割が縮小しています。新規で選ぶ理由は基本的にありません。Oxc自体の位置づけはOxcとRust製ツールチェーンの解説を参照してください。

React Compiler（v1）を @vitejs/plugin-react で有効化する

React Compilerは、useMemo や useCallback の手動メモ化を不要にする自動最適化ツールで、2025年10月にv1.0が安定版になりました。ただしv6ではBabel経由の口が無くなったため、以前の react({ babel: { plugins: [['babel-plugin-react-compiler']] } }) という書き方は使えません。v6では専用のプリセットと @rolldown/plugin-babel を組み合わせて有効化します。

npm install -D @rolldown/plugin-babel @babel/core babel-plugin-react-compiler

import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

export default defineConfig({
  plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
})

reactCompilerPreset() は対象ファイルの絞り込みを内蔵しており、Babelを全ファイルにかけずに済むぶんビルドが軽くなります。React本体は19系（最新19.2）を使う前提で、バージョン間の変更点はReact 19の新機能とReact Compilerにまとめています。

vanilla-extract を組み合わせて CSS を型安全にする

スタイルもTypeScriptで型安全に書きたい場合、@vanilla-extract/vite-plugin（最新5.2.5）を併用します。CSS-in-JSと違い実行時コストがなく、ビルド時に静的CSSへ変換される点が特徴です。plugin-reactと同じ plugins 配列に追加します。

npm install -D @vanilla-extract/vite-plugin @vanilla-extract/css

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'

export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
})

スタイルは .css.ts ファイルに定義し、生成されたクラス名をコンポーネントで読み込みます。

// styles.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  padding: '8px 16px',
  backgroundColor: '#2563eb',
  color: '#fff',
})

クラス名はビルド時に一意化されるため、グローバル汚染や名前衝突を型の段階で防げます。小規模なら通常のCSS Modulesで十分ですが、デザインシステムのようにトークンを共有する規模ではvanilla-extractの型安全性が効きます。

よくある質問（FAQ）

@vitejs/plugin-react のインストール方法は？

npm install -D @vitejs/plugin-react で追加し、vite.config.ts の plugins に react() を書きます。新規なら npm create vite@latest my-app -- --template react-ts で最初から設定済みの状態を作れます。

最新バージョンはいくつですか？

2026年7月時点で 6.0.3 です。v6はVite 8必須なので、単体で上げる前にViteのバージョンを確認してください。最新値は変動するため npm公式ページで確認するのが確実です。

plugin-react と plugin-react-swc はどちらを使うべき？

新規なら標準の @vitejs/plugin-react を推奨します。v6でOxc化したことでSWC版との速度差は実用上ほぼ無くなりました。SWC版は既存のSWCカスタム変換を運用しているケースで選びます。

Vite 8にしたら react({ babel }) が動かなくなりました

v6でBabelが依存から外れ、babel オプションが廃止されたためです。React CompilerやBabel変換は @rolldown/plugin-babel と reactCompilerPreset() の併用へ書き換えます。Vite 8へ上げない方針なら、plugin-reactをv5系に据え置く選択もあります。

@vitejs/plugin-react-oxc は何のためのプラグインですか？

v6でOxcが標準版へ統合される前の移行用プラグインで、現在は役割が縮小しています。新規で選ぶ必要は基本的にありません。標準版がすでにOxcで動きます。

関連記事

• Viteを使ったReactプロジェクトのセットアップ方法を徹底解説
• Oxcとは？Rust製の高速JavaScript/TypeScriptツールチェーン｜Oxlintの使い方とESLint比較
• React Compilerとは？自動メモ化の仕組みと導入方法・useMemoとの違いを解説
• React 19とは？18からの変更点・新機能とReact Compiler・最新バージョンを解説
• TypeScript 7とは？Go製ネイティブコンパイラtsgoで最大10倍高速化