はじめに

フロントエンドや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 オプションを使ってインストールしましょう。

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

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

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


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

パッケージのバージョン範囲を変更

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

セマンティックバージョニング（SemVer）の管理

依存関係のバージョン管理には、^ と ~ を使いこなすのが重要です。

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

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

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には進まないから注意。

npm install some-package@~1.2.3

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

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

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

package-lock.json で一致させよう

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

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

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

アップデート後の確認

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

依存関係のテスト

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

📋 依存関係の中身をチェック！

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

npm list               # すべての依存関係を確認
npm list --depth=0     # 直接依存してるやつだけ見たいとき
npm outdated           # 古くなってるやつはないかな？

3.🧼 不要なパッケージの整理編

🗑 パッケージの削除

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

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

✨ 依存関係をクリーンアップ

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

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

🕵️‍♀️ 未使用パッケージを調査する

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

npx depcheck

npx depcheck --ignores="eslint,webpack"

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

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

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

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

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

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

🔍 脆弱性チェック！

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

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

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

🧼 クリーンなインストール（CIでおすすめ）

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

npm ci

★メリット

package-lock.json に沿ってキッチリ入れてくれる
node_modules が空じゃないとエラーになる
チーム開発やCI環境ではこれを使うとバージョンのズレが防げて吉！

📦 本番用のインストール

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

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

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

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

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

🧯 キャッシュトラブル解消編

「なんか動かん…」って時に効く！

🔄 キャッシュクリア！

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

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は最初に見る観点なので定期的なメンテナンス作業をおこないｍ