1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

フロントエンドやNode.jsのプロジェクトを触っていると、「あれ、この依存関係ほんとに使ってたっけ…?」「なんか警告出てるけど大丈夫?」なんてモヤモヤ、ありませんか?
そんなときに役立つのが npx auditnpx 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.x1.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は最初に見る観点なので定期的なメンテナンス作業をおこないm

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?