npm listの使い方｜パッケージ一覧・依存関係・グローバルを確認

「今このプロジェクトに、どのnpmパッケージが入っているのだろう」「package.jsonを見ても、実際にインストールされているバージョンがわからない」。ReactやVue、Astro、Viteなどのプロジェクトを触っていると、こんな場面がよくあります。こうしたときに使うのが、npm listです。

npm listとは、現在のプロジェクトにインストールされているnpmパッケージと依存関係を、ツリー形式で確認するためのコマンドです。プロジェクトのルートディレクトリでnpm listを実行するだけで、パッケージの一覧を確認できます。--depth=0や--allなどのオプションを付ければ、直接インストールしたパッケージだけを表示したり、依存パッケージまで含めて表示したりと、目的に合わせて表示範囲を変えられます。

コマンドを暗記する必要はありません。「何を確認したいのか」から逆引きできるように、目的とコマンドを対応させて紹介していきます。

npm listとは？インストール済みパッケージ一覧を確認できる

npm listとは、現在のプロジェクトにインストールされているnpmパッケージと、その依存関係を確認するためのコマンドです。ターミナルで実行すると、パッケージ名とバージョンがツリー状に表示されます。「今このプロジェクトに何が入っているのか」を、ファイルを開かずに確認できます。

ここでは、基本の実行方法、npm lsとの関係、表示結果の読み方を順に説明します。オプションを使った絞り込みは、次の「npm listの使い方」で扱います。

npm listでプロジェクトのパッケージ一覧を表示する

プロジェクトにインストールされているnpmパッケージを確認するなら、プロジェクトのルートディレクトリ（package.jsonがあるフォルダ）でnpm listを実行します。

npm list

オプションを付けずに実行すると、現在のnpmでは、プロジェクトが直接依存しているパッケージだけが表示されます。直接依存とは、自分でnpm installして追加した、package.jsonのdependenciesやdevDependenciesに書かれているパッケージのことです。

実行結果は、たとえば次のようになります。

my-project@1.0.0 /Users/you/my-project
├── react@x.x.x
├── react-dom@x.x.x
└── vite@x.x.x

※パッケージ名やバージョンはプロジェクトによって異なります。x.x.xは実際のバージョン番号に置き換えて読んでください。

結果は次のように読みます。

実行するときは、次の3点に注意してください。

• 実行する場所：package.jsonのないフォルダで実行すると、目的のプロジェクトの内容は表示されません。cdでプロジェクトのルートへ移動してから実行します。
• インストール前の状態：npm installをしていない状態では、package.jsonに書かれたパッケージがmissing（見つからない）として表示されることがあります。先にnpm installを実行してください。
• グローバルパッケージは対象外：npm listが表示するのは、そのプロジェクトにインストールされたパッケージです。PC全体にインストールしたパッケージは、gオプションを付けて別に確認します。

なお、古い解説記事には「npm listで依存パッケージまで全部表示される」と書かれているものがあります。現在のnpm公式ドキュメントでは、--depthを指定しない場合の既定値は0（直接依存のみ）で、--allを付けたときに全階層が表示されると説明されています。依存関係を含めて確認したい場合は、後述のnpm list --allを使います。

npm Docs

Documentation for the npm registry, website, and command-line interface

docs.npmjs.com

npm listとnpm lsの違い

npm listとnpm lsに違いはありません。npm lsはnpm listの短縮形（別名）で、どちらを実行しても同じ結果が表示されます。

npm list
npm ls

npm公式ドキュメントでは、コマンド名としてはnpm lsが見出しになっており、listは別名（alias）として記載されています。このほかにllとlaという別名もあり、これらは既定で拡張情報つきの表示になります。

npm-ls | npm Docs

List installed packages

docs.npmjs.com

拡張情報は、--longオプションを付けても表示できます。

npm ls --long

この記事では、意味が読み取りやすいnpm listで統一して説明します。以降のコマンドは、すべてnpm lsに置き換えても同じように動作します。

初心者の方が間違えやすい点として、macOSやLinuxのターミナルにあるlsコマンドとは別物であることが挙げられます。lsはフォルダ内のファイルを一覧表示するコマンドで、npm lsはnpmパッケージを一覧表示するコマンドです。

npm listで表示されるパッケージと依存関係

