npmパッケージのバージョン管理 - Speaker Deck

npmパッケージのバージョン管理

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

npmパッケージのバージョン管理 

Slide 2

Slide 2 text

npmパッケージのバージョン管理 

Slide 3

Slide 3 text

してますか？ 

Slide 4

Slide 4 text

開発中のプロジェクトが  依存しているパッケージ 

Slide 5

Slide 5 text

把握してますか？ 

Slide 6

Slide 6 text

今回の勉強会の目的  ● 前提としてnpmの概要をおさらい、理解する  ● package.jsonを使ったnpmパッケージのバージョン管理の方法を知る  ● npmパッケージのバージョン管理の重要性を理解する       

Slide 7

Slide 7 text

npmとは  Node Package Manager  node.jsのモジュールを管理するツール 

Slide 8

Slide 8 text

npmとは  npmは、世界最大のソフトウェアレジストリです。あらゆる大陸のオープンソース開発者がnpmを使ってパッケージの共有や借用を行っており、多くの組織がnpmを使って個人の開発を管理しています。  https://docs.npmjs.com/about-npm

Slide 9

Slide 9 text

npmは、3つの独立した要素で構成されています。  ● webサイト  ● Command Line Interface   ● レジストリ  npmとは  https://docs.npmjs.com/about-npm

Slide 10

Slide 10 text

npmは、3つの独立した要素で構成されています。  ● webサイト  ● Command Line Interface   ● レジストリ  npmとは  https://docs.npmjs.com/about-npm

Slide 11

Slide 11 text

npmは、3つの独立した要素で構成されています。  ● webサイト  ● Command Line Interface   ● レジストリ  npmとは  https://docs.npmjs.com/about-npm

Slide 12

Slide 12 text

https://www.npmjs.com/ 

Slide 13

Slide 13 text

npmは、3つの独立した要素で構成されています。  ● webサイト  ● Command Line Interface   ● レジストリ  npmとは  https://docs.npmjs.com/about-npm

Slide 14

Slide 14 text

npmは、3つの独立した要素で構成されています。  ● webサイト  ● Command Line Interface   ● レジストリ  npmとは  https://docs.npmjs.com/about-npm

Slide 15

Slide 15 text

npmとは  $ npm install axios  

Slide 16

Slide 16 text

package.json  ・対話形式でよく使われる項目を設定し（未入力ならデフォルト値を設定してくれる）、 package.jsonを生成する    $ npm init

Slide 17

Slide 17 text

package.json  package.jsonが配置されているプロジェクトのルートディレクトリで  上記コマンドを実行することで、package.jsonの情報に応じたパッケージがローカルに一括インストールされる。  $ npm install

Slide 18

Slide 18 text

package.json  ・https://docs.npmjs.com/cli/v8/configuring-npm/package-json  ・name  ・version  ・description  ・keywords  　　・  　　・  　　・ 

Slide 19

Slide 19 text

package.json  ・https://docs.npmjs.com/cli/v8/configuring-npm/package-json  ・dependencies  ・devDependencies  ・peerDependencies  ・bundleDependencies  ・optionalDependencies    ・https://docs.npmjs.com/cli/v8/configuring-npm/package-json  ・dependencies  ・devDependencies  ・peerDependencies  ・bundleDependencies  ・optionalDependencies   

Slide 20

Slide 20 text

dependencies | package.json  ・https://docs.npmjs.com/cli/v8/configuring-npm/package-json#dependencies   ・プロジェクトが直接依存するパッケージを記載  ・パッケージ名とバージョンの範囲を記載する  ・$ npm install でdependenciesに追記される    "dependencies": { "axios": "^0.24.0" } 

Slide 21

Slide 21 text

devDependencies | package.json  ・https://docs.npmjs.com/cli/v8/configuring-npm/package-json#devdependencies   ・テストツールやタスクランナー等、開発に必要なパッケージを記載する  ・$ npm install --save-dev でdevDependenciesに追記される    "devDependencies": { "jest": "^27.4.5" }

Slide 22

Slide 22 text

バージョンの指定 | package.json  $ npm install axios  { "dependencies": { "axios": "^0.24.0" } }  

Slide 23

Slide 23 text

バージョンの指定 | package.json  0.24.0  セマンティックバージョニング  プロジェクトやライブラリをリリースする際のバージョン指定に関するルールを決めたもの  https://semver.org/lang/ja/  https://docs.npmjs.com/about-semantic-versioning 

Slide 24

Slide 24 text

メジャーバージョン：  大規模な変更が起き、過去のバージョンとの互換性が失われるとき   バージョンの指定 | package.json  0.24.0  マイナーバージョン：  過去のバージョンとの互換性は失われないが新規機能の開発や機能改善が行われたとき   パッチバージョン：  主にバグ修正が行われたとき 

