npm と npx って何が違うの？新人エンジニアが最初につまずくポイントを3分で解決

May 9, 2026

「npm install って書いてあるけど、なんで npx なの？」問題

プログラミングを始めたばかりの頃、READMEやチュートリアルを見ながら手を動かしていて、こんな疑問を持ったことはありませんか？

「さっきまで npm install って打ってたのに、急に npx create-react-app って書いてある…npm と npx って何が違うの？」

多くの新人エンジニアが最初につまずくポイントです。なんとなく動くから放置している人も多いのではないでしょうか。でも、この違いをちゃんと理解しておかないと、いざという時に「あれ、どっちで実行するんだっけ？」と毎回検索するハメになります。

結論から先に言うと、こういうことです。

npm＝パッケージをインストールするためのツール
npx＝パッケージを実行するためのツール

たったこれだけ。でも、これを本当の意味で「使い分けられる」ようになるには、もう少し背景を知る必要があります。この記事では、新人エンジニアが3分で迷わなくなるレベルまで、実例ベースで解説していきます。

そもそも npm って何をするツール？

まずは npm（Node Package Manager） から整理しましょう。npm は名前の通り、Node.js のエコシステムにおけるパッケージマネージャーです。世界中の開発者が公開している便利なライブラリ（パッケージ）を、コマンド一発で自分のプロジェクトに取り込めるようにしてくれます。

npm install で起こっていること

たとえば、プロジェクトで lodash というユーティリティライブラリを使いたいとき、こう打ちます。

# プロジェクトの依存関係としてlodashをインストール
npm install lodash

このコマンドを実行すると、裏で次のことが起こっています。

npmレジストリ（公式パッケージ倉庫）から lodash をダウンロード
プロジェクト直下の node_modules フォルダに保存
package.json の dependencies に記録
package-lock.json にバージョン情報を固定

つまり npm の本質は、「必要なパッケージを、自分のプロジェクトに取り込んで管理する」ことなんです。

ローカルインストール vs グローバルインストール

npm のインストールには2種類あります。これが後々の npx の理解にもつながるので、押さえておきましょう。

種類	コマンド	インストール先	用途
ローカル	`npm install パッケージ名`	プロジェクト直下の `node_modules`	そのプロジェクト専用
グローバル	`npm install -g パッケージ名`	システム全体の共通フォルダ	どのプロジェクトでも使えるCLIツール

昔は create-react-app のような「プロジェクト作成ツール」も -g でグローバルインストールするのが定番でした。でも、これには大きな問題がありました。

使うのは初回だけなのに、ずっとPCに残り続ける
バージョンが古いまま気づかず、最新機能が使えない
複数のプロジェクトで違うバージョンを使いたいとき競合する

この「グローバルインストール問題」を解決するために生まれたのが、npx なんです。

じゃあ npx は何者？npm との決定的な違い

npx は「パッケージ実行ツール（Node Package eXecute）」です。npm 5.2.0（2017年リリース）から標準で同梱されるようになりました。

npx の本質をひと言でいうと、こうなります。

👉 「インストールせずに、一回だけパッケージを実行できる」

たとえば、Reactのプロジェクトを作るとき、現代では普通こう書きます。

# Reactプロジェクトを作成（インストール不要で実行）
npx create-react-app my-app

このとき npx は裏で何をやっているかというと、

create-react-app がローカルやグローバルにあるかチェック
なければ、npmレジストリから一時的にダウンロード
キャッシュフォルダに保存して即座に実行
実行が終わったら、プロジェクトには何も残さない

つまり、「使い捨てで実行できるから、グローバルインストールしなくていい」のが最大のメリット。常に最新版を使えるし、PCがゴミ屋敷にならずに済みます。

図解：npm install と npx の動きの違い

言葉だけだと混乱するので、それぞれの動きを図にしてみましょう。

npm install の流れ

[あなた] npm install lodash
   ↓
[npm] レジストリからlodashをダウンロード
   ↓
[node_modules/] lodashが永続的に保存される
   ↓
[package.json] dependenciesに記録
   ↓
プロジェクト内のJSコードからimportして使える

npx の流れ

[あなた] npx create-react-app my-app
   ↓
