依存関係の整理とパフォーマンス向上のためのnpmコマンド集【2025年版】

# はじめに

フロントエンドやNode.jsのプロジェクトを触っていると、「あれ、この依存関係ほんとに使ってたっけ…？」「なんか警告出てるけど大丈夫？」なんてモヤモヤ、ありませんか？
そんなときに役立つのが `npx audit` や `npx depcheck` などの便利コマンドたち！今回は、依存関係をもっとスッキリ＆安全に保つためのコマンド術を、やさしく・わかりやすく紹介します。誤検知を防ぐちょっとしたコツも紹介するので、ぜひ試してみてくださいね！

# 対象読者

「依存関係の整理、なんだか不安…」「セキュリティやパフォーマンスが気になる」と思ったことがあるNode.js開発者さんへ！

# **目次**

### 1. 📦 依存関係のインストール基本
 - 通常の依存関係と開発専用依存関係のインストール
 - バージョン管理（^ と ~ の使い方）

### 2. 📅 依存関係の確認と更新
 - 依存関係の確認方法
 - 古いパッケージのチェックと更新
 - npm ci でCI環境を整える

### 3.🧼 不要なパッケージの整理編
 - パッケージの削除（npm uninstall）
 - 依存関係のクリーンアップ（npm prune）
 - 未使用パッケージを調査する（npx depcheck）

### 4.🛡 セキュリティ・パフォーマンス編
 - 脆弱性チェック（npm audit）
 - ⚙️ CI/CD・本番環境の最適化編
 - CI環境でのクリーンインストール（npm ci）
 - 本番環境のインストール（--productionオプション）

### 5.🧪 開発スクリプト・自動化編
 - 毎回打つコマンドをnpm runでまとめる
 - 🧯 キャッシュトラブル解消編
 - キャッシュクリア（npm cache clean --force）

### まとめ
 - 依存関係を整理して未来をラクにする
---
### 1. 📦 依存関係のインストール基本

依存関係を管理する基本は「目的に合わせて分類」です。`開発専用ツール`は `--save-dev` オプションを使ってインストールしましょう。

```terminal
npm install <package-name>             # 通常の依存関係
npm install <package-name> --save-dev  # 開発専用ツール（例：jest, eslint））
```

:::note info
eslintや、prettierなどソース整形などが--save-devになります。こちらのオプションを付与することで、本番環境で、余分なpackageをビルドしなくてすみます！
:::

また、下記のようにversionを指定することもできます。

```terminal

npm install <package-name>@latest #左記を使うと、特定のパッケージを最新の安定版にアップデートできます。
```

### パッケージのバージョン範囲を変更
package.json 内で依存関係のバージョン範囲（^ や ~）を変更し、手動でアップデートを適用することもできます。

### セマンティックバージョニング（SemVer）の管理
依存関係のバージョン管理には、^ と ~ を使いこなすのが重要です。

^（キャレット）で、互換性がある最新バージョンをインストール。

~（チルダ）で、マイナーバージョン内の最新バージョンをインストール。

```terminal
npm install some-package@^1.2.3
```

これを使うと、`1.2.x` や `1.3.x` のバージョンがインストールされるけど、2.0.0 には進まないよ。

~（チルダ）: これを使うと「マイナーバージョンだけアップデート」してくれます。例えば ~1.2.3 と書くと、1.2.x のバージョンの中で一番新しいのをインストールします。でも、1.3.0 とか1.3.xには進まないから注意。


```terminal
npm install some-package@~1.2.3
```

### 2. 📅 依存関係の確認と更新

`npm list` で全依存関係を、`npm outdated` で古いパッケージをチェックできます。

```terminal
npm list             # すべての依存関係を確認
npm outdated         # 古くなった依存をチェック
```

### package-lock.json で一致させよう
package-lock.json は「このバージョンでインストールしてね！」っていう約束事みたいなもの。これを使うことで、プロジェクトチーム全員が同じバージョンのパッケージを使えるようになります。特にCI環境とかで、みんな同じ環境にしたい時めっちゃ便利。

なので、`npm ci` というコマンドを使うと、`package-lock.json` の内容通りに依存関係をインストールしてくれるので、みんな同じ状態で動くようにできますよ！

:::note warn
現場では、package.jsonが既にある場合、npm installをすると意図しないバージョン変更の可能性があります。
新規Pj以外では、`npm ci`で対応しましょう！
:::

### アップデート後の確認

アップデート後、もしエラーメッセージや警告が表示される場合、パッケージのドキュメントやリリースノートを確認し、必要に応じてコードの修正を行いましょう。

### 依存関係のテスト
プロジェクト内でテストを実行し、アップデートした依存関係が期待通りに動作するか確認します。
（Jestやplaywrightなどで検証する感じですね）

### 📋 依存関係の中身をチェック！
インストールしたパッケージが正しく管理されているかを確認するために、npm list や npm outdated を使って、依存関係を把握することができます。これにより、プロジェクト内の不要なパッケージや古くなったパッケージを発見できます。

```terminal
npm list               # すべての依存関係を確認
npm list --depth=0     # 直接依存してるやつだけ見たいとき
npm outdated           # 古くなってるやつはないかな？
```
---
## 3.🧼 不要なパッケージの整理編


### 🗑 パッケージの削除

