6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

npm と npx の違い【Node.js】

Last updated at Posted at 2023-10-27

はじめに

今回の記事は、JavaScript および Node.js の初学者向けの内容になります。

JavaScript(Node.js)で開発している時に目にする「npm」と、似たような言葉に「npx」というものが存在しますが、それぞれどういった機能があるのでしょうか。

概要

  • 結論
  • npm
  • npx
  • 違いは?

結論

名前 説明
npm JavaScript用の パッケージマネージャー のことで、またその機能を使用するためのコマンド。npm i ~ とすることで必要な機能をインストールできる
npx ローカルにインストール(npm i ~)されていない機能を一時的にインストールして実行する ためのコマンド

一時的に実行したいだけの機能であれば、npx を使用することでローカル環境を汚さずに実行することが可能。
そうでない場合(開発中のソースコードでライブラリを使用する、等)は、常に使用できるように npm でインストールする。

npm

npm は、「Node Package Manager」の略で、Node.jsをインストールすると利用することができるパッケージマネージャーです。

インストールすると、npm というコマンドが使用できるようになります。

※パッケージマネージャーとはその名の通りパッケージを管理するツールで、公開されているモジュールなどを利用するためにあります。

例えば npm install モジュール名 を使用することで必要なモジュールをインストールすることが可能です。

npm は、それ自体ではコマンドや機能の実行は行わず、あくまでもインストール/アンインストールというようにローカルの機能を管理することが目的になります。

npx

npx は ローカルにインストール(npm i ~)されていない機能を一時的にインストールして実行する ためのコマンドになります。(一時的にインストールするため、実行後は削除されます)

npx は、「Node Package Executer」の略で、パッケージの実行ツールになります。
こちらも npm と同様にNode.jsをインストールすることで使用可能なコマンドです。

例えば、npx create-react-app を実行すると、

  1. create-react-app がインストールされる(npm install create-react-app)
  2. create-react-app が実行される
  3. create-react-app がアンインストールされる(npm uninstall create-react-app)

といったようになり、ローカル環境を汚すことなく一時的に任意の機能を実行することができます。

npm でインストールしたパッケージは ローカルの node_modules ディレクトリに格納されますが、実行するときは package.json の script に コマンドを紐づけた上で、 npm run package.jsonのscriptに定義したコマンド名 で実行することが一般的です。(npm install でインストールしただけではパスが通っていないため)

違いは?

npm はパッケージを管理するためのツールであり(package.jsonのscriptで定義すれば実行も可能ですが)、npx は npm によってローカルにインストールされていない機能を一時的に使用するもの、と考えてよさそうです。

名前 説明
npm JavaScript用の パッケージマネージャー のことで、またその機能を使用するためのコマンド。npm i ~ とすることで必要な機能をインストールできる。(基本的にはインストール/アンインストールといった管理がメイン、package.jsonのscriptに定義することで npm から実行することも可能)
npx ローカルにインストール(npm i ~)されていない機能を一時的にインストールして実行する ためのコマンド

個人的な使い分けとしては、

  • npm:テストやコードの解析ツール(Lint)など、開発における決まった操作や機能に再現性を持たせたい場合。またアプリケーションで使用する機能のインストール
  • npx:一時的に機能を使用する場合

のような感じです。

最後に

npm に関連して、package.json や package-lock.json についても今後別の記事でまとめる予定です。

最後まで読んでいただきありがとうございました。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?