[npx] ローカル/グローバルに既に存在する？
   ↓ (なければ)
[npx] 一時的にレジストリからダウンロード（キャッシュ）
   ↓
[npx] その場で1回だけ実行
   ↓
実行終了後、プロジェクト本体には何も残らない

大事なのは「npm はインストールがゴール、npx は実行がゴール」という点。役割が完全に違うんです。

実例で理解する使い分け

ここからは、具体的なケースで「どっちを使うべきか」を見ていきましょう。3つのパターンを押さえれば、現場で迷うことはほぼなくなります。

ケース1：プロジェクト作成系コマンド → npx が正解

create-react-app、create-next-app、create-vite などの「プロジェクトの雛形を作るツール」は、初回1回しか使わないのが特徴です。これらは npx で実行するのが鉄則。

# Next.jsの新規プロジェクト作成
npx create-next-app@latest my-next-app

# Viteで新規プロジェクト作成
npx create-vite@latest my-vite-app

# Astroで新規プロジェクト作成
npx create-astro@latest my-astro-site

@latest を付けるのもポイント。npxはキャッシュを再利用することがあるので、明示的に最新版を指定すると安全です。

ケース2：プロジェクトで使うライブラリ → npm install が正解

アプリケーションのコードから import して使うライブラリは、npm install でローカルインストールします。これは node_modules に永続的に置いておかないと、コードが動かないからです。

# 本番依存（アプリで使うライブラリ）
npm install axios
npm install react-router-dom
npm install zod

# 開発依存（ビルド・テストでだけ使うもの）
npm install -D typescript
npm install -D @types/node
npm install -D vitest

そしてコード側では、こう使います。

// src/api/client.js
import axios from 'axios'

// node_modulesにインストールされているのでimportできる
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
})

export default apiClient

ケース3：CLIツール（ESLint/Prettier等）→ ローカルインストール＋npx で実行

ここが新人さんが一番混乱するパターン。ESLint、Prettier、TypeScript、Jest など、コマンドラインから叩く系のツールはどっちを使えばいいのか？

答えは、「プロジェクトに npm install -D でローカルインストールしたうえで、npxで実行する」です。

# 1. プロジェクトにローカルインストール
npm install -D eslint prettier typescript

# 2. npxで実行（プロジェクトのバージョンを使ってくれる）
npx eslint src/
npx prettier --write src/
npx tsc --noEmit

なぜグローバルじゃダメなのか？理由は明確で、プロジェクトごとに使うバージョンが違うからです。AプロジェクトはESLint v8、BプロジェクトはESLint v9、なんてことは普通にあります。ローカルインストール＋npxなら、自動的にプロジェクトのバージョンを使ってくれます。

ちなみに package.json の scripts に書く場合は、npx を付けなくてもOKです。npmが自動的に node_modules/.bin/ を見に行ってくれるためです。

{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write src/",
    "typecheck": "tsc --noEmit"
  }
}

npx でよく使うコマンド集

実際の現場で頻出する npx コマンドをまとめました。コピペで使えるので、ブックマーク推奨です。

プロジェクト作成系

# Next.js（Reactベースのフルスタックフレームワーク）
npx create-next-app@latest

# Vite（爆速ビルドツール）
npx create-vite@latest

# Remix（フルスタックWebフレームワーク）
npx create-remix@latest

# Expo（React Nativeアプリ）
npx create-expo-app@latest

# NestJS（Node.jsバックエンドフレームワーク）
npx @nestjs/cli new project-name

開発で使うツール系

# TypeScriptで型チェックだけ実行
npx tsc --noEmit

# Prettierでコード整形
npx prettier --write .

# ESLintで静的解析
npx eslint . --fix

# Jest/Vitestでテスト実行
npx vitest run

# Prismaでデータベースマイグレーション
npx prisma migrate dev

バージョン指定もできる

「最新版じゃなくて、特定のバージョンで実行したい」という時も npx は対応できます。@ でバージョンを指定するだけ。

# Next.js 14系で作成（15系を避けたいとき）
npx create-next-app@14 my-app

# 特定バージョンのTypeScriptで型チェック
npx -p typescript@5.0.4 tsc --noEmit

よくあるエラーと対処法