プロジェクトが進行する中で、不要なパッケージが増えることもあります。そのままだと管理が煩雑になり、セキュリティリスクを増やす原因にも。npm uninstall を使って使わなくなったパッケージをきれいに削除しましょう。

```terminal
npm uninstall <package-name>    # もう使わないやつを削除
```

 ### ✨ 依存関係をクリーンアップ
`npm prune` は、`package.json` に記載されていない依存関係を整理してくれるコマンドです。プロジェクトが進むと不要な依存が増えたりするので、こまめに消しましょう〜！

```terminal
npm prune     # package.jsonに乗ってないものをnode_modulesから削除
```


### 🕵️‍♀️ 未使用パッケージを調査する
プロジェクト内で未使用のパッケージがないかを一括で調べるツールとして `depcheck `が便利です。実際に使われていない依存関係をリストアップしてくれるので、無駄なパッケージを削除する際に役立ちます。

```terminal
npx depcheck
```

```terminal
npx depcheck --ignores="eslint,webpack"
```

未使用の依存や、使ってるのにpackage.jsonに記載されてない依存を一覧にしてくれる便利ツール！

:::note warn
上記コマンドは`未import`のpackageを検出しますが、tailwindなど使用しているのに引っかかります。こちらの弱点としてを解消するために、基本的には下記の方法で対応すると良いです。
:::

### 🧾 .depcheckrc の例（プロジェクトルートに置く

こちらをプロジェクトルートに配置することで、特定のパッケージを無視したり、特定のディレクトリをスキャンから除外することができます。この設定ファイルを使うことで、誤検知を防ぐことができます。

```javascript
{
  "ignoreBinPackage": false,
  "skipMissing": false,
  "ignorePatterns": [
    "dist",
    "build",
    "coverage"
  ],
  "ignoreMatches": [
    "eslint",
    "webpack",
    "tailwindcss",
    "autoprefixer",
    "prettier",
    "@types/*"
  ]
}
```


### 🛡 セキュリティ・パフォーマンス編

#### 🔍 脆弱性チェック！
セキュリティ対策として、依存関係の脆弱性をチェックすることは非常に重要です。`npm audit` は、インストールされているパッケージに脆弱性がないかを検出してくれるツールで、セキュリティの問題が発生する前に対応できるようなります。


```terminal
npm audit # セキュリティチェック
```

### ⚙️ CI/CD・本番環境の最適化編


#### 🧼 クリーンなインストール（CIでおすすめ）
CI環境で使うには npm ci を活用することをおすすめします。npm ci は、package-lock.json に記載された正確なバージョンでインストールを行うため、依存関係のズレを防ぐことができます。また、node_modules が空でないとエラーが出るため、予期しない動作を防ぐこともできます。

```terminal
npm ci
```

##### ★メリット
- package-lock.json に沿ってキッチリ入れてくれる

- node_modules が空じゃないとエラーになる

- チーム開発やCI環境ではこれを使うとバージョンのズレが防げて吉！


### 📦 本番用のインストール
本番環境では、devDependencies を除外してインストールしたい場合があります。--production オプションを使うことで、開発用の依存をスキップして、軽量な本番用の依存関係だけをインストールすることができます。

```terminal
npm install --production   # devDependencies をスキップしてインストール
```


### 🧪 開発スクリプト・自動化編

開発中に何度も使うコマンドを npm run でスクリプト化しておくと、毎回手打ちしなくてもすぐに実行できます。例えば、ビルドやテストを自動化しておけば、効率的に作業が進みます。

```terminal
npm run build # ビルド
npm run lint  # Lintチェック
npm run test:watch  # コード変更を監視しながらテスト
```

## 🧯 キャッシュトラブル解消編
「なんか動かん…」って時に効く！

### 🔄 キャッシュクリア！
npmのキャッシュが原因で不具合が起こることがあります。`npm cache clean --force` を使ってキャッシュをリセットすることで、問題を解決できることがあります。特に、依存関係が正しくインストールされない場合に有効です。

```terminal
npm cache clean --force    # キャッシュを全部リセット
```


##### ここまでのまとめになります！！

| やりたいこと                     | コマンド                        |
|----------------------------------|--------------------------------|
| パッケージのインストール           | `npm install`                  |
| dev用だけインストール              | `npm install --save-dev`       |
| 本番向けだけ入れる                 | `npm install --production`     |
| クリーンインストール（CI）         | `npm ci`                       |
| 不要なパッケージ削除              | `npm uninstall`                |
| 使ってない依存の調査              | `npx depcheck`                 |
| セキュリティチェック              | `npm audit`                    |
| 書かれてないやつ整理              | `npm prune`                    |
| 依存の更新チェック                | `npm outdated`                 |
| キャッシュ削除                    | `npm cache clean --force`      |




### 5. まとめ：ちょっとした掃除が未来を救う！
`npx audit` でセキュリティチェック！

`npx depcheck` で未使用依存をチェック！

`.depcheckrc` で快適ライフ！

`package.json` はこまめにお掃除！

ちょっとした手間だけど、やっておくと後からめちゃくちゃラクになるんです。
未来の自分、あるいはチームの誰かがきっと感謝してくれるはず…！
package.jsonは最初に見る観点なので定期的なメンテナンス作業をおこないｍ