React アプリケーションで謎のエラー "'react-scripts' is not recognized as an internal or external command" が発生！？ 原因と解決方法を徹底解説！
エラー "'react-scripts' is not recognized as an internal or external command" の原因と解決方法
原因
このエラーが発生する理由はいくつかあります。
- react-scripts がインストールされていない
- Node.js がインストールされていない
- 環境変数 PATH に問題がある
解決方法
このエラーを解決するには、以下の方法を試してください。
npm install -g react-scripts
-
Windowsの場合
- コマンドプロンプトを開きます。
- 以下のコマンドを実行します。
set PATH=%PATH%;%USERPROFILE%\AppData\Roaming\npm\node_modules\react-scripts\bin -
Macの場合
- ターミナルを開きます。
export PATH=$PATH:$HOME/.npm-global/bin/react-scripts
react-scripts コマンドを実行してもエラーが発生する場合は、環境変数 PATH に問題がある可能性があります。環境変数 PATH には、コマンドの実行ファイルが格納されているディレクトリのパスが設定されています。
-
- コントロールパネルを開きます。
- システムとセキュリティ > システム > システムの詳細設定 > 環境変数を選択します。
- システム環境変数で
PATH変数を見つけ、編集ボタンをクリックします。 PATH変数の末尾に;%USERPROFILE%\AppData\Roaming\npm\node_modules\react-scripts\binを追加します。
-
echo $PATH出力結果を確認し、
react-scriptsコマンドの実行ファイルが格納されているディレクトリが含まれていることを確認します。含まれていない場合は、以下のコマンドを実行して追加します。export PATH=$PATH:$HOME/.npm-global/bin/react-scripts
- 使用しているオペレーティングシステム
- Node.js のバージョン
- React のバージョン
- エラーメッセージの詳細
# 新しい React アプリケーションを作成する
npx create-react-app my-app
# アプリケーションに移動する
cd my-app
# アプリケーションを起動する
npm start
このコードを実行すると、my-app という名前の新しい React アプリケーションが作成されます。アプリケーションは localhost:3000 で起動します。
react-scripts を使用せずに React アプリケーションを作成する方法
この方法は、Webpack と Babel を使用して、React アプリケーションに必要なファイルをバンドルし、変換します。
手順
- プロジェクトディレクトリを作成します。
- 以下のファイルを作成します。
package.jsonindex.htmlindex.js
package.jsonファイルに以下の内容を記述します。
{
"name": "my-app",
"version": "1.0.0",
"description": "My React App",
"main": "index.js",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"babel-core": "^7.18.2",
"babel-loader": "^8.2.5",
"babel-preset-env": "^7.18.2",
"babel-preset-react": "^7.18.2",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
- 以下のコマンドを実行して、開発サーバーを起動します。
npm start
開発サーバーが起動すると、ブラウザで localhost:3000 を開き、React アプリケーションが表示されます。
方法 2: Vite を使用する
Vite は、React アプリケーションを含むさまざまな種類の Web アプリケーションを構築するための高速なツールです。
- 以下のコマンドを実行して、Vite をインストールします。
npm init -y
npm install vite
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
npm run dev
react-scripts は、React アプリケーションの作成と起動を簡単にする便利なツールですが、必ずしも必要ではありません。react-scripts を使用せずに React アプリケーションを作成することも可能です。
上記で紹介した 2 つの方法は、react-scripts を使用せずに React アプリケーションを作成する方法のほんの一例です。他にもさまざまな方法があります。
どの方法を選択するかは、あなたの好みとニーズ
javascript node.js reactjs