npm listで表示されるのは、パッケージ名とバージョン、そしてパッケージ同士の依存関係です。依存関係とは、あるパッケージが動作するために、ほかのパッケージを必要としている関係のことです。

依存関係は、次の2種類に分けて考えると整理しやすくなります。

たとえば、Viteを入れるとViteが使う別のパッケージも一緒にインストールされます。この「自分では選んでいないが、結果的に入っているパッケージ」が間接依存です。--allを付けると、次のように依存関係が階層で表示されます。

npm list --all

my-project@1.0.0 /Users/you/my-project
├─┬ vite@x.x.x
│ ├── esbuild@x.x.x
│ ├── rollup@x.x.x
│ └── ...
└── react@x.x.x

※依存パッケージの内容はバージョンによって変わるため、上記は構造を示す例です。

読み方のポイントは次のとおりです。

• ├─┬：その下に、さらに依存パッケージがあることを示します（上の例ではViteの下にesbuildなどが並んでいます）。
• ├── / └──：その下に依存パッケージがないパッケージです。
• インデントの深さ：階層が深いほど、間接的に必要とされているパッケージです。

表示されるバージョンは、実際にインストールされている具体的なバージョンです。package.jsonに"react": "^19.0.0"のような範囲指定があっても、npm listにはその範囲を満たす、実際のバージョンが表示されます。

また、公式ドキュメントによると、npm listはextraneous、missing、invalidのパッケージも表示します。

これらが表示された場合は、npm installを実行して状態が解消されるかを確認してください。

最後に、表示されるツリーは論理的な依存関係の図であり、node_modulesフォルダの実際の配置そのものではありません。フォルダの中身と見た目が一致しないことがありますが、これは異常ではありません。

npm listの使い方｜目的別にパッケージ一覧を確認する

npm listは、確認したい内容に合わせてオプションやパッケージ名を付け足して使い分けます。迷ったときは、まずnpm listだけを実行し、足りない情報があればオプションを追加する、という順番で進めると分かりやすいです。

目的とコマンドの対応は、次のとおりです。

この章の出力例は、実際にサンプルプロジェクトでnpm 10.9を使って確認した結果をもとにしています。パッケージのバージョンはx.x.xと表記しているので、ご自身の環境の表示に置き換えて読んでください。

npm listでインストール済みパッケージを一覧表示する

プロジェクトのルートディレクトリでnpm listを実行すると、インストール済みのパッケージ一覧を表示できます。

npm list

my-project@1.0.0 /Users/you/my-project
├── eslint@x.x.x
├── react-dom@x.x.x
├── react@x.x.x
└── vite@x.x.x

この例のESLintは開発用のパッケージ（devDependencies）ですが、npm listはdependenciesとdevDependenciesを区別せず、同じ一覧に表示します。どちらに書かれているパッケージなのかは、npm listの出力だけでは分かりません。区別したいときはpackage.jsonを確認します（詳しくは次の章で説明します）。

開発用パッケージを除いて表示したい場合は、--omit=devを付けます。

npm list --omit=dev

-omit=devは、開発用の依存関係（devDependencies）を表示対象から外すオプションです。上の例であれば、eslintが一覧から消えます。なお、環境変数NODE_ENVがproductionに設定されている場合は、指定しなくても開発用パッケージは除外されます。

npm list –depth=0で直接インストールしたパッケージだけ表示する

直接インストールしたパッケージだけを確認したいときは、npm list --depth=0を実行します。

npm list --depth=0

-depthは、依存関係を何階層目まで表示するかを指定するオプションです。0を指定すると、プロジェクトが直接依存しているパッケージ（自分でnpm installしたもの）だけが表示されます。

ただし、現在のnpmでは、--depthを指定しない場合の既定値も0です。そのため、npm listとnpm list --depth=0の実行結果は同じになります。それでも--depth=0を付けるのは、次の理由からです。

• 「直接依存だけを見たい」という意図がコマンドに残る
• 古いnpmでは全階層が表示されていたため、古い記事やチームの手順書のコマンドをそのまま使っても、同じ結果になる
• -depthに1以上の数字を指定すると、その階層まで表示できます。たとえば-depth=1なら、直接依存とその1つ下の依存パッケージまでを表示します。

npm list --depth=1

