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

IT Study

開発をしていると、

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で使用するパッケージを管理するためのツールです。

主に、

  • パッケージをインストールする
  • パッケージを削除する
  • パッケージを更新する
  • package.jsonに登録されたスクリプトを実行する

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

よく見るnpmコマンド

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：Node Package Manager を呼び出す
  • install：インストールを実行する
  • axios：インストールするパッケージ名

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

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

npm run dev
  • npm：Node Package Manager を呼び出す
  • run：package.json の scripts を実行する
  • dev：実行するスクリプト名

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

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

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

npxとは？

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

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

npx の大きな特徴

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

よく見るnpxコマンド

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：実行したい CLI ツール名（Prisma）
  • migrate dev：Prisma CLI に渡すサブコマンド（開発用マイグレーション実行）

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

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

npx create-next-app my-app

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

  • npx：一時的にパッケージをダウンロードして実行する
  • create-next-app：Next.js のプロジェクト作成ツール
  • my-app：作成するプロジェクト名

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

npmとnpxの違い

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

項目npmnpx
主な役割パッケージを管理するパッケージのコマンドを実行する
よく使う場面インストール・削除・更新CLIツールの実行
代表例npm install axiosnpx prisma migrate dev
イメージ「道具を準備する」「道具を使う」

例えばPrismaなら、

npm install prisma

Prismaをインストールするためのコマンドです。

一方、

npx prisma migrate dev

インストールされたPrismaを使ってマイグレーションを実行するためのコマンドです。

このように、

  • npm = パッケージを管理する
  • npx = パッケージのコマンドを実行する

と覚えておくと、今まで何となく使っていたコマンドの意味が理解しやすくなると思います。

終わりに

今回は、普段何気なく使っていたnpmとnpxについて整理してみました。

コマンドを意味ごとに分解して考えてみると、「何を実行しているのか」が分かり、理解がぐっと深まったように感じます。

これまでは「どっちを使えばいいんだっけ？」と迷うこともありましたが、意味を理解したことで、今後は自信を持って使えそうです。

私と同じように、なんとなくnpmやnpxを使っていた方の参考になれば嬉しいです。

タイトルとURLをコピーしました