npxってなんだ

そういやちゃんと理解できていなかった、npx

色々なチュートリアルをやっていると、多くの Get started で

npx xxx

みたいなコマンドが出てきます。
このコマンドなんですが、ライブラリを入れずに npm パッケージを使えることはなんとなく理解していたけど、結局なんなのかがわかっていなかったので、簡単に勉強してみることにしてみました。

npm と npx の違い

npm はnode package manager、つまりパッケージの管理ツールです。
npx はnode package executer、つまりパッケージの実行を行うツールです。
ここからわかるように、そもそもこの 2 つは区分けが違います。
npm はパッケージ管理ツールなので、パッケージとしてインストールされたものを管理する目的で使い、npx は特定パッケージをインストールせずにしようするものです。

npm run xxx

npx xxx

npm 経由でインストールされたパッケージは npm 経由で実行される必要があります。
npx では直接パッケージの実行が可能です。

yarn ではどうするのか？

yarn では一応あるらしい（2 系の yarn dlx）ですが、あまり使われていない印象です。
多分 yarn の 2 系自体があまり採用されていないのが原因なのかなと思っています。
また、パッケージ自体を管理せず、実行だけを目的にしているのが npx コマンドなので、yarn で代替する必要がそれほどないのかもなとも思っています。
（色々なの Get started を見ましたが、ほとんどが npx コマンドの記載でした。）

npm と npx ってどうやって使い分けるべきなのか？

簡単にいうと一番最初に実行する、一回だけ打つコマンドは npx になるのかなと思っています。
色々な Get started が npx で記載されているのは最初にセットアップができればあとは開発で出てこなくなる、あくまで初回の処理のためのコマンドだからなのかなと思います。
逆に npm で使うコマンドは開発で何度も実行しうる、またはオプションが必要で毎回書くのが面倒くさいものになるかなと思います。
何度も使うものはそれは当然使いまわせる状態にあった方が嬉しいはずなので。

ついでに dependencies と devDependencies の違い

ついで（というより記事が短くなりそう）なので package.json における dependencies と devDependencies も紹介します。
この区分けは簡単で、

dependencies:そのプロジェクトに置いて必須なパッケージ
devDependencies:そのプロジェクトの開発に置いて使うパッケージ、必須ではない

です。
開発の効率化などでこのパッケージは使いたいよね、というものが devDependencies に追加されていくわけです。
ちなみにそれぞれの追加の仕方は

// to dependencies
npm install --save xxx
// if you use yarn
yarn add xxx

// to devDependencies
npm install --save-dev xxx
// if you use yarn
yarn add --dev xxx

になります。

npx の余談

npx コマンドは npm 7 系からすこし挙動が変わっています。
今までは npx 自体が独立したパッケージでしたが、npm exec を内部的に実行するというものへ変わっています。
そのため npx を行なった場合に、インストールされていないパッケージをしようとするとインストールを促されることになります。
筆者の個人で持っている PC は未だ npm は 6 系（あんまり開発で使っていないため）なので特に何も起こりませんが、npx コマンドについてはかなりの breaking changes があったようです。
参考：npm v7 の主な変更点まとめ
Node のバージョンも LTS が 16 になっており、npm も 8.5.0 で同梱されているので、常に最新にされている方には知っているよ、という情報でした。
もし更なる breaking changes が実はあったりしたら、コメントをいただけると助かります。