my-project@1.0.0 /Users/you/my-project
├─┬ react-dom@x.x.x
│ ├── react@x.x.x deduped
│ └── scheduler@x.x.x
├── react@x.x.x
└── vite@x.x.x

react-domの下に並んでいるreactとschedulerが、react-domが必要としている依存パッケージです。dedupedの意味は、次の項で説明します。

npm list –allで依存関係を含めてすべて表示する

依存パッケージまで含めてすべて確認したいときは、npm list --allを実行します。

npm list --all

-allは、直接依存だけでなく、すべての階層の依存パッケージを表示するオプションです。-allを付けると、-depthの既定値は無制限になります。

ただし、出力はかなり長くなります。ESLintやViteなどを入れただけの小さなプロジェクトでも、160行を超えました。画面で読み切るのは難しいため、次のようにファイルへ保存してからエディタで開くのがおすすめです。

npm list --all > packages.txt

>は、コマンドの出力を画面ではなくファイルに書き込むための記号です。macOSやLinuxではnpm list --all | lessとすれば、1画面ずつ読み進められます。

出力の中には、初めて見ると戸惑う表示があります。

└─┬ vite@x.x.x
  ├── UNMET OPTIONAL DEPENDENCY fsevents@~x.x.x
  ├─┬ lightningcss@x.x.x
  │ ├── detect-libc@x.x.x
  │ └── ...

※Viteのバージョンによって、依存パッケージの内容は異なります。

UNMET OPTIONAL DEPENDENCYは、エラーではありません。たとえば、macOS専用のパッケージがWindowsやLinuxにはインストールされない、といった場合にこう表示されます。サンプルプロジェクトでも、この表示があるままnpm list --allは正常に終了しました。

一方、UNMET DEPENDENCY（OPTIONALが付かないもの）やmissingは、必要なパッケージが足りていない状態です。その場合はnpm installを実行してください。

全階層の中から特定のパッケージだけを探したい場合は、--allの出力を目で追うより、後述のパッケージ名を指定する方法のほうが確実です。

npm list -g –depth=0でグローバルパッケージを確認する

グローバルにインストールしたパッケージを確認するなら、npm list -g --depth=0を実行します。

npm list -g --depth=0

gは-globalの短縮形で、プロジェクトではなく、PC全体で使えるように入れたパッケージ（グローバルパッケージ）を対象にするオプションです。npm install -gでインストールしたパッケージが、これに当たります。

実行結果は、たとえば次のようになります。

/usr/local/lib
├── corepack@x.x.x
├── npm@x.x.x
└── typescript@x.x.x

1行目にはプロジェクト名ではなく、グローバルパッケージの保存先が表示されます。保存先はOSやNode.jsの導入方法によって異なります。保存先のフォルダを直接知りたい場合は、次のコマンドで確認できます。

npm root -g

グローバルパッケージは、プロジェクトのフォルダに関係なく確認できます。そのため、-gを付けて実行する場合は、どのディレクトリにいても問題ありません。

使い方で間違えやすいのは、次の2点です。

• gの付け忘れ：gがないと、現在のプロジェクトのパッケージが表示されます。「グローバルに入れたはずのパッケージが出てこない」ときは、まずgを確認してください。
• Node.jsのバージョン管理ツール：nvmなどを使っている場合、グローバルパッケージがNode.jsのバージョンごとに別々に管理されていることがあります。Node.jsのバージョンを切り替えたあとに一覧が変わって見えるのは、そのためです。
• -depth=0については、前述のとおり現在のnpmでは既定値と同じです。グローバルパッケージも依存関係を持つため、直接インストールしたものだけを見ることを明示する目的で付けておくと、意図が伝わりやすくなります。

npm list reactで特定のパッケージを確認する

特定のパッケージが入っているかを確認するには、npm listの後ろにパッケージ名を付けます。Reactを確認するなら、npm list reactです。

npm list react

my-project@1.0.0 /Users/you/my-project
├─┬ react-dom@x.x.x
│ └── react@x.x.x deduped
└── react@x.x.x

パッケージ名を指定すると、そのパッケージにたどり着くまでの経路だけが表示されます。この例の読み方は次のとおりです。

