npm install vs npx vs pnpm vs pnpm dlx の使い分け完全ガイド
nextプロジェクトを導入するときなどに使っていたnpxについて調べてみたのでここに残します！
自分はpnpmをよく使うので、npxのpnpm版である、pnpm dlxについても書きます！
TL;DR → "インストールして使う"のが npm/pnpm、"その場だけ借りて実行"するのが npx/pnpm dlx
使い分け早見表
| 目的 | npm | npx | pnpm | pnpm dlx |
|---|---|---|---|---|
| パッケージ管理（入れる/更新/消す） | ◯ | × | ◯ | × |
| プロジェクトに入っている bin を実行 | npm run / npm exec | （基本使わない） | pnpm run / pnpm exec | （基本使わない） |
| 未インストールの CLI を一時的に実行 | × | ◯ | × | ◯ |
| 代表例 | npm i axios |
npx create-next-app |
pnpm add axios |
pnpm dlx create-next-app |
1. npm / npx とは？
npm：パッケージマネージャ（管理役）
プロジェクトにパッケージをインストールして管理する
よく使うコマンド
npm install react
npm run build
npm exec eslint .
npx：パッケージランナー（実行役）
プロジェクトに入ってるツールも実行できるし、無ければその場でダウンロードして実行もできる
代表例（雛形生成など "たまに使う系"）
npx create-next-app@latest my-app
npx @nestjs/cli new backend
補足： npm v7 以降、npx は内部的に npm exec を使います。用途は "未インストール CLI を一時実行" で覚えればOK。
2. pnpm / pnpm dlx とは？
pnpm：代替パッケージマネージャ（高速＆ディスク節約）
ハードリンクとグローバルストアを使って、高速でディスク容量を節約してインストール
よく使うコマンド
pnpm add react
pnpm run dev
pnpm exec eslint .
pnpm dlx：pnpm 版の一時実行（＝ npx 相当）
npx と同じ用途。未インストールの CLI を一時的にダウンロードして実行
グローバルストアを利用するので、2回目以降の実行が速い
pnpm dlx create-next-app@latest my-app
pnpm dlx @nestjs/cli new backend
3. これさえ覚えれば困らない"対応表"
| やりたいこと | npm 系 | pnpm 系 |
|---|---|---|
| ライブラリをプロジェクトに入れて使う | npm install <pkg> |
pnpm add <pkg> |
| package.json の scripts を実行 | npm run dev |
pnpm run dev / pnpm dev
|
| 依存に入ってる bin を直接実行 | npm exec <bin> |
pnpm exec <bin> |
| 未インストールの CLI を一度だけ実行 | npx <cli> [args] |
pnpm dlx <cli> [args] |
4. 具体例（"新規作成"と"既存更新"）
新規プロジェクトを作る（＝雛形作成ツールを「一時実行」）
npm 派
npx create-next-app@latest frontend
pnpm 派（おすすめ）
pnpm dlx create-next-app@latest frontend
既存プロジェクトの依存を上げる（＝管理している依存を更新）
npm 派
npm install next@latest react@latest react-dom@latest
pnpm 派
pnpm up next react react-dom --latest
5. 僕が疑問に思ったこと
Q. npx と npm exec の違いは？
A. 用途が重複する部分がある
- npm exec: プロジェクトに既にインストールされているパッケージのツールを実行する
- npx: プロジェクトに入ってるツールも実行できるし、無ければその場でダウンロードして実行もできる
つまり、npx は npm exec の機能も含んでいて、さらに未インストールのCLIツールも実行できる。
使い分けのポイント：
- npx: 柔軟で便利。新規プロジェクト作成など、たまに使うCLIツールに最適
- npm exec: 常に依存関係を固定して再現性を保ちたい時に使う
create-next-app のような新規プロジェクト作成ツールを使いたい場合は npx を使います。
Q. pnpm dlx と npx は完全に同じ？
A. 目的は同じ。違いは pnpm のグローバルストアを使う点で、2回目以降の実行が速いことが多い。
例：過去にpnpm dlx create-next-app@latestをしていたら、その次に別のプロジェクトでpnpm dlx create-next-app@latestをした時早い
6. まとめ
- 管理＝npm/pnpm、実行＝npx/pnpm dlx と覚える
- 新規作成などのプロジェクト雛形は一時実行（npx / pnpm dlx）
- 既存プロジェクトでは依存をインストールして scripts で実行（npm run / pnpm run）
- pnpm を使っている人は pnpm dlx を使う（高速＆クリーン）
おまけ：おすすめ運用（pnpm を使っている人向け）
# 1) 新規作成（その場だけツールを借りる）
pnpm dlx create-next-app@latest frontend --ts --tailwind
# 2) 依存はプロジェクトに管理
cd frontend
pnpm add recharts react-hook-form zod
# 3) 実行はスクリプト経由（package.json）
pnpm dev
閲覧ありがとうございました！！