アップデート事故を防ぐ！AIと進めるnpmパッケージ更新のベストプラクティス
npmパッケージのアップデートには、思わぬトラブルがつきもの。特に数ヶ月ぶりのメンテナンスで更新のあるパッケージが大量にある場合は「うぅ…」ってなります。しかし、AIエージェントを活用することで、リスクを事前に洗い出し、より安全に楽して作業を進めることができます。その手順を紹介します。
1. アップデートが出ているパッケージを調査
npm-check-updates が未導入ならインストール。
npm install -g npm-check-updates
プロジェクト内のパッケージのアップデート状況をチェック
ncu
→ アップデート可能なパッケージがリスト表示されます（このリストは次のプロンプトで使用します）。
2. AI エージェントにリスク評価を依頼
今回は、Claude 3.7 Sonnet を使いました。
会話は新規スレッドで始め、すべてのやり取りを1スレッド内で完結させます。
以下のプロンプトを使用して、リスク評価と移行情報を収集します。
(パッケージはncuで表示されたもので置き換えてください。また、MCPについては投稿者の別記事などを参照してください。)
※メモ：「◯◯◯のアップデートは特にリスクが高い」AIに知っておいて欲しい情報があれば、ここで情報URL付きで入れ込んどくと良いと思います。
npm で以下のパッケージをアップデートしたいので、リスク評価をして欲しい。問題が起きそうなものがないか、コード変更が必要でないかなど、ネット上の情報も集めて十分チェックして。移行でコード変更が必須なもの、または新バージョンでのベストプラクティスが変わるものがあれば、具体的なコードサンプル(Before, After)も付けて。必要であれば、fetch、fire-crawl、perplexity などのMCPも使って。まだアップデート作業は禁止。
```
@hookform/resolvers ^4.1.3 → ^5.0.1⚠️
@playwright/test ^1.51.1 → ^1.52.0
@radix-ui/react-accordion ^1.2.4 → ^1.2.7
@radix-ui/react-aspect-ratio ^1.1.2 → ^1.1.4
@tailwindcss/postcss ^4.0.15 → ^4.1.4
@testing-library/react ^16.2.0 → ^16.3.0
@vitejs/plugin-react ^4.3.4 → ^4.4.1
@vitest/ui ^3.0.9 → ^3.1.1
jsdom ^26.0.0 → ^26.1.0
next 15.2.3 → 15.3.1
react ^19.0.0 → ^19.1.0
react-dom ^19.0.0 → ^19.1.0
react-hook-form ^7.54.2 → ^7.56.0
react-icons ^5.0.1 → ^5.5.0
sonner ^2.0.1 → ^2.0.3
tailwind-merge ^3.0.2 → ^3.2.0
tailwindcss ^4.0.15 → ^4.1.4
tw-animate-css ^1.2.5 → ^1.2.7
vitest ^3.0.9 → ^3.1.1
```
AI の回答をよく読み、リスクの高そうなものや移行作業が必要なものを把握しておきましょう。
3. アップデートの実行 1 (リスクが少ないもの)
※メジャーアップデートや、AIの回答で不安を感じるようなリスクが高そうなものは後回し、この時点では保留にしておきます。
package.json のパッケージバージョンをアップデート
ncu -u
→ アップデートのあるパッケージのバージョン番号が最新版に書き換えられます。
package.json を開き、保留したいパッケージのバージョンを手動で元に戻して保存。(例: @hookform/resolvers を元の "^4.1.3” に戻す)
インストール
npm install
AI にプロンプトで以下を依頼
{アップデートから外したパッケージのリストを記載} 以外のパッケージをアップデートした。このアップデートで必要なコードの更新や推奨のリファクタリングがあればお願い。なければ何もしなくていいよ。
テスト、ビルド、ブラウザ確認などを行い、動作に問題ががあれば AI に聞きながら解決します。
問題がない状態になればコミット。
4. アップデートの実行 2 (リスクが高いもの)
Github の Release など、Migration Guide 的なものを探しチェック。初めの AI の回答中にないものがあれば URL を控えておきます。
パッケージを指定してアップデート (パッケージ名は適宜変更してください)
npm install @hookform/resolvers@latest
AIに以下のように依頼します。
("XXXXX⭐️の箇所"は、会話中の該当のものに置き換えてください。)
手動で @hookform/resolvers を 4.1.3 から 5.0.1 にアップデートした。上の「1. @hookform/resolvers (^4.1.3 → ^5.0.1) ⭐️」の箇所や {★★あればURL} を参照し、プロジェクト内にコード修正が必要な箇所があれば適用して。新バージョンでのベストプラクティスな実装になるように、慎重に、ステップバイステップです進めて。もし足りない情報があれば聞いて。
再度テスト、ビルド、ブラウザチェックを行い、問題があれば AI に聞きながら解決。問題がなければコミット。
5. 仕上げと整理
パッケージに潜む脆弱性を自動修正。
npm audit fix
必要があれば、README.md や各種ルールファイル（.windsurfrules, .cursorrules, .clinerules など）を更新。
そして、最後にコミットで完了！
大量のパッケージのアップデートも、もう怖くありません… たぶん。
Discussion