npmとnpxの違いとよく使うオプションをコマンド一覧でまとめる
概要
npmとnpxの違いについて解説していきたいと思います。
Node.jsのプロジェクトを触っていると、「このコマンドはnpmだっけnpxだっけ」と手が止まる瞬間がありますよね。
名前が似ているうえに両方コマンドラインから叩くツールなので、慣れないうちは混同しがちです。
npmは「入れる（管理する）」、npxは「動かす（実行する）」ためのツールという役割の違いを軸に、それぞれのよく使うオプションと使い分けの考え方を整理していきます。
それではやっていきましょう！
目次
npmとnpxの基本的な違い
まずは基本的な違いを表で整理します。
| npm | npx | |
|---|---|---|
| 正式名称 | Node Package Manager | Node Package eXecute |
| 役割 | パッケージのインストール・管理 | パッケージの一時実行 |
| インストール | 必要（ローカル/グローバル） | 不要（キャッシュに一時保存して実行） |
| 主な用途 | 依存関係の管理、package.jsonの記録 | CLIツールをその場で試す・実行する |
| 同梱時期 | 昔からある | npm 5.2以降に標準同梱 |
npmは「入れる（管理する）」、npxは「動かす（実行する）」というイメージで覚えておくと、どちらを使うべきか判断しやすくなります。
npmのよく使うオプション
npmは主にパッケージのインストールや依存関係の管理に使うコマンドです。
用途別に整理しました。
インストール系
| コマンド | 説明 |
|---|---|
npm install |
package.jsonの依存関係を全てインストール |
npm install <pkg> |
パッケージをローカルにインストール |
npm install <pkg> --save-dev（-D） |
開発用依存としてインストール |
npm install -g <pkg> |
グローバルにインストール |
npm install <pkg>@<version> |
特定バージョンを指定してインストール |
npm install <pkg> --save-exact |
正確なバージョンを固定して保存 |
--save-devと--save-exactはチームで使うプロジェクトだと特に重要で、開発用依存を本番の依存と分けておく・バージョンを固定して環境差を防ぐ、という2つの意味で役に立ちます。
更新・削除系
| コマンド | 説明 |
|---|---|
npm update |
依存パッケージを更新 |
npm uninstall <pkg> |
パッケージを削除 |
npm outdated |
古くなったパッケージを一覧表示 |
npm outdatedは更新前に一度実行しておくと、どのパッケージがどれくらい古いか一覧で確認できるので、いきなりnpm updateを叩くより事故が少なくなります。
その他
| コマンド | 説明 |
|---|---|
npm init |
package.jsonを新規作成 |
npm run <script> |
package.jsonのscriptsを実行 |
npm list（npm ls） |
インストール済みパッケージ一覧表示 |
npm audit |
脆弱性チェック |
npm cache clean --force |
キャッシュ削除 |
npm ci |
package-lock.jsonに厳密従ってインストール（CI向け） |
npm ciはCI環境向けに用意されたコマンドで、package-lock.jsonの内容通りに厳密インストールしてくれます。
ローカルのnpm installと挙動が違うので、CI設定を書くときはnpm ciを使うのが基本です。
npxのよく使うオプション
npxはパッケージをインストールせずにその場で実行するためのコマンドです。
一度しか使わないCLIツールや、バージョンを固定して単発で試したいときに向いています。
基本的な実行
| コマンド | 説明 |
|---|---|
npx <pkg> |
パッケージを一時的に取得して実行 |
npx <pkg>@<version> |
特定バージョンを指定して実行 |
npx --version（npx -v） |
npxのバージョン確認 |
主なフラグ
| オプション | 説明 |
|---|---|
-y / --yes |
確認プロンプトをスキップして即実行（npx 7以降デフォルト動作に近い） |
-p <pkg> / --package <pkg> |
実行するパッケージを明示指定（コマンド名とパッケージ名が違う時など） |
-c <command> |
実行するコマンドを明示的に指定 |
--no-install |
ローカルに既に無ければインストールせず失敗させる（キャッシュ限定実行） |
--ignore-existing |
ローカルのnode_modulesを無視して強制的に最新を取得実行 |
-pと-cは組み合わせて使う場面が多いオプションです。
コマンド名とパッケージ名が異なるツールを呼ぶときに重宝します。
パッケージ名を打ち間違えると、似た名前の別パッケージ（タイポスクワッティング）を実行してしまう可能性があるので、見慣れないパッケージ名を叩く前は名前を必ず確認してください。
社内やCIで実行が想定外だと困る場面では、`--no-install`でキャッシュ済み・ローカルのものだけに限定するのも手です。
使用例
実際によく使う場面をコマンド例で見ていきます。
create-react-appを一時実行してプロジェクト作成
1 | npx create-react-app my-app |
ローカルインストール済みのeslintを実行
1 | npx eslint . |
特定バージョンのnpmパッケージを一度だけ実行
1 | npx cowsay@1.5.0 "Hello" |
パッケージ名とコマンド名が異なる場合
1 | npx -p typescript tsc --version |
最後の例のように、パッケージ名（typescript）と実行したいコマンド（tsc）が違うケースは意外とよくあるので、-pの使い方は覚えておくと詰まりにくくなります。
npmとnpxをどう使い分けるか
ここまでのオプションを踏まえて、実際の判断フローに整理するとこうなります。
- プロジェクトで継続的に使う
- 依存関係として残したいので
npm install
- 依存関係として残したいので
- 一度だけ試したい・グローバル汚染を避けたい
- インストールせずその場で実行できる
npx
- インストールせずその場で実行できる
- ローカルのnode_modules/.binにあるツールを楽に呼びたい
- パス指定なしで呼べる
npx
- パス指定なしで呼べる
「継続して使うかどうか」が最初の分岐点になっていて、継続利用ならnpm、単発利用ならnpxという整理をしておくと迷いにくくなります。
まとめ
npmとnpxの違い、それぞれのよく使うオプション、使い分けの判断フローについてまとめました。
npmは依存関係を管理して残す道具、npxはその場で動かして終わる道具という役割分担なんですね。。
なんとなくで使ってることも多いので、今回改めて整理できてよかったです（^^
以上となります。
コマンドラインは種類が多すぎて困りますね（^^
それではお疲れさまでした。
