npxとは？「npmとの違い」と「使い分け」をわかりやすく解説！

JavaScriptの開発手順を調べていると、npxやnpmで始まるコマンドを見かけます。

名前が似ているため、「何が違うの？」「どちらを使えばよいの？」と迷うこともあるのではないでしょうか。

まずは、npxは「パッケージのコマンドを実行するもの」、npmは主に「パッケージを管理するもの」と考えると、違いをつかみやすくなります。

この記事では、以下の内容を具体例とともに説明します。

• npxとnpmの意味
• npxとnpmの違い・比較
• npxとnpmの使い分け
• Yarnとnpmの関係

npxとは

npxとは、npmパッケージが提供するコマンドを実行するためのツールです。

プロジェクトにインストール済みのパッケージを実行できるほか、必要に応じて未インストールのパッケージを取得して実行することもできます。

基本的な書き方は、次のとおりです。

npx パッケージ名

例えば、牛の絵とメッセージを表示するcowsayというパッケージは、次のコマンドで実行できます。

npx cowsay "Hello!"

# 実行結果
 ________
< Hello! >
 --------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

実行すると、ターミナルに牛の絵と「Hello!」が表示されます。cowsayは実行するパッケージの名前で、"Hello!"は表示するメッセージです。

npxの特徴

npxには以下の特徴があります。

• 未インストールのパッケージも取得して実行できる
• 特定のバージョンを指定する

ここからは、それぞれの特徴について詳しく説明します。

未インストールのパッケージも取得して実行できる

npxの便利な点は、プロジェクトにインストール済みのパッケージを実行できるほか、未インストールのパッケージを取得して実行することもできる点です。

必要なパッケージがない場合には、取得してよいか確認されることがあります。表示されたパッケージ名を確認し、意図したパッケージであれば進めます。

このとき、取得したパッケージはnpmの「キャッシュ」に置かれます（キャッシュは、取得したデータなどを再利用するための保存場所です）。そのため、「npxは一切インストールしない」「実行後に必ずすべて削除される」という意味ではありません。

特定のバージョンを指定する

パッケージ名の後ろに「@バージョン番号」を付けると、使うバージョンを指定できます。 例えば、バージョン1.0.3を指定する書き方は次のとおりです。

npx パッケージ名@1.0.3

これにより、「以前のバージョンで動きを確かめたい」「別のバージョンを試したい」といった使い方ができます。このコマンドで実行するバージョンを指定しても、それだけでプロジェクトのpackage.jsonに記録されたバージョンが書き換わるわけではありません。

ただし、npxはバージョンを指定して実行するために使えるツールであり、プロジェクトで継続して使うパッケージの管理はnpmで行います。

npmとは

npmとは、開発に使うパッケージのインストール・更新・削除などを行う管理ツールです。

例えば、コードの字下げや改行などを整える「Prettier（プリティア）」を、このプロジェクトで使いたいと考えたとき、npmで追加できます。

npmでよく使う操作は、次のとおりです。パッケージ名は、使いたいパッケージの名前に置き換えます。

例えば、「Prettier」を追加する場合は、プロジェクトのフォルダで次のコマンドを実行します。

npm install --save-dev prettier

--save-devは、開発時に使用するパッケージとして記録する指定です。

npmの特徴

npmには以下の特徴があります。

• scriptsに登録した処理を実行できる

ここからは、この特徴について詳しく説明します。

scriptsに登録した処理の実行

npmはパッケージを管理するだけでなく、package.jsonのscriptsに記述されたスクリプトを実行することもできます。

基本的な書き方は、次のとおりです。xxxの部分を、登録した処理の名前に置き換えます。

npm run xxx

例えば、先ほどのPrettierを使ってコードを整える処理を、formatという名前で登録してみましょう。次のコードは、package.jsonのscripts部分を示した抜粋です。

{
  "scripts": {
    "format": "prettier sample.js --write"
  }
}

この設定がある場合、プロジェクトのフォルダで次のコマンドを実行します（以下の例では、Prettierをインストール済みで、プロジェクトのフォルダにsample.jsがあることを前提とします）。