• └── react@x.x.x（一番下）：プロジェクトが直接依存しているreactです。
• react-domの下のreact：react-domが必要としているreactです。dedupedとあるので、同じものを共有しています。

つまり、reactが直接依存として入っているのか、ほかのパッケージ経由で入っているだけなのかを、経路から判断できます。プロジェクト直下にreactがなく、他のパッケージの配下にだけ表示される場合は、直接インストールしたわけではありません。「なぜこのパッケージが入っているのか」を詳しく調べたいときは、後述のnpm explainが役立ちます。

パッケージ名の指定には、次のような書き方もできます。

# 複数のパッケージを同時に確認する
npm list react react-dom

# スコープ付きパッケージ（@から始まる名前）を確認する
npm list @types/react

# バージョンを指定して確認する
npm list react@19

# グローバルパッケージから探す
npm list -g typescript

react@19のように書くと、そのバージョンの範囲に合うものだけが対象になります。インストールされているバージョンが範囲外だと、見つからなかったときと同じ結果になります。

指定したパッケージがインストールされていない場合は、次のように(empty)と表示されます。

my-project@1.0.0 /Users/you/my-project
└── (empty)

このとき、コマンドの終了コード（コマンドの成否を示す数値）は1になります。見つかった場合は0です。スクリプトやCIで「入っていなければ失敗させる」といった判定に使えます。

パッケージ名は完全一致で探されます。reactと入力しても、react-dom自体は結果に含まれません（react-domはreactを必要とするため、経路として表示されているだけです）。react-domを確認したい場合は、npm list react-domと入力します。

npm list –jsonで一覧をJSON形式で出力する

パッケージ一覧をJSON形式で取得するには、npm list --jsonを実行します。

npm list --json

-jsonは、通常のツリー表示の代わりに、JSON形式でデータを出力するオプションです。JSONは、プログラムで扱いやすいデータ形式です。

{
  "version": "1.0.0",
  "name": "my-project",
  "dependencies": {
    "react": {
      "version": "x.x.x",
      "resolved": "https://registry.npmjs.org/react/-/react-x.x.x.tgz",
      "overridden": false
    },
    "vite": {
      "version": "x.x.x",
      "resolved": "https://registry.npmjs.org/vite/-/vite-x.x.x.tgz",
      "overridden": false
    }
  }
}

主な項目は次のとおりです。

ほかのオプションと組み合わせることもできます。

# ファイルに保存する
npm list --json > packages.json

# 依存パッケージも含めてJSONで出力する（各パッケージの中に dependencies が入れ子になる）
npm list --all --json

# グローバルパッケージをJSONで出力する
npm list -g --json

出力したJSONは、jqなどのツールで加工できます。たとえばパッケージ名だけを取り出すなら、次のようにします（jqは別途インストールが必要なツールです）。

npm list --json | jq '.dependencies | keys'

指定したパッケージが見つからなかった場合は、dependenciesの項目そのものが出力に含まれず、終了コードは1になります。JSONを読み込むプログラムを作るときは、dependenciesが存在しないケースも想定しておくと安全です。

なお、JSONではなく、各パッケージのインストール先パスだけを一覧にしたい場合は、--parseableオプションが使えます。

npm list --parseable

npmパッケージ一覧はpackage.json・package-lock.jsonでも確認できる

npmパッケージの一覧は、npm listのほかに、package.jsonとpackage-lock.jsonを開いても確認できます。ただし、3つで分かる内容は同じではありません。

• npm list：今この環境にインストールされているパッケージと、実際のバージョン
• package.json：自分が指定したパッケージと、許容するバージョンの範囲
• package-lock.json：間接依存も含めて、npmが確定させたすべてのパッケージとバージョン

この章では、package.jsonとpackage-lock.jsonの見方を説明したうえで、npm listとの使い分けを整理します。

package.jsonでdependenciesとdevDependenciesを確認する

自分が追加したパッケージを確認するなら、プロジェクトのルートにあるpackage.jsonを開き、dependenciesとdevDependenciesを見ます。

package.jsonは、プロジェクトの名前やスクリプト、必要なパッケージなどを記述する設定ファイルです。npm installでパッケージを追加すると、その内容が自動で書き加えられます。

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^x.x.x",
    "react-dom": "^x.x.x"
  },
  "devDependencies": {
    "vite": "^x.x.x",
    "eslint": "^x.x.x"
  }
}

