React スクリプトとは？開発者向けガイド

Create React App（CRA）を使用して React アプリを作成したことがあれば、react-scripts を使用したことがあります。しかし、これらのスクリプトは裏側で何をしているのでしょうか？このガイドでは、react-scripts とは何か、各スクリプトが何をするのか、そしていつカスタマイズや置き換えが必要になるかを解説します。

react-scriptsとは？

react-scripts は Create React App（CRA）に同梱されている NPM パッケージです。React アプリケーションの実行、ビルド、テスト、リントに必要な設定とスクリプトが含まれています。Webpack、Babel、ESLint の設定ファイルを自分で書いて管理する代わりに、CRA は react-scripts を使用してその複雑さを裏側で処理します。

CRA を使用して新しい React アプリを作成すると：

npx create-react-app my-app

CRA は react-scripts をインストールし、package.json にデフォルトのスクリプトを設定します：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

コマンドは何をするのか？

npm start

• Webpack Dev Server を使用して開発サーバーを実行します
• ホットモジュールリプレイスメント（HMR）を有効にします
• Babel と環境変数（.env から）を使用します
• デフォルトのブラウザでアプリを開きます

npm run build

• 本番用にアプリをコンパイルします
• JavaScript と CSS を最小化します
• build/ ディレクトリに静的ファイルを生成します
• パフォーマンスを最適化します（ツリーシェイキング、圧縮）

npm test

• Jest を使用してテストを実行します
• デフォルトでファイルを監視します
• カバレッジレポートとモックテストをサポートします

npm run eject

• すべての設定と依存関係をプロジェクトにコピーします
• Webpack、Babel、ESLint などの完全な制御を可能にします
• 不可逆的—「元に戻す」ことはできません

react-scriptsはCRAの中でどのような役割を果たすのか？

Create React App はプロジェクト構造を構築します。しかし、アプリを実行し、バンドルをビルドし、すべての重要な処理を行うのは react-scripts です。

react-scripts なしの CRA は、すべての基礎となる設定を手動で置き換えない限り機能しません—これはまさにイジェクトした時に起こることです。

react-scriptsをオーバーライドまたは置き換えるタイミング

時には、この抽象化が制限となることがあります。以下のような場合に必要かもしれません：

• Webpack ローダーやエイリアスをカスタマイズする
• 異なる Babel プラグインを使用する
• ESLint の動作を変更する

3つの選択肢があります：

1. イジェクト

npm run eject

• 完全な制御が可能ですが、複雑で不可逆的です

2. イジェクトせずにオーバーライド

• 以下のようなライブラリを使用します：
  • craco (Create React App Configuration Override)
  • react-app-rewired
• これらは react-scripts をラップし、カスタム設定を注入できます

3. 完全に置き換える

• CRA があなたのニーズに合わなくなった場合、以下を検討してください：
  • Vite
  • Next.js
  • Parcel

一般的なエラーとその修正方法

'react-scripts' is not recognized as a command

• 通常、node_modules が見つからないことが原因です
• 修正方法：

rm -rf node_modules
rm package-lock.json
npm install

パッケージ更新後にビルドが失敗する

• react-scripts のバージョンが React のバージョンと一致しているか確認してください
• 変更履歴を確認せずに react-scripts を手動でアップグレードすることは避けてください

Create React App と react-scripts は今でも関連性がありますか？

はい—初心者、学習プロジェクト、迅速なプロトタイピングには、CRA + react-scripts は設定不要で React を構築する方法を提供します。しかし、Vite や Next.js のような最新の代替手段は、より大きなアプリケーションにとって、より高速で柔軟性があり、より将来性があります。

結論

react-scripts はすべての CRA ベースの React アプリを動かすものです。複雑なツールを露出させることなく、バンドル、テスト、リントなどを処理します。始めたばかりなら、React 自体の学習に集中するのに最適な方法です。アプリが成長するにつれて、オーバーライドしたり、それを超えて移行したりすることもできます。

よくある質問