ReactJSで"sh: react-scripts: command not found after running npm start" エラーが発生した時の解決方法
2024-04-02
ReactJSで "sh: react-scripts: command not found after running npm start" エラーが発生する原因と解決方法
npm start コマンドを実行した時に sh: react-scripts: command not found エラーが発生する場合、いくつかの原因が考えられます。このエラーは、ReactJSプロジェクトでよく発生する問題の一つです。
原因
このエラーが発生する主な原因は以下の4つです。
- react-scripts がインストールされていない
- node_modules フォルダが破損している
- 環境変数 PATH が正しく設定されていない
- npm または yarn のバージョンが古い
解決方法
原因によって解決方法は異なりますが、以下の手順を試してみてください。
以下のコマンドを実行して react-scripts をインストールします。
npm install react-scripts
以下のコマンドを実行して node_modules フォルダを削除し、再インストールします。
rm -rf node_modules
npm install
環境変数 PATH の設定
以下のコマンドを実行して、環境変数 PATH に node_modules/.bin ディレクトリを追加します。
export PATH=$PATH:$HOME/node_modules/.bin
以下のコマンドを実行して npm または yarn のバージョンを確認します。
npm -v
または
yarn -v
バージョンが古い場合は、以下のコマンドを実行して最新バージョンに更新します。
npm install -g npm
yarn global upgrade
その他の解決方法
上記の方法で解決しない場合は、以下の方法を試してみてください。
- プロジェクトフォルダのパスに日本語が含まれていないことを確認する。
- キャッシュをクリアする。
- プロジェクトを再作成する。
補足
- このエラーは、Mac OS X、Windows、Linux などのすべてのオペレーティングシステムで発生する可能性があります。
- このエラーが発生した場合は、エラーメッセージの内容をよく読んで原因を特定することが重要です。
- 上記の方法で解決できない場合は、オンラインフォーラムやコミュニティで助けを求めることを検討してください。
改善点
- 日本語で分かりやすく説明するように努めました。
- 原因と解決方法を箇条書きにして、読みやすくしました。
// App.js
import React from 'react';
function App() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
このコードを実行するには、以下のコマンドを実行します。
npm start
ブラウザで http://localhost:3000 を開くと、"Hello, world!" という文字が表示されます。
- サンプルコードとその他のサンプルコードへのリンクを追加しました。
react-scripts を使用せずに ReactJS プロジェクトを作成する方法
以下の手順で、手動で ReactJS プロジェクトを作成することができます。
- プロジェクトフォルダを作成します。
index.htmlファイルを作成し、以下のコードを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReactJS プロジェクト</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
function App() {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
{
"name": "react-project",
"version": "1.0.0",
"description": "ReactJS プロジェクト",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
node_modulesフォルダを作成し、以下のコマンドを実行して必要なライブラリをインストールします。
npm install
Babel を使用してプロジェクトを作成する
Babel は、JavaScript の新しい構文を古いブラウザで実行できるようにするためのツールです。Babel を使用して ReactJS プロジェクトを作成するには、以下の手順が必要です。
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
{
"name": "react-project",
"version": "1.0.0",
"description": "ReactJS プロジェクト",
"main": "index.js",
"scripts": {
"start": "babel-node index.js",
"build": "babel index.js -o dist/index.js",
"test": "jest"
},
"dependencies": {
"babel-core": "^7.12.13",
"babel-preset-env": "^7.12.13",
"babel-preset-react": "^7.12.13",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
npm install
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<h1>Hello, world!</h1>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
reactjs
