Mac：npm run devを実行するとエラーになる

Question

MacにNode.jsをインストールしてましたがnpm run devで以下のエラーが出てしまいました。
※Homebrewを用いてます

#事象
npm run devすると

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/tom/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/tom/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tom/.npm/_logs/2020-06-15T05_40_09_174Z-debug.log

#試したこと
・brew install nodebrewでnodebrewインストール。()
・nodebrew install-binary stableでnode.jsのインストール

バージョン確認コマンドでちゃんとインストールできてるか確認。

////nodebrewの確認

$ nodebrew -v
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

////node.jsの確認

$ node -v
v14.4.0

$ nodebrew ls
v14.4.0

current: v14.4.0

////パスも通っている

$ npm

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /Users/tom/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.14.5 /Users/tom/.nodebrew/node/v14.4.0/lib/node_modules/npm

お詳しい方がいましたらよろしくお願いいたします。

Answer 1

この行が原因です。

npm ERR! enoent ENOENT: no such file or directory, open '/Users/tom/package.json'
npm ERR! enoent This is related to npm not being able to find a file.

解説していきます。

---

Node.jsはプロジェクトルートにpackage.jsonというJSON形式のファイルを設置し、
これにプロジェクトの概要を書き込んでいきます。

Node.jsにおまけでひっついてくる管理ツールのnpmは
このpackage.jsonを読み書きしながらプロジェクトの状態を管理します。

このプロジェクトが何のライブラリを採用しているかとか、
デプロイ方法は？CIは？テストは？
全てこのファイルに書いてあります。

本件のnpm run devも同様で、これはnpm-scriptsと呼ばれる
プロジェクトで使うコード類をpackage.jsonに書き写したものを実行しているだけです。
package.jsonを開いてこんな風にscriptsキーの配下に、devキーが存在し、文字列としてコマンドが記述されているはずです。

{
  "scripts": {
    "dev": "何かしらのコマンド"
  }
}

参考記事: Node.jsユーザーなら押さえておきたい npm-scriptsのタスク実行方法まとめ

---

冒頭に戻りましょう。

npm ERR! enoent ENOENT: no such file or directory, open '/Users/tom/package.json'
npm ERR! enoent This is related to npm not being able to find a file.

エラーを読めば一目瞭然ですね。
package.jsonファイルが存在しないよと言っているわけです。
先程紹介したように、npm run devはpackage.jsonファイルのscripts.devの文字列をコマンドとして実行するわけですから、そもそもpackage.jsonファイルが無ければ動作しません。

MacにNode.jsをインストールしてましたがnpm run devで以下のエラーが出てしまいました。

この状態ですから、まだプロジェクトもソースコードもなにもないんだと思います。
もし作るならnpm init --yesコマンドを実行すると、
ワーキングディレクトリに適当に値を格納したシンプルなpackage.jsonファイルを生成してくれます。

もし他の方が作ったプロジェクトならば、
必ずプロジェクトルートのディレクトリにpackage.jsonファイルが存在しているはずなので、
そのプロジェクトをどうやって導入すれば良いのか先輩に相談してみてください。

---

【追記】

何を作るのかにもよりますが、
まずはプロジェクトにしようと思うフォルダを作って決めてください。
そのフォルダにcdコマンドで移動してからnpm init --yesを実行してpackage.jsonを設置することで
「これはNode.jsで作ったプロジェクトですよ」という明示になります。

適当な場所にプロジェクトを作ると後で混乱するので、
一般的なエンジニアの慣習に従って進めていきましょう
#: コメント
$: 打ち込むコマンド

# cdコマンドのみを実行して~に移動する
$ cd

# projectsフォルダを作成して移動
$ mkdir projects
$ cd projects

# 更にhello-worldフォルダを作成して移動
$ mkdir hello-world
$ cd hello-world

# package.jsonファイルを作成
$ npm init --yes

# pwdで現在のパスを表示、vscode等のエディタにコピペしてプロジェクトとして開くと良い
$ pwd
/home/[user-name]/projects/hello-world

# npmのサイト(https://www.npmjs.com/)で欲しいパッケージを探してインストール
# 例として導入するのは日付管理の得意なMoment.js (https://momentjs.com/)
$ npm install moment

このフォルダにindex.jsというファイルを作ってみます。
先程導入したMoment.jsを使って現在時刻を表示します。

const moment = require("moment");

const now = moment().format("YYYY-MM-DD hh:mm:ss");
console.log(now);

$ node index.js
2020-06-16 02:29:22

今回の質問はnpm run devを作りたいという質問なので、
package.jsonを編集して終了しましょう。
npm init --yesで作った初期のpackage.jsonには既にscripts.testというキーがあります。
これに追記するようにscripts.devを追加します。

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.26.0"
  }
}

これでnpm-scriptsの準備が完了しました。
早速実行してみます。

$ npm run dev

> hello-world@1.0.0 dev /Users/mohata/projects/hello-world
> node index.js

2020-06-16 02:32:3

こんな感じでnpm-scriptsは単なるコマンドでしかありませんが、
Webサービスを開発環境モードで立ち上げる場合はnpm run devで起動しておくように作るような慣習がありますので、自分でこのようにガリガリ書きまくるということは少ないかもしれません。

プロジェクトのビルドツール等を導入した時には、
package.jsonを見れば書いてあるはずなので、
これを覚えておき、わからない事があればpackage.jsonを一度見るようにしてみてくださいね。

Comments

[shoco]

ご丁寧にありがとうございます
npm init を実行したらpackage.jsonが生成されました。

npm initを実行する場所に決まりはありますか？
以下は.npmや.nodebrewがあるフォルダ（/Users/tom）で実行しました

TomMac:~ tom$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (tom)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/tom/package.json:

{
"name": "tom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Is this OK? (yes) yes
TomMac:~ tom$

[miyabi-sun]

簡単なチュートリアルを添えてみました。
でも`npm run dev`をどこで見知ったんだ？という問題が残っています。
`package.json`の作り方なんて本来どうでも良いはずなんです。

きっとどこかの記事でプロジェクトビルダーで作るみたいな紹介がされていて
「ああやってインストールして、`npm run dev`でサーバーが立ち上がります」みたいな端折った紹介がされていたと思うんですよね。

なのでpackage.jsonとnpmの繋がりをチュートリアル的に紹介しておくことで、
きっと1ヶ月後の理解がより深まるんじゃないかなと思って追記部分は書きました。

[shoco]

チュートリアルの紹介ありがとうございます。
早速見てみようと思います！