初心者向け！Node.js開発者必見！npmでインストールされたユーザーパッケージを一覧表示する方法

2024-04-02

JavaScript、Node.js、npm でインストールされたユーザーパッケージを一覧表示する方法

開発を進める過程で、様々な npm パッケージをインストールしていくと、どのパッケージがインストールされているのか分からなくなることがあります。そこで、今回は npm でインストールされたユーザーパッケージを一覧表示する方法を紹介します。

方法

npm でインストールされたユーザーパッケージを一覧表示するには、以下の 2 つの方法があります。

npm list コマンドを使用する

最も簡単な方法は、npm list コマンドを使用することです。

npm list

このコマンドを実行すると、インストールされているすべてのパッケージの一覧が表示されます。

出力例：

├─┬ acorn-jsx
│ └── [email protected]
├── ansi-styles
│ └── [email protected]
├── array-includes
│ └── [email protected]
├── async-limiter
│ └── [email protected]
├── babel-code-frame
│ └── @babel/[email protected]
├── babel-generator
│ └── @babel/[email protected]
...

package.json ファイルには、プロジェクトで使用しているすべてのパッケージとそのバージョン情報が記載されています。

package.json ファイルを開いて、dependencies または devDependencies プロパティを確認することで、インストールされているパッケージの一覧を確認することができます。

package.json ファイル例：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.13.1"
  },
  "devDependencies": {
    "eslint": "^8.12.0",
    "jest": "^28.0.1"
  }
}

オプション

特定のパッケージのみを表示したい場合は、-g オプションとパッケージ名を指定することで、グローバルにインストールされたパッケージのみを表示できます。

npm list -g express

詳細情報を表示する

-l オプションを指定すると、インストールされているパッケージの詳細情報が表示されます。

npm list -l

ツリー構造で表示する

npm list -t

今回紹介した方法を活用することで、npm でインストールされたユーザーパッケージを簡単に一覧表示することができます。

これらの方法を参考に、プロジェクトで使用しているパッケージを管理しましょう。

npm list コマンドを使用する

npm list

├─┬ acorn-jsx
│ └── [email protected]
├── ansi-styles
│ └── [email protected]
├── array-includes
│ └── [email protected]
├── async-limiter
│ └── [email protected]
├── babel-code-frame
│ └── @babel/[email protected]
├── babel-generator
│ └── @babel/[email protected]
...

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.13.1"
  },
  "devDependencies": {
    "eslint": "^8.12.0",
    "jest": "^28.0.1"
  }
}

npm list -g express

├─┬ [email protected]
│ └── [email protected]

詳細情報を表示する

npm list -l

├─┬ [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── acorn-jsx@^6.4.1
├── [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── [email protected]
├── [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── [email protected]
...

ツリー構造で表示する

npm list -t

├─┬ [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── acorn-jsx@^6.4.1
├── [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── [email protected]
├── [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── [email protected]
...

npm でインストールされたユーザーパッケージを一覧表示するその他の方法

npx コマンドは、npm パッケージを一時的にインストールせずに実行できるコマンドです。npx コマンドと list コマンドを組み合わせることで、インストールされているパッケージの一覧を表示することができます。

npx list

├─┬ acorn-jsx
│ └── [email protected]
├── ansi-styles
│ └── [email protected]
├── array-includes
│ └── [email protected]
├── async-limiter
│ └── [email protected]
├── babel-code-frame
│ └── @babel/[email protected]
├── babel-generator
│ └── @babel/[email protected]
...

yarn list コマンドを使用する

yarn list

├─┬ [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── acorn-jsx@^6.4.1
├── [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── [email protected]
├── [email protected]
│ └── [email protected]
│     ├── [email protected]
│     └── [email protected]
...