npmとnpxの違いとは？よく使うコマンドの意味から理解してみる

開発をしていると、

npm install
npm run dev
npx create-next-app
npx prisma migrate dev

npm install
npm run dev
npx create-next-app
npx prisma migrate dev

など、npmやnpxから始まるコマンドをよく目にします。

私もこれまでは、「パッケージをインストールするときはnpm」「何か実行するときはnpx」という程度の認識で、言われた通りに入力しているだけでした。

しかし、ある日ふと

「そもそもnpmとnpxって何なんだろう？」

と思うようになりました。

意味が分かるようになると、ただコマンドをコピーして使うだけではなく、「今何をしているのか」を理解しながら使えるようになります。

今回は、初心者向けにnpmとnpxの意味や違いについて整理してみます。

npmとは？

npm（Node Package Manager）は、Node.jsで使用するパッケージを管理するためのツールです。

主に、

といった役割があります。

npm install
npm install axios
npm install -D typescript
npm uninstall axios
npm run dev
npm run build
npm run lint
npm update

npm install
npm install axios
npm install -D typescript
npm uninstall axios
npm run dev
npm run build
npm run lint
npm update

これらはすべてnpmのコマンドです。

例えば、以下のコマンドを分解します。

npm install axios

npm install axios

つまり、「npmを使ってaxiosというパッケージをインストールする」という意味になります。

もう一つ例を見てみます。

npm run dev

npm run dev

package.json の中に以下のような記述があれば、

"scripts": {
  "dev": "next dev"
}

"scripts": {
  "dev": "next dev"
}

npm run dev を実行することで、内部的に next dev が呼び出されます。

npx（Node Package Execute）は、パッケージに含まれているコマンド（CLIツール）を実行するためのツールです。

インストール済みのパッケージだけでなく、一時的にパッケージをダウンロードして実行することもできます。

ローカルの node_modules にあるコマンドを直接実行できる 通常、ローカルにインストールしたツールのコマンドはパスが通っていませんが、npx を使うと簡単に実行できます。
PCにグローバルインストール（-g）せずに、一時的にダウンロードして実行できる プロジェクト作成ツールなど、1回しか使わないツールをPCを汚さずに最新版で実行できます。

npx create-next-app
npx prisma migrate dev
npx prisma generate
npx eslint .
npx tailwindcss init
npx shadcn@latest add button

npx create-next-app
npx prisma migrate dev
npx prisma generate
npx eslint .
npx tailwindcss init
npx shadcn@latest add button

開発をしていると、このようなコマンドをよく見かけます。

例えば、以下のコマンドを分解します。

npx prisma migrate dev

npx prisma migrate dev

つまり、「プロジェクト内にある Prisma のコマンドを呼び出してマイグレーションを実行する」という意味になります。

もう一つ見てみましょう。

npx create-next-app my-app

npx create-next-app my-app

また、npx create-next-app my-app の場合は、

つまり、「PCに常駐させず、最新の create-next-app を一時的に取得して my-app というプロジェクトを作成する」という意味になります。

ここまで見てきた内容をまとめると、違いは次のようになります。