npm/npx を使っていると、新人さんが必ずぶつかるエラーがいくつかあります。代表的なものとその解決策を押さえておきましょう。

エラー1：command not found: npx

$ npx create-react-app my-app
zsh: command not found: npx

原因：Node.js のバージョンが古すぎて、npx が同梱されていない（npm 5.2.0 未満）。

対処法：Node.js を新しいバージョンに更新しましょう。現代の現場では LTS（長期サポート版）の最新を使うのが基本です。

# バージョン確認
node -v
npm -v
npx -v

# npmだけ更新する場合
npm install -g npm@latest

エラー2：npx が古いキャッシュを使ってしまう

npx create-react-app を実行したのに、なんだか古いバージョンが起動する…という現象。これはnpxがキャッシュを優先して使うためです。

対処法：明示的に @latest を付けるか、キャッシュをクリアします。

# 最新版を強制指定
npx create-react-app@latest my-app

# キャッシュクリア（npm 7以降）
npm cache clean --force

エラー3：パッケージのバージョン違いで動かない

「グローバルでESLintを入れたのに、プロジェクト内で実行するとエラーが出る」というやつ。これはグローバルとローカルのバージョン違いで起きます。

対処法：基本的にCLIツールはプロジェクトにローカルインストール＋npxで実行に統一しましょう。グローバルインストールは可能な限り避けるのがモダンな運用です。

まとめ：迷ったときの判断フロー

最後に、「このコマンド、npmとnpxどっちで実行すればいいの？」と迷ったときの判断フローを置いておきます。

Q1. このパッケージは、コードからimportして使う？
   YES → npm install （または npm install -D）で永続インストール
   NO  → Q2へ

Q2. このパッケージは、1回だけ実行できれば十分？
   YES（プロジェクト作成ツールなど） → npx で実行
   NO（毎回プロジェクトで使うCLI） → npm install -D してから npx で実行

ポイントを3行でまとめると、こうなります。

npm＝パッケージを取り込む（永続的に保存）
npx＝パッケージを実行する（使い捨てもOK）
迷ったら「コードからimportするか？」で判断する

npmとnpxの違いは、Node.js開発の基礎の基礎。ここがクリアになると、READMEを読むスピードが格段に上がりますし、新しいフレームワークの導入もスムーズになります。「とりあえずコピペで動いた」から「なぜそう書くのか分かる」に進化する第一歩として、ぜひ今日のうちに腹落ちさせてしまいましょう。

公式ドキュメントでさらに深掘りしたい方は、npm公式：npxドキュメントも合わせて読んでおくと完璧です。

npm/npxをマスターしたら読みたい関連記事

npm/npxの基本を押さえたら、次は周辺ツールや開発環境構築のスキルも強化していきましょう。新人エンジニアの「次の一歩」におすすめの記事を厳選しました。

開発環境・バージョン管理を強化する

miseとは？package.jsonとの違いを初心者向けに徹底解説 – npmと密接に関わるNode.jsのバージョン管理ツール「mise」を解説。プロジェクトごとにNode.jsのバージョンを切り替える方法が分かります
Mac標準Rubyが古い問題を解決！rbenvでRubyバージョン管理を始める完全ガイド – 言語のバージョン管理という考え方をRuby/rbenvの例で深掘り。npmと共通する「ローカル vs グローバル」の概念理解にも役立ちます
IaC（Infrastructure as Code）とは？インフラをコードで管理する3つのメリット – パッケージ管理の発想を、インフラ全体に広げた概念。「コードで環境を再現する」という考え方が学べます

ターミナル・コマンドラインを使いこなす

コマンドラインの基本と活用方法【初心者エンジニア向け】 – npm/npxを叩く土台となるコマンドラインの基礎。新人エンジニアが最初に押さえるべき必須スキルです
AI 搭載のRust製ターミナル「Warp」とは？ – 標準ターミナルから卒業したい人向け。AIによるコマンド補完で、npxコマンドのうろ覚えも安心になります
【初見殺し】エンジニアが読めないIT用語25選｜nginx→ンギンクス？の悲劇を防ぐ – npm（エヌピーエム）の正しい読み方は？意外と読めないIT用語を一気に学べます

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！