npm listは両者を同じ一覧に表示しますが、package.jsonでは次のように分かれています。

Dは-save-devの短縮形で、開発用のパッケージとして追加するオプションです。

バージョンの前に付いている^は、同じメジャーバージョンの範囲で更新を許可するという意味です。たとえば^19.0.0なら、19.0.0以上20.0.0未満のバージョンが対象になります。

エディタで開かなくても、ターミナルから次のコマンドで確認できます。

npm pkg get dependencies devDependencies

npm pkg getは、package.jsonの指定した項目だけを取り出して表示するコマンドです。

ただし、package.jsonだけでは分からないことがあります。

• 間接依存：自分が追加したパッケージだけが書かれていて、その依存パッケージは書かれていません。
• 実際のバージョン：書かれているのは^などの範囲指定で、実際にインストールされているバージョンは分かりません。
• インストールの有無：書かれていても、npm installをしていなければ、実際には入っていません。

package-lock.jsonでインストールされた依存関係を確認する

依存パッケージも含めて、npmが確定させたバージョンを確認するなら、package-lock.jsonのpackagesを見ます。

package-lock.jsonは、npmが自動で生成するファイルです。npm公式ドキュメントでは、node_modulesやpackage.jsonを変更する操作のたびに生成され、そのとき作られた依存関係のツリーを正確に記録すると説明されています。同じ内容でインストールを再現できるように、Gitなどのリポジトリにコミットして共有するファイルです。手動で編集するものではありません。

{
  "name": "my-project",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "my-project",
      "version": "1.0.0",
      "dependencies": {
        "react": "^x.x.x"
      },
      "devDependencies": {
        "eslint": "^x.x.x"
      }
    },
    "node_modules/react": {
      "version": "x.x.x",
      "resolved": "https://registry.npmjs.org/react/-/react-x.x.x.tgz",
      "integrity": "sha512-..."
    },
    "node_modules/eslint": {
      "version": "x.x.x",
      "resolved": "https://registry.npmjs.org/eslint/-/eslint-x.x.x.tgz",
      "integrity": "sha512-...",
      "dev": true
    }
  }
}

※実際のファイルでは、間接依存を含む多数のパッケージが並びます。

主な項目の意味は次のとおりです。

同じパッケージの異なるバージョンが複数入る場合は、"node_modules/A/node_modules/B"のように、パスが入れ子になります。

小さなプロジェクトでも、package-lock.jsonには100件以上のパッケージが並びます。人が目で追うのは大変なので、ツリー形式で見たいときは、npm listに--package-lock-onlyを付けます。

npm list --package-lock-only

-package-lock-onlyは、node_modulesの中身ではなく、package-lock.jsonに書かれた内容をもとに表示するオプションです。リポジトリをクローンした直後で、まだnpm installをしていない場合でも、入る予定のパッケージを確認できます。-allと組み合わせれば、依存パッケージも含めて表示できます。

npm list --package-lock-only --all

npm listとpackage.json・package-lock.jsonの違い

「今入っているものを確認したい」ならnpm list、「何を指定したかを確認したい」ならpackage.json、「何がどのバージョンで確定しているかを確認したい」ならpackage-lock.jsonを見ます。

目的別に、どれを見ればよいかをまとめると次のようになります。

初心者の方が間違えやすいのは、package.jsonに書かれていれば、インストールされていると考えてしまうことです。package.jsonは「必要なものの宣言」であり、実際にインストールされているかどうかは別の話です。両者にずれがあると、npm listが教えてくれます。

たとえば、package.jsonのreactを^18.0.0に書き換えたのに、npm installをしていないと、npm listは次のように表示します（この例では、19系がインストールされている状態です）。

my-project@1.0.0 /Users/you/my-project
├── eslint@x.x.x
├── react-dom@x.x.x
├── react@x.x.x invalid: "^18.0.0" from the root project
└── vite@x.x.x

invalidは、インストール済みのバージョンが、package.jsonの指定範囲に合っていないことを示します。package.jsonに書かれているのに入っていない場合は、missingと表示されます。どちらも、npm installを実行して状態を揃えるのが基本の対処です。

