【ITニュース解説】How to fix "react-scripts" is not recognized as an internal or external command

Reactを使ったWebアプリケーション開発を進めていると、「'react-scripts' is not recognized as an internal or external command」というエラーメッセージに遭遇することがある。これは、特に開発を始めたばかりの初心者にとっては戸惑うエラーの一つだろう。このエラーは、コンピュータが「react-scripts」という名前のコマンドを見つけられない、あるいは実行できない状態であることを示している。Reactプロジェクトを動かすための中心的な役割を担うこのコマンドが利用できないと、開発サーバーの起動やアプリケーションのビルドといった基本的な操作ができなくなってしまう。このエラーが発生する原因は複数考えられるが、一つずつ順を追って確認することで解決できる場合がほとんどである。

まず、エラーの根本的な原因として最も多いのは、「react-scripts」というプログラム部品（パッケージ）がプロジェクトにインストールされていないケースである。Reactプロジェクトは、様々な機能を持つ多数のパッケージの集合体として成り立っている。react-scripts は、Create React Appという公式ツールでプロジェクトを作成した際に自動的に組み込まれるパッケージで、開発環境の複雑な設定を隠蔽し、簡単なコマンドでプロジェクトを操作できるようにしてくれる心臓部のような存在だ。もしこれが存在しなければ、当然コマンドも実行できない。この問題を解決するには、プロジェクトの管理ツールであるnpmやyarnを使い、npm install react-scripts もしくは yarn add react-scripts というコマンドを実行する。これにより、必要なパッケージがインターネットからダウンロードされ、プロジェクト内で利用可能な状態になる。

次に確認すべきは、コマンドを実行している場所、つまり現在の作業ディレクトリが正しいかどうかである。コマンドプロンプトやターミナルでコマンドを実行する際、コンピュータは現在いるディレクトリを基準にファイルやコマンドを探す。Reactプロジェクトに関するコマンドは、そのプロジェクトの最上位の階層（ルートディレクトリ）で実行する必要がある。ルートディレクトリには、「package.json」というプロジェクトの設計図とも言える重要なファイルが置かれている。もし、cdコマンドなどを使って別のディレクトリに移動してしまっている状態でnpm startなどを実行すると、コンピュータはreact-scriptsを見つけることができず、エラーを返す。自分が今どのディレクトリにいるかを確認し、もし違っていたらcd your-react-project-folderのようにコマンドを打ち、正しいプロジェクトフォルダへ移動することが不可欠である。

また、パッケージはインストールされているものの、その中身が破損している可能性も考えられる。パッケージのインストールは多くのファイルをダウンロードし、配置する複雑なプロセスであり、ネットワークの問題や処理の中断など、何らかの理由で不完全な状態に陥ることがある。プロジェクトフォルダ内にある「node_modules」というディレクトリには、react-scriptsを含む、プロジェクトで利用するすべてのパッケージが格納されている。このnode_modulesディレクトリ内のデータが破損していると、正しくコマンドが実行できなくなる。この場合、一度node_modulesディレクトリと、パッケージのバージョン情報を固定するためのpackage-lock.jsonファイルを削除し、まっさらな状態から再インストールするのが有効な解決策となる。rm -rf node_modules package-lock.jsonというコマンドで関連ファイルを削除した後、再度npm installを実行する。これにより、package.jsonの設計図に基づいて、必要なパッケージ群がクリーンな状態で再構築される。

さらに、プロジェクトの設計図である「package.json」ファイル自体の記述に問題がある場合もある。このファイルには、プロジェクトが依存しているパッケージの名前とバージョンが「dependencies」という項目にリストアップされている。ここにreact-scriptsの記述がなかったり、バージョンが「^0.0.0」のような異常な値になっていたりすると、npm installを実行しても正しくインストールされない。これは、インストール中に通信が途切れるなどのトラブルでpackage.jsonの更新が不完全に終わった場合に発生しうる。このファイルのdependenciesセクションを確認し、もしreact-scriptsに関する記述がおかしい場合は、npm install react-scriptsを再度実行する。このコマンドは、パッケージをインストールするだけでなく、package.jsonの記述を正しい状態に更新する機能も持っている。

これらすべての対処法を試しても問題が解決しない場合、プロジェクトの構成ファイル自体に、より深刻な問題が潜んでいる可能性がある。その場合の最終手段として、プロジェクトを新規に作り直すという方法がある。npx create-react-app my-new-appのようにコマンドを実行して新しいプロジェクトを作成し、そこに既存のソースコードを移植することで、クリーンな開発環境を再構築できる。エラーの解決は一見難しく感じられるが、その原因はプロジェクトの基本的な構成要素であるパッケージの有無、作業場所、ファイルの整合性、そして設計図の記述内容に起因することが大半である。エラーメッセージを正しく理解し、考えられる原因を一つずつ潰していくことが、エンジニアとしての問題解決能力を高める上で重要な経験となる。