package.jsonに記載されているパッケージをアップデートする方法

この記事では『package.jsonに記載されているパッケージをアップデートする方法』について、分かりやすく説明するように心掛けています。ご参考になれば幸いです。

package.jsonに記載されているパッケージをアップデートする方法

package.jsonに記載されているパッケージ(ライブラリやツール)をアップデートする方法には主に以下の2つの方法があります。

  • npm outdatedコマンドを使う方法
  • npm-check-updatesパッケージを使う方法(こっちの方が楽なのでオススメ)

では各方法について順番に説明します。

npm outdatedコマンドを使う方法

npm outdatedコマンドを使って、package.jsonに記載されているパッケージをアップデートする手順を以下に示します。

アップデート手順

  • npm outdatedコマンドを実行して新しいバージョンが存在するかどうかを確認する
  • 新しいバージョンがある場合には、該当のパッケージをアンインストールする
  • 新しいパッケージを再度インストールする

では実際にパッケージのアップデートをしてみましょう。

npm outdatedコマンドを実行して新しいバージョンが存在するかどうかを確認する

npm outdatedコマンドを実行する前に、以下のコマンドを実行して、あえて古いバージョンのパッケージ(例えば、jQueryのバージョン2.2.1など)をインストールします。

npm install jquery@2.2.1

実行結果

PS C:\test> npm install jquery@2.2.1

added 1 package in 602ms

すると、package.jsonは以下のようになります。

{
  "dependencies": {
    "jquery": "^2.2.1"
  }
}

ここで、以下に示すnpm outdatedコマンドを実行すると、jQueryに新しいバージョンがあることを教えてくれます。

npm outdated

実行結果

PS C:\test> npm outdated
Package  Current  Wanted  Latest  Location             Depended by
jquery     2.2.1   2.2.4   3.7.1  node_modules/jquery  test

上記の実行結果より、以下のことが分かります。

  • 現在インストールされているjQueryのバージョンは2.2.1
  • package.jsonで記述されている「^2.2.1」の条件を満たすパッケージは2.2.4
  • jQueryの最新バージョンは3.7.1

あわせて読みたい

npm outdatedコマンドの「使い方」や「実行結果の見方」については下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

npm outdatedとは？見方(Current・Wanted・Latestの意味)などを解説！
npm outdatedとは？見方(Current・Wanted・Latestの意味)などを解説！

続きを見る

新しいバージョンがある場合には、該当のパッケージをアンインストールする

新しいバージョンが見つかったので、いったん該当のパッケージ(今回の場合はjQuery)をアンインストールします。以下のコマンドを実行して、jQueryをアンインストールしましょう。

npm uninstall jquery

実行結果

PS C:\test> npm uninstall jquery

removed 1 package, and audited 1 package in 406ms

found 0 vulnerabilities

すると、package.jsonは以下のようになります。該当のパッケージ(今回の場合はjQuery)がアンインストールされたことが分かります。

{}

新しいパッケージを再度インストールする

以下のコマンドを実行して、該当のパッケージ(今回の場合はjQuery)を再度インストールしましょう。

npm install jquery

実行結果

PS C:\test> npm install jquery

added 1 package, and audited 2 packages in 819ms

found 0 vulnerabilities

すると、package.jsonは以下のようになり、jQueryの最新バージョン(3.7.1)がインストールされていることが分かります。

{
  "dependencies": {
    "jquery": "^3.7.1"
  }
}

この状態において、以下に示すnpm outdatedコマンドを実行しても、アップデート可能なパッケージがないので何も表示されません。

npm outdated

実行結果

PS C:\test> npm outdated        
# 何も実行結果が表示されない

パッケージ(今回の場合はjQuery)をバージョンアップすることができました。

npm-check-updatesパッケージをつかう方法

npm-check-updatesパッケージを使って、package.jsonに記載されているパッケージをアップデートする手順を以下に示します。

アップデート手順

  • npm-check-updatesパッケージをインストールする
  • ncuコマンドを実行して新しいバージョンが存在するかどうかを確認する
  • ncu -uコマンドを実行してpackage.jsonを更新する
  • npm installコマンドを実行して更新されたpackage.jsonをもとにパッケージを再度インストールする

では実際にパッケージのアップデートをしてみましょう。

npm-check-updatesパッケージをインストールする

npm-check-updatesパッケージをインストールしていない方は、以下のコマンドを実行して、npm-check-updatesパッケージをグローバルにインストールします。

npm install -g npm-check-updates

実行結果

PS C:\test> npm install -g npm-check-updates
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs

added 334 packages in 13s

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

ncuコマンドを実行して新しいバージョンが存在するかどうかを確認する

npm-check-updatesパッケージをインストールするとncuコマンドが使えるようになります。

ncuコマンドを実行する前に、以下のコマンドを実行して、あえて古いバージョンのパッケージ(例えば、jQueryのバージョン2.2.1など)をインストールします。

npm install jquery@2.2.1

実行結果

PS C:\test> npm install jquery@2.2.1

added 1 package in 573ms

すると、package.jsonは以下のようになります。

{
  "dependencies": {
    "jquery": "^2.2.1"
  }
}