ここまでの説明は、npmで管理しているプロジェクトが前提です。yarn.lockやpnpm-lock.yamlがあるプロジェクトは、Yarnやpnpmで管理されています。その場合は、npm listではなく、それぞれのツールのコマンドで確認してください。

npm listとあわせて覚えたいパッケージ確認コマンド

npm listは「今インストールされているもの」を確認するコマンドです。「レジストリにある最新情報を知りたい」「更新が必要か知りたい」「なぜそのパッケージが入っているのか知りたい」といった場面では、次の3つのコマンドを使い分けます。

ここでいうnpmレジストリとは、npmパッケージが公開・保管されているサーバー（通常はnpmjs.com）のことです。npm listはプロジェクトの手元にあるパッケージを表示するのに対し、npm viewとnpm outdatedはレジストリの情報も参照します。この違いが、コマンドを選ぶときの基準になります。

npm viewでnpmレジストリのパッケージ情報を確認する

npmレジストリ上のパッケージ情報を確認するなら、npm viewを実行します。インストールしていないパッケージでも調べられます。

npm view react version

npm view <パッケージ名> <フィールド名>の形式で、確認したい項目を指定します。上のコマンドは、reactの最新バージョン（latestタグが付いたバージョン）を表示します。バージョンを指定しない場合はlatestが対象になります。

# 公開されているバージョンの一覧を表示する
npm view react versions

# リポジトリのURLを表示する
npm view react repository.url

# パッケージ名だけ指定すると、主要な情報がまとめて表示される
npm view react

npm viewにはinfo・show・vというエイリアス（別名）があり、npm info reactやnpm v reactでも同じ結果になります。

実務では、パッケージを追加する前に最新バージョンを確認したいときや、特定のバージョンが公開されているかを調べたいときに使います。

注意したいのは、npm viewで表示されるバージョンは「レジストリ上の最新版」であり、「自分のプロジェクトに入っているバージョン」ではないという点です。プロジェクトに入っているバージョンは、npm list reactで確認します。

npm outdatedで更新できるパッケージを確認する

更新できるパッケージがあるか確認するなら、プロジェクトのルートディレクトリでnpm outdatedを実行します。

npm outdated

このコマンドは、インストール済みパッケージの現在のバージョンとレジストリ上のバージョンを比べ、古くなっているものだけを表示します。パッケージの更新自体は行わないので、確認のために実行しても問題ありません。

実行結果は次のような表で表示されます（バージョンは例です）。

Package  Current  Wanted  Latest  Location            Depended by
react     18.2.0  18.3.1  19.x.x  node_modules/react  my-project

各列の意味は次のとおりです。

読み方のポイントは、WantedとLatestの違いです。上の例では、package.jsonに"react": "^18.2.0"と書かれていれば、範囲内の最大である18.3.1がWantedになります。Latestの19.x.xはこの範囲の外にあるため、メジャーバージョンが上がる更新になります。

npmの公式ドキュメントでは、表示色にも意味があります。赤は、指定した範囲内に新しいバージョンがあり、今すぐ更新できる状態です。黄は、範囲の外に新しいバージョンがあり（多くはメジャーバージョンアップ）、慎重に進める必要がある状態です。

npm outdatedは、初期状態では直接インストールしたパッケージ（package.jsonに書いたもの）だけを対象にします。依存パッケージも含めて確認したい場合は、--allを付けます。

npm outdated --all

グローバルにインストールしたパッケージを調べたいときは、-gを付けてnpm outdated -gを実行します。

npm explainで依存パッケージが必要な理由を確認する

「自分でインストールした覚えのないパッケージが入っている」と気づいたときは、npm explainで理由を確認できます。

npm explain postcss

npm explain <パッケージ名>は、そのパッケージがプロジェクトにインストールされている原因となった依存関係の連なりを表示します。npm whyという別名でも実行できます。

実行結果の例です（パッケージ名とバージョンは例です）。

postcss@8.x.x
node_modules/postcss
  postcss@"^8.4.0" from vite@5.x.x
  node_modules/vite
    dev vite@"^5.0.0" from the root project

下から上へ読むと、流れがわかります。

1. from the root project：自分のプロジェクトのpackage.jsonに書かれている
2. dev vite@"^5.0.0"：viteをdevDependenciesとして指定している（先頭のdevが目印）
3. postcss@"^8.4.0" from vite：viteがpostcssを必要としている
4. その結果、postcssがインストールされている

