package.json に記載されているパッケージのバージョンアップ方法 【 npm-check-updates, outdated 】

# はじめに
package.json に記載されているパッケージのバージョンアップには npm-check-updates というツールがとても便利なので紹介したいと思います。

# 結論

package.json に記載されているパッケージのバージョンアップ方法は以下の 2 つの方法があります。

- 方法 1 : npm outdated コマンドを使う
  - npm outdated コマンドを実行し、アップデート情報を確認して、パッケージをひとつひとつ丁寧にアップデートする
- 方法 2 : npm-check-updates パッケージをつかう ← **おすすめ！**
  - npm-check-updates パッケージを利用して、アップデート情報を確認して、すべてパッケージをまとめてアップデートする

**手間を考えると npm-check-updates の方が楽です。**

# そもそもバージョンアップなら npm update でいいのでは？

たしかに `npm update` や `npm update <package>` のコマンド実行によって package.json の内容から依存関係のバージョンの記載の範囲内の最新版をインストールして package-lock.json や node_modules を更新します。

**しかし、package.json の `dependencies` や `devDependencies` に記載されている範囲の中での最新のバージョンでアップデートするので、package.json に記載されているバージョンが低ければ、世の中に更新されている最新のバージョンには更新されません。**

例：`^3.2.1` と記載されている場合、`4.0.0` が世の中にリリースされても `npm update` では気づけない。

（正直、グローバルインストールしたパッケージをバージョンアップする場合を除いて `npm update` が必要となるケースがあまりわかりません。基本的に `npm install` でこと足りると思ってます。）

# 方法 1 : npm outdated コマンドを使う

## npm outdated の挙動

インストールしたパッケージに新しいバージョンが存在するかどうか確認することができる `npm outdated` というコマンドがあります。

`npm outdated` と実行すると package.json に記載されているパッケージのアップデート情報を教えてくれます。


```shell
# あえて古いバージョンの cowsay をインストールする
$ npm install cowsay@1.2.0
+ cowsay@1.2.0

# package.json の確認
$ cat package.json
{
  （省略）
  "dependencies": {
    "cowsay": "^1.2.0"
  },
  （省略）
}

# npm outdated の実行で 1.2.0 → 1.4.0 のアップデートが可能なことを教えてくる
$ npm outdated            
Package  Current  Wanted  Latest  Location
cowsay     1.2.0   1.4.0   1.4.0  typescript-node-base
```

しかし、`npm outdated` は最新バージョンがあることを教えてくれるだけで、**バージョンアップまではしてくれません。**

## バージョンアップ手順

package.json に記載されているパッケージのバージョン情報をアップデートしたい場合は以下の手順を踏む必要があります。

1. `npm outdated` で新しいバージョンがリリースされてないか確認する
2. 新しいバージョンがリリースされていた場合、該当のパッケージをアンインストールする
3. `npm install <package>` で再度パッケージをインストールする

しかし、この手順では、たくさんのパッケージを管理していると 2. の手順でバージョンアップのあるパッケージに対して1つ1つパッケージを再インストールしなければならないので大変です。


# 方法 2 : npm-check-updates を使う

`npm-check-updates` というパッケージを使用すればとても以下のコマンドだけの手順でアップデートが可能です。

1. `ncu` コマンドの実行 （アップデート情報の確認）
2. `ncu -u` コマンドの実行（package.json の更新）
3. `npm install` コマンドの実行（更新された package.json をもとにパッケージをインストール）

実行例は以下の通りです。`cowsay` の古いパッケージを package.json ごとアップデートします。

```shell
# package.json の状況
$ cat package.json
{
  （省略）
  "dependencies": {
    "cowsay": "^1.2.0"
  },
  （省略）
}

# ncu でアップデート可能なパッケージの確認（ほとんどの記事ではグローバルインストールしていますが使用頻度は多くないと思うので npx での実行でもいいと思います）
$ npx -p npm-check-updates  -c "ncu"
npx: 285個のパッケージを6.971秒でインストールしました。
Checking package.json
[====================] 2/2 100%

 cowsay  ^1.2.0  →  ^1.4.0   

Run ncu -u to upgrade package.json


# ncu -u を実行すると package.json が更新される
$ npx -p npm-check-updates  -c "ncu -u"
npx: 285個のパッケージを6.971秒でインストールしました。
Checking package.json
[====================] 2/2 100%

 cowsay  ^1.2.0  →  ^1.4.0   

Run npm install to install new versions.


# package.json が更新していることの確認
$ cat package.json
{
  （省略）
  "dependencies": {
    "cowsay": "^1.4.0"
  },
  （省略）
}


# 更新された package.json をもとに npm install の実行
$ npm install
```

サンプルはわかりやすいように1つのパッケージしか入っていませんが、複数のパッケージが入っていても `ncu -u` ですべてのパッケージが一度にアップデートされます。

また、特定のパッケージだけを指定できたり、正規表現で複数のパッケージも指定できたり、マイナーバージョン以上、またはパッチバージョン以上のバージョンアップを指定できたり、いろいろとできるようです（詳しくは公式リファレンス参照）。


【参考】
[npm installしたパッケージの更新確認とアップデート(npm-check-updates)](https://dackdive.hateblo.jp/entry/2016/10/10/095800)

# 【参考】 depcheck



[depcheck](https://github.com/depcheck/depcheck) という使用されていないパッケージを教えてくれるツールもありました。
アップデートの検討を考える前にこのツールを使って不要なパッケージは削除してしまった方がいいと思います。

使い方は `npx depcheck` とコマンド実行するだけです。

使用例：

```shell
# 未使用パッケージ削除前
$ npx depcheck
npx: 108個のパッケージを6.778秒でインストールしました。
Unused dependencies
* bootstrap
* jquery
* path
Unused devDependencies
* babel-eslint
* casperjs

# 未使用パッケージ削除後
$ npx depcheck
npx: 108個のパッケージを4.581秒でインストールしました。
No depcheck issue
```

【参考】
npx については以下の記事で解説しています。
・ [npm でローカルインストールしたパッケージを CLI でコマンド実行する方法（npm-srcipts, npx）](https://qiita.com/sugurutakahashi12345/items/b814a09b65d8852226ad)

# 公式リファレンス

- npm outdated
  - https://docs.npmjs.com/cli/outdated
- npm-check-updates
  - https://github.com/tjunnone/npm-check-updates
  - オプション一覧：https://github.com/tjunnone/npm-check-updates#options