AppGram 
今回は、npmを用いたコマンド操作について紹介したいと思います！
node.jsを実行する際、複数のコマンドを実行しなければならない時がありますよね？
- サーバー側とクライアント側のプロセスを同時に開始したい。
- 一つのコマンド操作で全てのテストコードを実行したい
こんな場合に役に立つのが、npmスクリプトです。
ディレクトリ構成
サーバー側：express
クライアント側：React
.
├── client
│ ├── package.json
│ └── src
├── package.json
└── server
├── package.json
└── src
ソースコードやnode_modules,package-lock.jsonなどのディレクトリは省略しています。
今回紹介するのは、主にpackage.jsonの中身です。
サーバー、クライアント、プロジェクト全体にpackage.jsonが生成されている点が分かっていただければ十分です(^^)
サーバー側のスクリプト
では、サーバー側のスクリプトを実装していきましょう！
package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon src/server.js",
"test": "jest",
"test-watch": "jest --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^16.0.0",
"express": "^4.17.3",
"jest": "^27.5.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.2.4",
"nodemon": "^2.0.15",
"passport": "^0.5.2",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"supertest": "^6.2.2"
}
}実行したいスクリプトを作成するためには、scriptsにコマンド名を設定をしていく必要があります。
"start": "nodemon src/server.js",この部分を例に見て見ましょう。
startというスクリプト名を設定し、コマンド名を値にセットしています。
この例は、nodemonを実行していますね！
npm run startnpm run <設定したスクリプト名> をターミナルに打つと、設定したコマンドが実行されます。
（例では、nodemonが実行される）
クライアント側のスクリプト
次に、クライアント側のスクリプトについて見ていきましょう！
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.2.1",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "BUILD_PATH=../server/public react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
クライアント側でも、やることは変わりません！
scriptsにスクリプト名とコマンド操作を設定し、npm run <設定したスクリプト名>をターミナルに入力していきます。
プロジェクト全体のスクリプト
次にプロジェクト全体のpackage.jsonを設定していきます。
package.json
"scripts": {
"install": "npm i --prefix client && npm i --prefix server",
"deploy": "npm run build --prefix client && npm start --prefix server",
"start": "npm run start --prefix server & npm run start --prefix client",
"test": "npm test --prefix server"
}プロジェクト全体のスクリプトでは、サーバー側、クライアント側の両方のスクリプトが使えるようになります。
"start": "npm run start --prefix server & npm run start --prefix client"この部分では、–prefix serverを用いてサーバー側のスクリプトにアクセスしています。
クライアント側も同様、–prefix clientでクライアント側にアクセスしています。
また、スクリプトを＆で囲むことで複数の処理を実行できるようになります。
＆＆：一つ目の処理が完了してから二つ目の処理を実行
＆：一つ目の処理が終わらなくても、二つ目の処理を実行
startに限らずとも、testを設定してテストコードを実行したり、installを設定して、 他人が開発するときに簡単にパッケージをインストールできるようにしておくこともできますよ！
