【えぬぴーえむ】

npm とは?

💡 JavaScript界の「部品カタログ&配送センター」
📌 このページのポイント
npm — パッケージ管理のフロー npmレジストリ 100万以上のパッケージ registry.npmjs.org 開発者 npm install package.json "react": "^18.0" "express": "^4.0" 依存関係を記録 node_modules/ パッケージ実体 ダウンロード npm publish npm install npm update npm publish npm run build
npm(パッケージ管理)のイメージ
ひよこ ひよこ

npmって何?

ペンギン先生 ペンギン先生

JavaScriptプログラムを作るとき、便利な部品(パッケージ)を世界中から取り寄せて使えるようにするツールだよ。ホームセンターのカタログで「この工具ほしい」って注文したら、すぐ届けてくれるようなイメージだね。

ひよこ ひよこ

パッケージってどんなものがあるの?

ペンギン先生 ペンギン先生

日付の計算を簡単にするもの、画像を加工するもの、Webサーバーを立てるもの…本当にいろいろあるよ。「車輪の再発明」をしなくていいように、誰かが作ってくれた便利な道具を使わせてもらうんだ。

ひよこ ひよこ

npm installってやるだけでいいの?

ペンギン先生 ペンギン先生

そう!ターミナルで「npm install パッケージ名」と打つだけ。すると「node_modules」というフォルダにダウンロードされて、自分のコードから使えるようになるよ。依存関係も自動で解決してくれるんだ。

ひよこ ひよこ

package.jsonって何のためにあるの?

ペンギン先生 ペンギン先生

プロジェクトが使っているパッケージの一覧表だよ。他の人がそのプロジェクトを使うとき「npm install」だけで全部のパッケージがまとめて入るんだ。レシピの材料リストみたいなものだね。

ひよこ ひよこ

yarnとかpnpmとか聞くけど、npmと何が違うの?

ペンギン先生 ペンギン先生

どれも同じ「パッケージ管理ツール」なんだけど、速度や重複ファイルの扱いが違うんだ。特にpnpmは同じパッケージをプロジェクトごとにコピーせずハードリンクで共有するから、ディスク容量を大幅に節約できる。ただ、node_modulesの中身がシンボリックリンクだらけになるから、ファイルパスを直接参照しているツールが壊れることがあって、ベテランでも移行時に詰まるポイントなんだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「npm」って出てきたら「JavaScriptの便利な部品を検索・インストール・管理するツールだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Node Package Manager」 = Node.jsのパッケージ管理者
💬 公式には「npmは何かの略語ではない」と言っているけど、実質Node Package Managerの略として広まったよ
← 用語集にもどる