パッケージ管理とは — npm install で何がどこに入るか

この記事は、パッケージ管理を扱います。

npm install のような 1 行で外部のライブラリを名前で取り寄せ、決まった場所に置く仕組みです。

打つのは左の 1 行だけで、増えるのは右の 2 つです。

増えるのは node_modules というフォルダと package.json の 1 行だけで、自分で書いた app.js は 1 文字も変わりません。

パッケージとは — 名前を指定して取り寄せる外部ライブラリ

取り寄せられる形にまとめたものがパッケージ（package。外部ライブラリを、名前を指定して取り寄せられる形にまとめたもの）で、その時点の中身を示す番号がバージョン（version）です。

予約アプリ my-app で日付を見やすく表示したいとき、同じ処理は自分でも書けますが、パッケージとしても配られています。

左は書いた行がすべて自分のものになり、右は取り寄せたものを 1 行で呼び出すだけです。

取り寄せるときに指定するのは、いちばん上の名前だけです。

いちばん下の「必要とする他のパッケージの名前」が、あとでフォルダの数を増やします。

パッケージは、名前で取り寄せられる外部ライブラリ

パッケージとは、他の人が書いたプログラムを、名前を付けて配れる形にしたものです。

名前を指定すればその中身を自分のパソコンに持ってこられ、バージョンは同じ名前の中で改訂を見分けるための番号です。

npm install react を打つと、my-app の中に何ができるか

名前を指定して取り寄せるのがパッケージ管理ツール（package manager。パッケージを取り寄せ、決まった場所に置くプログラム）で、JavaScript のものが npm です。

打ち方はターミナルで 1 行だけで、どちらも my-app の中で打つことが前提です。

# my-app のフォルダに移動してから打つ
cd my-app

# react という名前のパッケージを 1 つ取り寄せる
npm install react

# 一覧ファイルに並んでいる名前を、まとめて取り寄せる
npm install

取り寄せたパッケージが入るのがnode_modules（npm が my-app の中に作る、取り寄せたパッケージを置くフォルダ）です。

自分で書くファイルと、npm が作るフォルダは、同じ my-app の中で分かれています。

同じ 1 行でも、打ち方や名前の間違いで結果は変わります。

3 行目のように打ち間違えた名前が配布サイトに無ければ、何も入りません。

打ち間違えた名前が偶然実在すると別のものが入ってしまうので、名前は公式のページから写します。

react が必要とするパッケージ、さらにその先が必要とするパッケージまで一緒に来ます。

この数を自分で調べて 1 つずつ取り寄せずに済むことが、パッケージ管理ツールを使う理由です。

取り寄せるのは 1 つでも、node_modules にできるフォルダは 1 つとは限りません。

配布サイトは、インターネットの向こうにある別のコンピュータです。

取り寄せたパッケージが置かれるのは、my-app フォルダの中の node_modules だけです。

自分が書いた app.js は、その中のパッケージを呼び出して使います。

取り寄せたものは node_modules に入る

取り寄せたものが入るのは、my-app の中にできる node_modules というフォルダです。

自分で書いた app.js は変わらず、フォルダが指定した数より増えるのは、取り寄せたものがさらに必要とするものまで一緒に来るからです。

package.json — 取り寄せたパッケージの名前が並ぶ一覧ファイル

node_modules の中身は npm が作ったもので、自分では書き換えません。

自分が管理するのは、取り寄せた名前が並ぶ 1 つのファイルだけです。

それが一覧ファイル（JavaScript では package.json。そのアプリが動くために要るパッケージの名前を書いておくファイル）で、ここに並ぶ名前 1 つ 1 つを依存（dependency。自分のコードが動くために必要なパッケージ）といいます。

{
  "name": "my-app",
  "dependencies": {
    "react": "^19.0.0",
    "express": "^5.1.0"
  }
}

dependencies の中に並ぶ 2 つが、この my-app の依存です。

右側が取り寄せるバージョンの指定で、数字はこの例のためのもので、実際には取り寄せた時点のものが入ります。

先頭の ^ は「書いてある番号と互換性のある新しいバージョンも許す」という印です。

package.json には、依存のほかにも書いてあるものがあります。

npm install が読むのは、真ん中の dependencies の部分です。

同じ 1 つのものが、どこから見るかで 3 つの呼び名になります。

一覧ファイルがあるおかげで、node_modules を人に渡さずに済みます。

渡すのは app.js と package.json で、相手は npm install を 1 回打つだけです。

npm が読むのは package.json の dependencies だけで、そこに並ぶ名前を配布サイトから取り寄せて node_modules を作り直します。

node_modules をそのまま渡す必要はありません。

名前の一覧さえあれば、中身は作り直せる

package.json は、この my-app が動くために要るパッケージの名前を並べたファイルです。

npm install はこのファイルを読んで名前をまとめて取り寄せるので、node_modules はいつでも作り直せ、人に渡す必要もありません。

Python でも同じ — pip と requirements.txt、置き場所を分ける仮想環境

ここまでは JavaScript の名前で見てきました。

Python でも、名前が違うだけで、していることは同じです。

取り寄せるのが pip、名前を並べる一覧ファイルが requirements.txt です。

役割が同じなので、片方を覚えればもう片方も同じように読めます。

1 つだけ違うのが置き場所で、仮想環境を作っていないと pip はパソコン全体に入れようとします。

これを避けるために作るのが仮想環境（virtual environment。そのアプリ専用のパッケージの置き場所を、フォルダとして作る仕組み）です。

アプリごとにフォルダが分かれていれば、同じ名前の違うバージョンが並んでもぶつかりません。

手順書が最初に仮想環境を作らせるのは、この分かれ目を作るためです。

言語が違っても、3 つの役割は同じ

どの言語にも、取り寄せるプログラムと、名前を並べる一覧ファイルと、入ったものの置き場所があります。

JavaScript では npm と package.json と node_modules、Python では pip と requirements.txt で、Python だけは仮想環境を作らないと置き場所がパソコン全体になります。