ここで、以下に示すncuコマンドを実行すると、該当のパッケージ(今回の場合はjQuery)に新しいバージョンがあることを教えてくれます。

ncu

実行結果

PS C:\test> ncu
Checking C:\test\package.json
[====================] 1/1 100%

 jquery  ^2.2.1  →  ^3.7.1

Run ncu -u to upgrade package.json

上記の実行結果より、現在のバージョンが2.2.1であり、最新バージョンが3.7.1であることが分かります。

マイナーバージョンまででアップデート可能な範囲を知りたい場合

以下のようにncuコマンドを実行することで、アップデート可能な範囲(マイナーバージョンまで)を教えてくれます。

ncu --target minor

パッチバージョンまででアップデート可能な範囲を知りたい場合

以下のようにncuコマンドを実行することで、アップデート可能な範囲(パッチバージョンまで)を教えてくれます。

ncu --target patch

ncu -uコマンドを実行してpackage.jsonを更新する

ncuコマンドに-uオプションをつけるとpackage.jsonに記載されているパッケージを最新バージョンに更新することができます。以下のコマンドを実行します。

ncu -u

実行結果

PS C:\test> ncu -u
Upgrading C:\test\package.json
[====================] 1/1 100%

 jquery  ^2.2.1  →  ^3.7.1

Run npm install to install new versions.

ncu -uコマンドの実行後、package.jsonは以下のようになり、更新されたことが分かります。

{
  "dependencies": {
    "jquery": "^3.7.1"
  }
}

この記事では分かりやすく説明するために、1つのパッケージしかインストールしていませんが、package.jsonに複数のパッケージが入っていても、ncu -uコマンドを実行すると、package.jsonに記載されているアップデート可能なパッケージが一度に更新されます。

パッケージを指定する場合

以下のようにncu -uコマンドを実行することで、アップデートするパッケージを指定することができます。

ncu -u <パッケージ名>

また、パッケージ名の部分には正規表現を使用することができます。例えば、「react-xxx」というパッケージのみを対象にしたい場合には、以下のようにコマンドを記述します。どちらのコマンドでも構いません。

ncu react-*
ncu "/^react-.*$/"

マイナーバージョンだけアップデートしたい場合

以下のようにncu -uコマンドを実行することで、マイナーバージョンだけをアップデートすることができます。

ncu -u --target minor

パッチバージョンだけアップデートしたい場合

以下のようにncu -uコマンドを実行することで、パッチバージョンだけをアップデートすることができます。

ncu -u --target patch

npm installコマンドを実行して更新されたpackage.jsonをもとにパッケージを再度インストールする

package.jsonが更新されたので、その状態で以下に示すnpm installコマンドを実行します。

npm install

「ncu -u」コマンドではpackage.json の更新のみ行い、実際のアップデートは行われていないので注意してください。「ncu -u」コマンドを実行した後に「npm install」コマンドを実行する必要があります。

実行結果

PS C:\test> npm install

changed 1 package, and audited 2 packages in 734ms

found 0 vulnerabilities

この状態において、以下に示すncuコマンドを実行すると、「All dependencies match the latest package versions(すべての依存関係が最新のパッケージ・バージョンと一致)」と表示されます。

ncu

実行結果

PS C:\test> ncu
Checking C:\test\package.json
[====================] 1/1 100%

All dependencies match the latest package versions :)

パッケージ(今回の場合はjQuery)をバージョンアップすることができました。

npm updateコマンドを使用しない理由

npm updateコマンドはpackage.jsonで指定された満たすべきバージョンの範囲に基づいて、最新版をインストールし、package-lock.jsonやnode_modulesを更新するコマンドです。package.jsonの更新は行いません。

そのため、例えば、package.jsonに"jquery": "^2.2.1"と記載されている場合を考えてみましょう。「^2.2.1」という記述は「2.2.1 <= n < 3.0.0」という範囲までアップデートを許容するという意味になります。

そのため、npm updateコマンドでは、メジャーバージョンのアップデートまでは行ってくれません("jquery": "^2.2.1"と記載されている場合、jqueryにバージョン3.0.0がリリースされていても、npm updateでは2.x.xの最新バージョンにしかアップデートされません)。

グローバルインストールしたパッケージをバージョンアップする場合を除いてnpm updateコマンドを実行するケースはあまりないと思われます。

本記事のまとめ

この記事では『package.jsonに記載されているパッケージをアップデートする方法』について、以下の内容を説明しました。

  • npm outdatedコマンドを使う方法
    • npm outdatedコマンドを使って、アップデートが必要なパッケージを確認します。
    • 新しいバージョンがある場合、該当パッケージをアンインストールし(npm uninstall <パッケージ名>)、最新バージョンをインストールします(npm install <パッケージ名>)。
  • npm-check-updatesパッケージを使う方法
    • まず、npm install -g npm-check-updatesコマンドでnpm-check-updatesパッケージをグローバルにインストールします。
    • ncuコマンドでアップデートが必要なパッケージを確認し、ncu -uコマンドでpackage.jsonをアップデートするバージョンに更新します。
    • 最後にnpm installコマンドで新しいバージョンのパッケージをインストールします。

お読み頂きありがとうございました。