PR

今更聞けない、 npm と npx の違い

Node.js
この記事は約6分で読めます。
記事内に広告が含まれています。

この記事では、Node.js を使った開発で頻繁に目にする npm と npx の違いについて解説します。

どちらも Node.js のパッケージ管理に関連するコマンドですが、用途や動作が異なります。正しく使い分けることで、より効率的な開発が可能になります。

目次

  • npm とは
  • npx とは
  • npm と npx の主な違い
  • 実践的な使い分け例
  • まとめ

npm とは

npm（Node Package Manager）は、Node.js のパッケージ管理ツールです。Node.js をインストールすると自動的に付属してきます。

npm の主な役割

  • パッケージのインストール
  • パッケージのアンインストール
  • プロジェクトの依存関係の管理
  • スクリプトの実行

npm でできること

# パッケージをプロジェクトにインストール
npm install express

# パッケージをグローバルにインストール
npm install -g typescript

# package.json のスクリプトを実行
npm run build

# パッケージの情報を表示
npm info lodash

npm でインストールしたパッケージは、プロジェクトの node_modules フォルダ（ローカルインストール）、またはシステム全体で使える場所（グローバルインストール）に保存されます。

npx とは

npx は npm 5.2.0 から導入されたパッケージ実行ツールです。npm と一緒にインストールされます。

なお、npm v7 以降では npx は内部的に npm exec を使用するように変更されており、現在の npm では両方のコマンドが利用可能です。

npx の主な役割

  • パッケージをインストールせずに実行
  • ローカルインストールされたパッケージの実行
  • 特定バージョンのパッケージを一時的に実行

npx の動作

npx は以下の順序でパッケージを探して実行します。

  1. プロジェクトの node_modules/.bin を確認
  2. ローカルに存在しない場合、一時的にダウンロードして実行
  3. 実行後、パッケージは npm のキャッシュに保存される（完全には削除されない）

--yes オプションを使用すると、インストール確認のプロンプトをスキップできます。

npx でできること

# パッケージをインストールせずに実行
npx create-react-app my-app

# ローカルインストールされたパッケージを実行
npx eslint src/

# 特定バージョンを指定して実行
npx typescript@4.5.0 --version

# URL から直接スクリプトを実行
npx github:user/repo

npm と npx の主な違い

項目 npm npx
主な用途 パッケージの管理（インストール・アンインストール） パッケージの実行
インストール パッケージをローカルまたはグローバルにインストール 必要に応じて一時的にダウンロード
ディスク容量 インストールしたパッケージが残る 一時ダウンロードは npm キャッシュに保存される
バージョン管理 package.json で管理 実行時に指定可能

実践的な使い分け例

npm を使うべきケース

プロジェクトで継続的に使用するパッケージ

# フレームワークやライブラリ
npm install react react-dom

# 開発ツール
npm install --save-dev eslint prettier

これらは package.json に記録され、npm install で再現可能な環境を作れます。

npx を使うべきケース

1. プロジェクトの初期化ツール

# Vite プロジェクトの作成（npm create の使用が推奨）
npm create vite@latest my-app

# Next.js アプリの作成
npx create-next-app@latest my-next-app

これらのツールは一度しか使わないため、グローバルインストールする必要がありません。

注意: Create React App は 2025年2月14日に公式で非推奨（deprecated）となりました。新規プロジェクトには Vite や Next.js などの利用が推奨されています。

2. ローカルにインストールした開発ツールの実行

# グローバルインストール不要で ESLint を実行
npx eslint .

# TypeScript コンパイラを実行
npx tsc

# Jest でテストを実行
npx jest

以前は ./node_modules/.bin/eslint のように長いパスを指定するか、npm scripts に登録する必要がありましたが、npx を使えば簡潔に実行できます。

3. 異なるバージョンの試用

# 最新版を試す
npx typescript@latest --version

# 特定バージョンを試す
npx typescript@4.9.0 --version

# ベータ版を試す
npx create-react-app@next my-app

グローバルインストールせずに、異なるバージョンを試すことができます。

4. 一時的なユーティリティツール

# QR コードを生成
npx qrcode "https://lazy-developer.jp"

# サーバーを即座に起動
npx http-server

# package.json の依存関係をチェック
npx npm-check-updates

よくある疑問

npm install -g と npx、どちらを使うべき?

以前の方法（グローバルインストール）

npm install -g create-react-app
create-react-app my-app

現在推奨される方法

# npx を使用
npx create-next-app my-app

# または npm create を使用（Vite など一部のツールで推奨）
npm create vite@latest my-app

npx を使う利点は以下の通りです。

  • 常に最新版を使用できる
  • グローバル環境を汚染しない
  • 異なるプロジェクトで異なるバージョンを使用できる

npm scripts の中で npx は必要?

package.json の scripts 内では、npx は不要です。npm が自動的に node_modules/.bin を参照するためです。

{
  "scripts": {
    "lint": "eslint .",
    "test": "jest"
  }
}

これらは npm run lint や npm run test で実行できます。

コマンドラインから直接実行する場合のみ npx が必要です。

# コマンドラインから直接実行
npx eslint .

まとめ

  • npm はパッケージの管理（インストール・アンインストール）に使用
  • npx はパッケージの実行に使用（npm v7 以降は内部的に npm exec を使用）
  • 継続的に使うパッケージは npm でインストール
  • 一度だけ使うツールや、ローカルにインストールしたツールの実行には npx を使用
  • npx で実行したパッケージは npm キャッシュに保存される（完全削除されるわけではない）
  • npx を使うことで、グローバルインストールを減らし、クリーンな開発環境を維持できる

npm と npx を適切に使い分けることで、より効率的で保守しやすい開発環境を構築できます。

コメント

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