インストール

このガイドでは、ReactアプリケーションにReact Compilerをインストールおよび設定する方法を説明します。

前提条件

React CompilerはReact 19で最適に動作するように設計されていますが、React 17および18もサポートしています。詳細については、Reactバージョンの互換性を参照してください。

インストール

React CompilerをdevDependencyとしてインストールします：

npm install -D babel-plugin-react-compiler@latest

Yarnを使用する場合：

yarn add -D babel-plugin-react-compiler@latest

pnpmを使用する場合：

pnpm install -D babel-plugin-react-compiler@latest

基本的なセットアップ

React Compilerは、デフォルトでは設定なしで動作するように設計されています。ただし、特別な状況（例えば、React 19未満のバージョンをターゲットにする場合）で設定する必要がある場合は、コンパイラオプションリファレンスを参照してください。

セットアッププロセスは、使用するビルドツールによって異なります。React Compilerには、ビルドパイプラインと統合するBabelプラグインが含まれています。

Babel

以下のようにbabel.config.jsを作成または更新します：

Vite

Viteを使用している場合は、プラグインをvite-plugin-reactに追加できます：

または、Vite用に別のBabelプラグインを希望する場合は：

npm install -D vite-plugin-babel

Next.js

詳細については、jsのドキュメントを参照してください。

React Router

以下のようにvite-plugin-babelをインストールし、コンパイラのBabelプラグインを追加します：

npm install vite-plugin-babel

Webpack

コミュニティ製のwebpackローダーがこちらで利用可能です。

Expo

ExpoアプリでReact Compilerを有効にして使用するには、Expoのドキュメントを参照してください。

Metro (React Native)

React NativeはMetro経由でBabelを使用するため、インストール手順についてはBabelでの使用方法のセクションを参照してください。

Rspack

RspackアプリでReact Compilerを有効にして使用するには、Rspackのドキュメントを参照してください。

Rsbuild

RsbuildアプリでReact Compilerを有効にして使用するには、Rsbuildのドキュメントを参照してください。

ESLint統合

React Compilerには、最適化できないコードを特定するのに役立つESLintルールが含まれています。ESLintルールがエラーを報告する場合、それはコンパイラがその特定のコンポーネントやフックの最適化をスキップすることを意味します。これは安全です：コンパイラはコードベースの他の部分の最適化を続行します。すべての違反をすぐに修正する必要はありません。最適化されるコンポーネントの数を徐々に増やすために、自分のペースで対処してください。

ESLintプラグインをインストールします：

npm install -D eslint-plugin-react-hooks@latest

まだeslint-plugin-react-hooksを設定していない場合は、READMEのインストール手順に従ってください。コンパイラルールはrecommended-latestプリセットで利用できます。

ESLintルールは以下のことを行います：

• Reactのルール違反を特定する
• 最適化できないコンポーネントを表示する
• 問題を修正するための役立つエラーメッセージを提供する

セットアップの確認

インストール後、React Compilerが正しく動作していることを確認してください。

React DevToolsの確認

React Compilerによって最適化されたコンポーネントは、React DevToolsに「Memo ✨」バッジを表示します：

1. React Developer Toolsブラウザ拡張機能をインストールする
2. 開発モードでアプリを開く
3. React DevToolsを開く
4. コンポーネント名の横にある✨絵文字を探す

コンパイラが動作している場合：

• コンポーネントはReact DevToolsに「Memo ✨」バッジを表示します
• 高コストな計算は自動的にメモ化されます
• 手動でのuseMemoは不要です

ビルド出力の確認

ビルド出力を確認することで、コンパイラが実行されていることも確認できます。コンパイルされたコードには、コンパイラが自動的に追加する自動メモ化ロジックが含まれます。

トラブルシューティング

特定のコンポーネントを除外する

コンポーネントがコンパイル後に問題を引き起こす場合は、"use no memo"ディレクティブを使用して一時的に除外できます：

これは、コンパイラにこの特定のコンポーネントの最適化をスキップするように指示します。根本的な問題を修正し、解決したらディレクティブを削除してください。

トラブルシューティングの詳細については、デバッグガイドを参照してください。

次のステップ

React Compilerがインストールされたので、以下の詳細を学びましょう：

• Reactバージョン互換性（React 17および18向け）
• 設定オプション（コンパイラのカスタマイズ用）
• 段階的導入戦略（既存のコードベース向け）
• デバッグ手法（問題のトラブルシューティング用）
• ライブラリのコンパイルガイド（Reactライブラリのコンパイル用）