つまり、postcssは自分で入れたのではなく、viteの依存パッケージとして入ったことがわかります。

npm list --allでもツリーは確認できますが、大規模なプロジェクトでは出力が長くなります。「このパッケージがどこから来たのか」だけを知りたいなら、npm explainのほうが早く答えにたどり着けます。

npm explainはインストール済みのパッケージを対象にするため、node_modulesがない状態では先にnpm installを実行してください。

目的別に選ぶ早見表

迷ったときは、知りたいことに合わせて次のように選びます。

よくある質問（FAQ）

まとめ

npm listとは、現在のプロジェクトにインストールされているnpmパッケージと依存関係を、ツリー形式で確認するためのコマンドです。npm lsも同じコマンドとして使えます。この記事の要点を、目的別にまとめます。

目的別のコマンド早見表

npm listを使うときの5つのポイント

1. 実行する場所を確認する。 npm listは、package.jsonがあるプロジェクトのルートディレクトリで実行します。gを付けたときだけ、グローバルにインストールしたパッケージが対象になります。
2. 表示範囲は-depth=0と-allで決める。 公式ドキュメントでは、-allを付けない場合の表示は直接依存が基本とされています。npmのバージョンによる差を避けるため、直接インストールしたものだけを見たいときは-depth=0を明示すると確実です。依存パッケージまで見たいときは-allを付けます。
3. 結果は「プロジェクト名 → パッケージ名 → バージョン」の順に読む。 1行目にプロジェクト名とパス、その下にインストール済みのパッケージ名とバージョンが並びます。依存パッケージは、枝分かれしたツリーの下位に表示されます。
4. package.jsonとpackage-lock.jsonの役割を分けて考える。 package.jsonは必要なパッケージの宣言（バージョンの範囲）、package-lock.jsonは確定した依存関係全体のバージョンの記録です。npm listは、実際にインストールされている状態を確認します。
5. 宣言と実際の状態のずれも確認できる。 package.jsonに書いてあるのに入っていない、指定と合わないバージョンが入っている、といった状態はnpm listで確認できます。

npm listとあわせて使う確認コマンド

• npm view：npmレジストリ上のパッケージ情報を確認します。npm view react versionで、レジストリ上の最新バージョンがわかります。プロジェクトに入っているバージョンではない点に注意してください。
• npm outdated：更新できるパッケージを確認します。Current（現在）・Wanted（package.jsonの範囲内で入れられる最大）・Latest（レジストリの最新）の3つを比べて判断します。
• npm explain：依存パッケージが入っている理由を確認します。npm explain パッケージ名で、そのパッケージを必要としているパッケージの連なりが表示されます。

迷ったときの選び方

• 「今、何が入っているか」を知りたい → npm list
• 「最新版はいくつか」を知りたい → npm view
• 「更新が必要か」を知りたい → npm outdated
• 「なぜこのパッケージが入っているのか」を知りたい → npm explain

まずはnpm list --depth=0で直接インストールしたパッケージを確認し、気になるパッケージがあればnpm list パッケージ名やnpm explain パッケージ名で掘り下げる、という流れで使うと、実務でも迷いにくくなります。

あわせて読みたい

npmキャッシュクリアの正しい手順と安全なキャッシュ削除法

npmのキャッシュクリア方法を実例コマンド付きで解説。Windows・Mac・Linux別の手順や安全性、エラーが直らない時の対処法まで網羅的に紹介します。

watashi.xyz

2026.09.15

npm自体を安全かつ確実に最新バージョンへアップデートする完全ガイド｜トラブル対策付

npmの動作が不安定だったり、新機能を使いたいときは「npm自体のアップデート」が重要です。npmを最新バージョンへ安全にアップデートする方法を、Windows・macOS・Linux別にわかりやすく解説します。バージョン確認コマンドや更新手順、トラブル対処法、チームでのnpm管理方法までまとめました。

watashi.xyz

2025.09.07

npm audit fixとは｜--forceの意味とリスクを解説

npm audit fixとnpm audit fix --forceの違いは？意味・リスク・エラー対処法・元に戻す方法をコマンド例つきで解説します。

watashi.xyz

2025.04.21