package.jsonとは?package-lock.jsonとは?

2021/10/07

(最終更新: 2022/9/10

はじめに

今回の記事の目的

ReactアプリやNode.jsのExpressでアプリを作ると自動で作成されるpackage.jsonファイルと、package-lock.jsonファイルの意味をメモ。

package.jsonの役割

ざっくり理解では以下。

  • npm(パッケージ管理ツール)で利用されるファイル。
  • このプロジェクトで、インストールするしておくべきパッケージ(と、そのバージョン)を定義したもの。

npm installというコマンドを打つだけで、package.jsonで定義した通りにパッケージをインストールしてくれる。

何が良いのか?

package.jsonさえ同じものを使えば、誰でも同じ開発環境が構築できること。

  • パッケージの実物(node_modulesフォルダ配下)は容量が大きすぎて共有できない
  • パッケージ同士の依存関係も解決してくれる。

依存関係とは、「あるプログラムのビルドや実行のために、別のプログラムが必要であること」。ここでは、あるモジュールを使うためにほかのモジュールが必要であることや、特定のバージョンを利用する必要があることなどを表す。

nvmnpmの違い

  • nvmは、Node.jsのバージョンを管理するツール。
  • npmは、Node.jsのパッケージ(モジュール)とそのバージョンを管理するツール。

package.jsonのある場所

プロジェクトフォルダの直下に作成する。

npm initでNode.jsプロジェクトを開始すると自動で生成される。

プロジェクトフォルダの中身

package.jsonの中身

あくまで一例だが、イメージは以下。

package.json
{
  "name": "jakee-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "axios": "^0.21.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

全ては把握していないが、大事なのは

"dependencies": {
 ・・・
}

の部分。

$ npm install [パッケージ名]

でパッケージをインストールすると、package.json"dependencies"の中にパッケージの情報が追記される。

package-lock.jsonとは

パッケージのバージョンを完全にロックするためのもの。

package.jsonだけでは、インストールするタイミングによってパッケージのバージョンが変わってしまうことがある。バージョンを「ロック」するのがpackage-lock.json

チームメンバーの開発環境に自分と同じパッケージをインストールしてほしい場合、package.jsonだけでは完全に再現はできない。

先ほどの例にあった

"axios": "^0.21.4",

を見るとわかる。

この例では、「axiosパッケージをバージョン0.x.xでインストールすること」までしか規定していない。

npmでは、バージョン指定に^をつけると、メジャーバージョンまでを規定する。

package-lock.jsonを使えば、チームメンバーの環境でnpm installを実行することでバージョンを含めて完全再現することができる。

package-lock.jsonの中身

一例ではあるが中身は以下。

package-lock.json
{
  "name": "react",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@babel/code-frame": {
      "version": "7.14.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
      "requires": {
        "@babel/highlight": "^7.14.5"
      }
    },
 ・・・(省略)
}

【参考】yarn.lockとは

nvmの上位互換であるパッケージマネージャ「yarn」を使う場合は、package-lock.jsonの代わりに yarn.lock ファイルを利用する。

書き方は少し変わる。

yarn.lock
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


"@babel/code-frame@7.10.4":
  version "7.10.4"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
  dependencies:
    "@babel/highlight" "^7.10.4"

おわりに

Node.jsやReactでパッケージをインストールする際に不可欠な、package.jsonpackage-lock.jsonのざっくり概要を理解できた。

参考文献



個別連絡はこちらへ→Twitterお問い合わせ

プロフィール

プロフィールイメージ

はち子

事業会社のシステム部門で働きはじめて5年目の会社員。システム企画/要件定義/システムアーキテクチャ等。

Twitter→@bun_sugi

過去の記事について

はてなブログに掲載の記事(主にプログラミングメモ)についてはこちらに掲載しております。(本ブログに移行中)

タグ一覧

関連記事

Copyright© 2023, エンジニアを目指す日常ブログ

お問い合わせ|プライバシーポリシー