目次
このページでわかること
- npm installとnpxの違いがサクッと理解できる
- それぞれの使いどころがパッとわかる
- 初心者がやりがちなミスもあわせて回避できる
はじめに：似てるけど、実は全然違う2つ
「npm installとnpxって何が違うの？ どっち使えばいいの？」
Node.js初心者にとって、まずここでつまずく人は多いです。 見た目は似てますが、用途も動作も全然違うんですよ。
この記事では、npm installとnpxの役割の違いから、実際の使いどころまでまとめて解説します。
npm installってなに？
npm installは、パッケージ（ライブラリ）をプロジェクトに追加するためのコマンドです。
たとえば：
npm install axios→ axiosというライブラリがnode_modulesに保存され、package.jsonにも記録されます。
よく使うパターン
npm install ライブラリ名：本番で使うパッケージを追加npm install --save-dev ライブラリ名：開発用パッケージ（例：eslint）を追加
特徴まとめ
- パッケージがローカルに保存される（node_modulesに）
- 繰り返し使える
package.jsonに依存関係が追加される
npxってなに？
一方のnpxは、パッケージをインストールせずに一時的に実行するためのコマンドです。
たとえば：
npx create-react-app my-app→ create-react-appをインストールせずに、プロジェクト作成用スクリプトだけを一時的に実行します。
よく使うパターン
- create-react-app や vite の初期プロジェクト作成
- ESLintやPrettierなどのチェックだけ一度きり使いたいとき
特徴まとめ
- 一時的にパッケージを実行（基本キャッシュに保存）
- グローバルインストール不要
- プロジェクトに依存関係が残らない
比較してみよう
| 項目 | npm install | npx |
|---|---|---|
| 用途 | パッケージの追加・保存 | 一時的な実行 |
| 保存先 | node_modules | キャッシュ or なし |
| package.jsonへの記録 | される | されない |
| 再利用性 | 高い | 基本1回きり |
よくある間違いと注意点
✅ create-react-appをnpm installしちゃう
npm install create-react-app→ これでは使えません。正しくは：
npx create-react-app my-app✅ グローバルに入れたのに使えない
古いnpmだと、npxが入っていない場合があります。最新版のNode.jsを使いましょう。
まとめ
- npm install：パッケージをプロジェクトに追加。繰り返し使うものに。
- npx：一時的にパッケージを使いたいときに便利。特にCLI系に最適。
「これって一度きり？」と思ったらnpx。「今後も使うなら？」と思ったらnpm install。
これが基本の考え方です！
よくある質問（FAQ）
Q. npxって毎回ダウンロードしてるの？
A. 一度使ったパッケージはキャッシュされるので、次回以降は早くなります。
Q. package.jsonにはnpxの記録は残る？
A. 残りません。使い切りのため、依存関係には影響しません。
Q. npxが使えないって言われたんだけど？
A. Node.jsのバージョンが古い可能性があります。v8.2.0以降なら標準搭載です。
コメント