はじめに
フロントエンドや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は最初に見る観点なので定期的なメンテナンス作業をおこないm