【初心者向け】npmにおけるパッケージのアップデート手順をまとめてみた。

概要

個人開発の備忘録として、Next.jsで構築した小規模なブログを運用しています。
備忘録程度の小規模のブログとはいえ、使用しているパッケージを最新化するなど、ある程度のメンテナンスは必要です。
時間があるときに、致命的な脆弱性はないかといった確認は行っています。

さて、最近、以下のようなニュースがありました。

ざっと調べたところ、フィッシング攻撃がパッケージ管理者を対象に実行され、結果として、2025年9月時点の最新メジャー／マイナーバージョン群の一部のnpmパッケージにマルウェアが挿入されたそうです。

このニュースを知り、私のブログで使用しているパッケージに問題はないか、慌てて確認をしました。
とりあえず、私のブログで使用しているパッケージは、攻撃を受けたバージョンよりも一つ前のバージョンだったため問題はありませんでしたが、冷や汗をかきました。

このニュースに対して、以下の記事では、日々のメンテナンスにおけるチェックポイントを次のようにまとめています。

チェック・ポイントの推奨事項
・未検証のインストールを防ぐため、npm ciとロックファイルを使用する
・npm audit、Snyk、Socket.dev などのツールを使用して依存関係を監査する
・パッケージメンテナーにハードウェアベースの二要素認証を要求する
・Infinity PlatformなどのAI駆動のランタイム脅威検知・防止機能を実装する

チェック・ポイントの２番目にあるように、依存関係の監査は大切なんだなと痛感しました。
とはいえ、毎度、「使用するコマンドはこれだよね…」「このコマンドの意味なんだっけ…」確認し作業するのが面倒なため、今回のニュースをきっかけに改めてアップデート手順を整理してみました。
どなたかの参考になれば幸いです。

実行環境

実際にパッケージの依存関係の確認作業を実行する実行環境は以下の通りです。

• Node.js：v22.20.0
• npm：10.9.3
• パッケージマネージャ：npm
• バージョン管理：git 2.43.0

パッケージの脆弱性監査と対応

パッケージに脆弱性がないかどうかを確認・対応する手軽な方法は以下の通りです。

1. 作業用の新しいブランチを作成し、スイッチする
2. npm auditコマンドを実行し、脆弱性がないか確認する
3. npm audit fixコマンドを実行し、脆弱性が検知されたパッケージに対して、最新のセキュリティで保護されたバージョンにアップデート

npm audit fixを実行することで、ある程度のアップデートは行われますが、私の場合、以下のようなメッセージが表示されました。

bash

$ npm audit fix

up to date, audited 963 packages in 1s

257 packages are looking for funding
  run `npm fund` for details

# npm audit report

prismjs  <1.30.0
Severity: moderate
PrismJS DOM Clobbering vulnerability - https://github.com/advisories/GHSA-x7hr-w5r2-h6wg
fix available via `npm audit fix --force`

Will install react-syntax-highlighter@16.0.0, which is a breaking change
node_modules/refractor/node_modules/prismjs
  refractor  <=4.6.0
  Depends on vulnerable versions of prismjs
  node_modules/refractor
    react-syntax-highlighter  6.0.0 - 15.6.6
    Depends on vulnerable versions of refractor
    node_modules/react-syntax-highlighter
...中略

コマンドnpm audit fixによるパッケージのアップデートの範囲は、package.jsonに記述されているバージョンの範囲内です。
そのため、メジャーアップデートは行われません。

例を出すと以下の通りです。

• @1.1.0 → @1.2.0 のような マイナーアップデート は実行される
• @1.x.x → @2.x.x のような メジャーアップデート は実行されない

それを踏まえて今回のメッセージをみます。

今回のメッセージによると、脆弱性が確認されているのは、「prismjs」というパッケージです。
そして、脆弱性を解消するには「react-syntax-highlighter@16.0.0」をインストール必要があると表示されています。

npm lsコマンドを使用して、「prismjs」を使用しているパッケージを確認すると、「react-syntax-highlighter@15.6.6」で使用されています。

bash

$ npm ls  prismjs
└─┬ react-syntax-highlighter@15.6.6
  ├── prismjs@1.30.0
  └─┬ refractor@3.6.0
    └── prismjs@1.27.0

つまり、今回のメッセージを解説するならば、

脆弱性が「prismjs」というパッケージで確認されています。
「prismjs」は「react-syntax-highlighter@15.6.6」で使用されています。
このパッケージを最新の安全なバージョンに更新するには、「react-syntax-highlighter@16.0.0」へアップデートする必要があります。
しかし、package.json ではバージョンが「^15.x.x」に固定されているため、自動更新 (npm audit fix) の対象外となります。

ということになります。

よって、ここからは、パッケージのメジャーアップデート対応になります。

パッケージのアップデート

パッケージのアップデートには、「npm-check-updates」というパッケージを使用して、package.jsonに記述されているパッケージを一気にアップデートする方法があります。

「npm-check-updates」は、package.json に記載された依存関係を、最新のメジャーバージョンまで含めて更新できる便利なツールです。
npm標準コマンド（npm update や npm audit fix）では対応できない部分を補ってくれます。

手順は以下の通りです。

1. npx npm-check-updatesを実行し、現在の依存関係を確認する
2. npx npm-check-updates -uで、依存関係をアップデートする
3. package.jsonが更新されていることを確認し、npm install
   を実行し、インストールする。

これらのコマンドを実行したのですが、メジャーアップデートが結構ありました…
（Next.jsのバージョン16がリリースされているのは知りませんでした…）

メジャーアップデートを行うと、今のソースコードの見直しが必要となる場合が多いので、今回は、「react-syntax-highlighter」だけをアップデートする方法を記述していきます。

手順は以下の通りです。

1. npm info react-syntax-highlighter versionを実行して、現在の最新バージョンを確認する
2. npm install react-syntax-highlighter@16.0.0 --saveを実行して、最新のバージョンにアップデートする
3. npm ls react-syntax-highlighterを実行して、react-syntax-highlighterのバージョンが@16.0.0となっていることを確認する

実際のログが以下の通り

bash

$ npm info react-syntax-highlighter version
16.0.0
### 最新バージョンが16.0.0であることを確認
$ npm install react-syntax-highlighter@16.0.0 --save
### アップデートでエラーが出ていないことを確認
up to date, audited 964 packages in 1s

258 packages are looking for funding
  run `npm fund` for details

2 low severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
$ npm ls react-syntax-highlighter
my-blog-memorandum@0.1.0 /home/ayaka/projects/my-blog-memorandum
└── react-syntax-highlighter@16.0.0

以上で、react-syntax-highlighterのアップデートが完了しました。

最後に、もう一度npm auditを実行します。

bash

$ npm audit 
found 0 vulnerabilities

脆弱性がないことを確認できたので、アップデート作業は完了です。

この後は、アップデートしたことによるエラーが発生していないかを確認していきます。
エラーが発生した場合、エラーを解消し、本番サーバーにデプロイしていきます。

今回の作業でメジャーアップデートがいろいろと行われていることが分かったので、それはまた次回に回したいと思います。

まとめ

• npm audit で脆弱性を確認
• npm audit fix でpackage.jsonに記述されているバージョンの範囲内の自動修正
• メジャーアップデートが必要な場合は npm-check-updates を活用
• 更新後は、アプリ動作確認

参考