package.jsonとpackage-lock.jsonの違い

package.jsonとpackage-lock.jsonの共通点

両方とも、
プロジェクトに必要なパッケージをインストールするために参照されるファイル。

package.jsonの場合：
npm installを実行 → node_modules にパッケージがインストールされる

pacakge-lock.jsonの場合：
npm ciを実行 → node_modules にパッケージがインストールされる

料理のレシピの材料欄のように、
「この料理を完成させるための材料リスト」を示す。

package.json

• 役割：使いたいパッケージの種類やバージョンのざっくりした範囲を示す
• イメージ：レシピの材料で「卵：3~5個」のように範囲指定

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.0"
  }
}

ここではexpressの^4.18.0バージョンが指定されているが、^がついているということは4.x.xも許容される範囲内ということ。

package-lock.json

• 役割：実際にインストールしたパッケージの正確なバージョンや依存関係を記録する
• イメージ：レシピの材料で「卵：大きさ=中 5個」と実際に使われたものが記録

{
  "name": "my-project",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "dependencies": {
    "express": {
      "version": "4.18.2",
      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
      "integrity": "sha512-xxxx...",
      "requires": {
        "body-parser": "1.20.1"
      }
    },
    "body-parser": {
      "version": "1.20.1",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
      "integrity": "sha512-yyyy..."
    }
  }
}

実際にインストールしたexpressのバージョン4.18.2が記載されている。
またexpressが依存しているbody-parserというパッケージも記録されている。

プロジェクト参画後に使うシチュエーション

1. プロジェクト参画後直後に開発環境を合わせる場合

1. git clone <repo-url>
↓
2. cd <project-dir>
↓
3. npm ci
↓
4. npm run dev 

npm ci は必ず package-lock.json の内容通りにインストールするため、チーム全員が同じ依存環境を再現できる。

1. プロジェクトに新しくライブラリを追加・インストールする場合

1. npm install <package-name>
↓
2. git add package.json package-lock.json
↓
3. git commit -m "Add <package-name>"
↓
4. git push

npm install は package.json のバージョン範囲を基にインストールするので、依存関係が変わった場合は package-lock.json も更新される。変更をチームへ共有するために、両方のファイルをコミット・プッシュする必要がある。