こんにちは！ウィルゲートのフロントエンドエンジニア兼技術広報の小澤（@rikipedia_uw）です。
今回はフロントエンド開発に欠かせないnpm（Node Package Manager）ライブラリのアップデート確認方法をご紹介します。 弊社で運用しているnpmライブラリにアップデートがあるかどうかの確認フローは大きく分けると以下の通りです。 週次で実施してアップデートするかどうかを決定します。 各ライブラリの現在のバージョンと最新のバージョンを一覧で確認することができます。
補足しておくと、npmはパッケージのバージョンを以下の方法で管理しています。 パッケージのバージョンは、major.minor.patch と3つのパートに分解され、たとえば 3.14.1、0.42.0、2.7.18 といった形式で表されます。 バージョンの各パートは、それぞれ次のような異なるタイミングでインクリメントされます。 キャレット（ npmにはアップデートがあるかどうかを確認するコマンドは存在しますが、メジャーバージョンのアップデートまでは行ってくれません。
一方、 各ライブラリのアップデートが確認できたら、次は下記テンプレートに沿って内容を記述します。 どこか変更されたのか、なぜ変更されたのかをテンプレートに沿って記載し、メンバー間で確認します。
アップデートする場合はタスク化し、担当者に割り振ります。アップデートしない場合は理由を記載し、次の確認時にわかるようにしておきます。
上記のアップデートフローに沿って運用すれば更新の多いフロントエンドライブラリが原因で起こるバグを未然に防ぐことができます。
また、ドキュメントを残すことで後からプロジェクトに参画するメンバーもライブラリへの理解が早くなります。 今回紹介した
アップデートの確認フロー
npm-check-updatesを利用してアップデートを確認npm-check-updatesを利用してアップデートを確認する
npm-check-updatesはpackage.jsonの依存関係を最新バージョンにアップグレードしてくれるCLIツールです。npm-check-updatesをインストールしコマンドを実行します。$ npm install -g npm-check-updates
$ ncu # コマンド実行
[====================] 109/109 100%
@ライブラリ名 現在のバージョン → 最新のバージョン
@fortawesome/fontawesome-common-types ^0.2.15 → ^0.2.19
@fortawesome/fontawesome-svg-core ^1.2.15 → ^1.2.19
@fortawesome/free-regular-svg-icons ^5.7.2 → ^5.9.0
@fortawesome/free-solid-svg-icons ^5.7.2 → ^5.9.0
@react-pdf/renderer ^1.4.2 → ^1.6.2
....
Run ncu -u to upgrade package.json
major バージョンがインクリメントされるのは、パッケージの API に破壊的な変更を加えた時や、互換性のない変更を行った時です。
minor バージョンがインクリメントされるのは、後方互換性を維持したまま、新しい機能を追加した時です。
patch バージョンがインクリメントされるのは、後方互換性を維持したまま、バグを修正した時です。
依存関係のバージョン | Yarn^）やチルダ(~)などの接頭辞についてはこちらの記事に詳しく書いてあります。npm-check-updatesはメジャーバージョンのアップデートもしてくれるため、こちらを使って更新を確認します。アップデートの変更点をテンプレートに沿って記載する
## 担当者
## ライブラリ名
## ライブラリ概要
## アップデートによる変更
現在のバージョン→リリースされたバージョン
## リリースノート
>アップデートされたバージョンのリリースノートのURLを貼り付ける
## 備考
npm-check-updatesとテンプレートを使って運用することで、マイナーの機能追加やパッチのバグ修正をすぐに適用することができ、ライブラリによる不具合が少なくなります。終わりに
npm-check-updatesとテンプレートを活用したアップデート確認方法が読者の皆様の一助になれば幸いです。