Slide 25

Slide 25 text

バージョンの指定 | package.json  ^0.24.0  バージョンの範囲を指定する  https://github.com/npm/node-semver#ranges  ^  ~ 

Slide 26

Slide 26 text

バージョンの指定 | package.json  ^0.24.0  ^（キャレット）  ・一番左の0以外の数字を変更しないような変更を許容する    ^1.2.3 ≒ >=1.2.3 <2.0.0-0  ^0.2.3 ≒ >=0.2.3 <0.3.0-0  ^0.0.3 ≒ >=0.0.3 <0.0.4-0   

Slide 27

Slide 27 text

バージョンの指定 | package.json  ~0.24.0  ~（チルダ）  ・マイナーバージョンが指定されていればパッチバージョンの変更を許容する  ・指定されていなければマイナーバージョンの変更を許容する  ~1.2.3 ≒ >=1.2.3 <1.(2+1).0 ≒ >=1.2.3 <1.3.0-0  ~1.2 ≒ >=1.2.0 <1.(2+1).0 ≒ >=1.2.0 <1.3.0-0 (Same as 1.2.x)  ~1 ≒ >=1.0.0 <(1+1).0.0 ≒ >=1.0.0 <2.0.0-0 (Same as 1.x)   

Slide 28

Slide 28 text

package-lock.json  ・package.jsonだけでは、インストールされるパッケージのバージョンが毎回同じになる事は保証されない。  ・$npm install 実行時にpackage-lock.jsonが生成される  ・実際にインストールした全ての依存パッケージが記録される  "node_modules/axios" : { "version": "0.21.2", "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.2.tgz" , "integrity": "sha512-87otirqUw3e8CzHTMO+/9kh/FSgXt/eVDvipijwDtEuwbkySWZ9SBm6VEubmJ/kLKEoLQV/POhxXFb66bfekfg==" , "dependencies" : { "follow-redirects" : "^1.14.0" } }, axiosが依存するパッケージのバージョンも記載されている

Slide 29

Slide 29 text

なぜバージョン管理をする必要があるのか 

Slide 30

Slide 30 text

「バージョン固定ではダメなんですか？」 

Slide 31

Slide 31 text

バージョン管理をしない場合のデメリット  ・新しいバージョンで入る機能が使えない（開発効率の低下）  ↑これらの理由で特定のパッケージのバージョンを上げたくなる（もしくは上げる必要に迫られる）事になった時、最新バージョンと離れれば離れるほど、追従は難しくなっていく  ・セキュリティの修正が提供されずに、脆弱性を放置したままになりかねない   

Slide 32

Slide 32 text

どうやって管理する？ 

Slide 33

Slide 33 text

バージョンを上げる方法  　・$ npm outdatedコマンドと$ npm updateコマンド  　・バージョンロックファイルの削除と再生成    頻度とタイミング  　・できるだけ頻繁に定期的に、でも負担にならない頻度  　・依存パッケージに脆弱性が発見されたとき  　・自動化（dependabot, Renovate）  バージョン管理戦略  どの戦略をとっても、安全なリリースには充実したテストが必要

Slide 34

Slide 34 text

バージョン管理戦略  $ npm outdatedコマンドと$ npm updateコマンド  ・$ npm outdated コマンドで更新が必要なパッケージを確認  ・$ npm update コマンドでバージョンを更新する  $ npm outdated Package Current Wanted Latest Location Depended by axios 0.21.2 0.23.0 0.24.0 node_modules/axios npm-sample axiosの0.21.2がインストールされていて、package.jsonには^0.23.0の指定、  この時の最新バージョンが0.24.0  $ npm upgrade コマンド実行で、CurrentがWantedに揃うようにパッケージが更新される 

Slide 35

Slide 35 text

バージョンを上げる方法  　・$ npm outdatedコマンドと$ npm updateコマンド  　・バージョンロックファイルの削除と再生成    頻度とタイミング  　・できるだけ頻繁に定期的に、でも負担にならない頻度  　・依存パッケージに脆弱性が発見されたとき  　・自動化（dependabot, Renovate）  バージョン管理戦略  どの戦略をとっても、安全なリリースには充実したテストが必要

Slide 36

Slide 36 text

まとめ  ・担当プロジェクトのpackage.json、ざっと全体を見てみましょう  ・バージョン管理をしないデメリットはいざという時大きい  ・チームで最適な戦略を考えて、定期的なバージョン管理を  ・テストは書こう 

Slide 37

Slide 37 text

ありがとうございました 