npm run format

すると、formatに対応するprettier sample.js --writeが実行され、sample.jsの字下げや改行などが整えられて保存されます。

このように、よく使う処理を登録しておけば、毎回長いコマンドを入力せず、短い名前で呼び出せます。

npxとnpmの違い・比較

npxとnpmの違いは、主な役割が「実行」なのか「管理」なのかという点です。

例えば、先ほどのコマンドでPrettierをインストールしただけでは、まだコードは整いません。

実際にコードを整えるには、Prettierを動かす必要があります。同じフォルダにsample.jsがある場合、次のコマンドで整えられます。

npx prettier sample.js --write

sample.jsは処理するファイル名、--writeは整えた内容をファイルに書き込む指定です。実行すると、ファイルの字下げや改行などが整えられて保存されます。

つまり、npmでパッケージをインストールし、npxでそのパッケージのコマンドを実行するという関係です。

npxとnpmの使い分け

使い分けに迷ったら、「パッケージのコマンドを実行したいのか」「パッケージをプロジェクトに追加したいのか」で考えましょう。

npxは、次のような用途に向いています。

• パッケージをその場で試したいとき
  • 事前にプロジェクトへ追加する手順を踏まず、必要なパッケージを取得して実行できます。
• 特定のバージョンのパッケージを実行したいとき
  • npx パッケージ名@バージョン番号のように指定して、そのバージョンの動きを確認できます。
• パッケージをグローバルにインストールせずに使いたいとき
  • 複数のパッケージや異なるバージョンを、必要に応じて呼び出せます。共通の保存先に入れたパッケージを、その都度入れ替える手間を減らせます。
• プロジェクトにインストール済みのパッケージを実行したいとき
  • npx prettier sample.js --writeのように、そのプロジェクトにインストールされているパッケージのコマンドを実行できます。

npmは、次のような用途に向いています。

• プロジェクトに必要なパッケージを追加・管理したいとき
  • アプリで使うパッケージや開発用のパッケージを、npm installでプロジェクトに追加します。
• 必要なパッケージやバージョンを管理したいとき
  • あるパッケージを動かすために必要な、別のパッケージとの依存関係も含めて扱います。
• 登録済みの処理を実行したいとき
  • npm run devやnpm run formatのように、package.jsonのscriptsに登録した処理を呼び出します。

補足：Yarnとは

Yarnは、npmと同じく、パッケージのインストールや依存関係の管理を行うツールです。

Yarnはnpmの代わりに使える選択肢の1つで、2016年にFacebook（現Meta）が他社と協力して公開しました。

npmとYarnの基本的な違いは、次のとおりです。

ロックファイルとは、使用するパッケージの具体的なバージョンや依存関係を記録するファイルです。

例えば、同じプロジェクトでも、人によって異なるバージョンが入ると、「自分のパソコンでは動くのに、ほかの人のパソコンでは動かない」といった問題につながります。

ロックファイルは、インストールするパッケージの組み合わせをそろえ、同じ環境を再現しやすくするために使います。

npmではpackage-lock.json、Yarnではyarn.lockが、この役割を担います。

このように、npmとYarnは、使うファイルやコマンドに違いはありますが、どちらもパッケージを管理するためのツールです。npxは、そのパッケージが提供するコマンドを実行するためのツールとして整理できます。

まずは、Yarnはnpmと似た役割を持つ別の選択肢と理解すれば十分です。既存のプロジェクトに参加するときは、そのプロジェクトで採用されている管理ツールに合わせましょう。

本記事のまとめ

この記事では「npxとnpmの違いと使い分け」について、以下の内容を説明しました。

• npxは、npmパッケージが提供するコマンドを実行するためのツールである。
• npmは、パッケージのインストール・更新・削除などを行う管理ツールである。
• npm runは、package.jsonのscriptsに登録した処理を実行する。
• npxは未インストールのパッケージを取得して実行でき、取得したものがキャッシュに残ることがある。
• Yarnは、npmの代わりに利用できるパッケージ管理ツールである。

お読みいただきありがとうございました。