@vitejs/plugin-react: ViteのJSX変換とReact Fast Refreshを担う公式プラグイン
vite-plugin-react は、高速更新、JSX/TSX サポート、SWC 変換、独自の React プラグイン エクスペリエンスを提供する React 用の公式 Vite 統合です。
ひと目でわかる
- これは何？
- Vite上のReactプロジェクトでJSXランタイム、React Compiler、SSR preamble、Fast Refreshを設定するplugin-reactの要点。
- 誰に向いている？
- vitejs/vite-plugin-react は React プロジェクト向けの Vite デフォルトプラグインです。Fast Refresh、自動 JSX ランタイム、React Compiler プリセット、SSR アプリ向けの preamble 処理を提供します。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 1 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月14日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
Vite 向け React デフォルトプラグイン
@vitejs/plugin-react は、リポジトリメタデータで「The all-in-one Vite plugin for React projects」と説明され、README では Vite の React プロジェクト向けデフォルトプラグインと位置付けられています。README によると、開発環境で Fast Refresh を有効にし（React 16.9 以降が必要）、自動 JSX ランタイムを使用し、インストールサイズを小さく保ちます。プラグインは TypeScript で書かれ、MIT ライセンスで配布されています。メタデータ時点でスター 1,133、フォーク 261 ですが、README は具体的なバージョン番号や他の React Vite プラグインとの比較を記載していません。
基本設定とファイルフィルタリング
プラグインは、vite.config.js で react 関数をインポートして plugins 配列に追加することで有効になります。デフォルトでは .js、.jsx、.ts、.tsx ファイルが対象です。include オプションを使うと Fast Refresh の適用範囲を広げられ、README では @mdx-js/rollup と組み合わせて .mdx ファイルを含める正規表現の例が示されています。exclude オプションのデフォルトは /node_modules/ で、ワーカーで動く JSX/TSX ファイルや React 以外のファイルを除外するためのものです。README は node_modules を除外リストに残すことを推奨し、/pdf/ や .solid.tsx を除外する例を挙げています。
JSX ランタイムとインポート元
JSX 変換では、デフォルトで自動 JSX ランタイムが使われます。jsxRuntime オプションで 'classic' に切り替えることも可能です。jsxImportSource オプションは JSX ファクトリのインポート元を制御し、デフォルトでは変換対象ファイルの tsconfig 内の jsxImportSource 設定から推測されます。README では '@emotion/react' を設定する例が示されています。これにより、ソースコードを変更せずに JSX 変換を細かく制御できます。
React Compiler プリセット
React Compiler のサポートは、エクスポートされた reactCompilerPreset ヘルパーで提供されます。README によると、このプリセットは @rolldown/plugin-babel、babel-plugin-react-compiler、@babel/core を peer dependencies として必要とし、TypeScript ユーザーは @types/babel__core も必要です。設定例では vite.config.js で react() と babel({ presets: [reactCompilerPreset()] }) を組み合わせています。プリセットはオプションオブジェクトを受け取り、compilationMode を 'annotation' にすると "use memo" で注釈されたコンポーネントのみをコンパイルし、target を '17' または '18' にすると古い React バージョン向けに react-compiler-runtime を使用します。また、プリセットはフィルターが事前設定された便利なヘルパーであり、rolldown.filter プロパティを変更して src/legacy/** などを除外できます。
SSR 向け preamble の初期化
transformIndexHtml API を使用しない SSR アプリケーションのために、プラグインは @vitejs/plugin-react/preamble サブパスを提供し、クライアントエントリポイントから HMR ランタイムを初期化します。README では entry.client.js でこのモジュールをインポートする例が示されています。別の方法として、SSR 中に viteServer.transformIndexHtml を手動で呼び出し、同等の初期化コードを生成することもできます。README は Express サーバーの例を示しています。preamble がない場合、"Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong." というエラーが発生します。
Fast Refresh のためのコンポーネントエクスポート
React Fast Refresh を正しく機能させるには、ファイルが React コンポーネントのみをエクスポートする必要があります。互換性のないエクスポートの変更が見つかると、モジュールは無効化され HMR が伝播します。ただし、単純な定数をコンポーネントと一緒にエクスポートすることはでき、値が変更された場合のみモジュールが無効化されます。README は Gatsby のドキュメントを参照し、ESLint、Oxlint、Biome のルールを使って間違いを検出することを推奨しています。
ライセンスと README で確認できない事項
このリポジトリは MIT ライセンスで提供され、著作権は Yuxi (Evan) You と Vite コントリビューターに帰属します。ライセンスの抜粋では、ソフトウェアのコピーを使用、複製、変更、統合、公開、配布、サブライセンス、販売する権利が許可されていますが、著作権表示を含める必要があります。ソフトウェアは「現状のまま」提供され、商品性、特定目的への適合性、非侵害性を含むいかなる保証もありません。ライセンスはセキュリティサポート、更新の約束、商用サポートについては言及していません。README はプラグインのバージョン番号、パフォーマンスベンチマーク、本番結果、セキュリティ監査の状況を確立しておらず、それらはリリース履歴や他のドキュメントを確認する必要があります。
plugin-reactの導入判断は、Viteの開発サーバーでJSXを変換するだけの構成か、SSRとReact Compilerまで含める構成かで分かれます。通常の設定では `@vitejs/plugin-react` を `vite.config.js` の `plugins` 配列に置き、必要なら `include` と `exclude` で対象ファイルを絞ります。JSXの自動ランタイムは `jsxImportSource` で変更でき、READMEの例はReact以外の互換ランタイムを選ぶ場合の確認材料になります。
SSRではクライアントエントリポイントで `@vitejs/plugin-react/preamble` を読み込むか、サーバー側で `viteServer.transformIndexHtml` を呼び出す必要があります。これを省くとREADME記載のprelude検出エラーになります。React Compilerプリセットは開発と本番の変換条件を変え得るため、導入時は生成コード、Fast Refreshの更新範囲、SSRの初期HTMLを同じサンプルで比較します。READMEは性能値や本番監査結果を示していないので、そこはこのプラグインの説明からは判断できません。
編集部の結論
vitejs/vite-plugin-react は React プロジェクト向けの Vite デフォルトプラグインです。Fast Refresh、自動 JSX ランタイム、React Compiler プリセット、SSR アプリ向けの preamble 処理を提供します。
コミュニティノート