フロントエンド - ビルド・ツール

npm えぬぴーえむ

パッケージマネージャーNode.jspackage.jsonnode_modulesレジストリ依存関係

npmって何？よく聞くけどよくわからない

簡単に言うとこんな感じ！

npm は「JavaScript のアプリストア＆インストーラー」みたいなものだよ！誰かが作った便利なプログラム部品（パッケージ）を npm install の一言で自分のプロジェクトに追加できる仕組みなんだ。料理で言えば、スーパーで食材を買ってきて冷蔵庫に入れてくれる便利な宅配サービスみたいな感じ！

npmとは

npm（Node Package Manager） は、JavaScript のランタイム環境である Node.js に標準で付属するパッケージ管理ツールです。世界中の開発者が公開した JavaScript ライブラリ・ツールを、コマンド一つでプロジェクトへ追加・管理・削除できます。

npm には大きく2つの側面があります。ひとつは CLI（コマンドラインツール） としての npm ― 開発者が日々使うコマンド群です。もうひとつは レジストリ（公開リポジトリ） としての npm ― 200万件以上のパッケージが登録されている巨大なクラウドデータベースです。この2つが組み合わさることで「探す → インストール → 使う」の流れがシームレスになっています。

ビジネスの現場では、Web サービスやスマートフォンアプリの開発チームが npm を使うのは当たり前の前提になっています。「npm を使っている」というのは特別なことではなく、JavaScript 開発における標準インフラ と理解しておくとよいでしょう。

npmの主要な概念と構造

概念	説明	実務上のポイント
package.json	プロジェクトの設計書。使用するパッケージ一覧・バージョン・スクリプトを記録	このファイルさえあれば `npm install` で環境を再現できる
node_modules/	インストールしたパッケージの実体が入るフォルダ	巨大になるので Git 管理対象外にするのが鉄則
package-lock.json	依存パッケージの完全なバージョンスナップショット	チームで「全員が同じバージョン」を使うために重要
レジストリ	パッケージが公開されているクラウド上の倉庫（registry.npmjs.org）	npm install 時にここからダウンロードされる
スコープ	`@会社名/パッケージ名` 形式で名前空間を区切る仕組み	社内限定パッケージを `@mycompany/xxx` で管理できる

よく使うコマンドの覚え方

頻出コマンドを「い・ア・ア・ラ」で覚えましょう。

操作	コマンド	意味
いれる	`npm install`	パッケージをインストール
アンインストール	`npm uninstall パッケージ名`	パッケージを削除
アップデート	`npm update`	パッケージを更新
ラン	`npm run スクリプト名`	package.json に書いたコマンドを実行

バージョン指定の記号（semver）

npm は セマンティックバージョニング（semver） という メジャー.マイナー.パッチ の形式でバージョンを管理します。

^1.2.3  → 1.x.x の範囲で最新（マイナー・パッチは自動更新 OK）
~1.2.3  → 1.2.x の範囲で最新（パッチのみ自動更新 OK）
 1.2.3  → 完全固定（このバージョンのみ）

^（キャレット）が一番よく見かける表記で、「メジャーバージョンが変わらない限り新しいものを使う」という意味です。

歴史と背景

2009年 ― Node.js が Ryan Dahl によって公開。サーバーサイドで JavaScript を動かせるようになった
2010年 ― Isaac Z. Schlueter が npm を開発・公開。Node.js のパッケージ共有インフラとして急速に普及
2011年 ― npm が Node.js に同梱されるようになり、インストールの手間がなくなった
2014年頃 ― フロントエンド開発でも npm が主流に。Browserify・Webpack と組み合わせてブラウザ向けにも使われ始める
2016年 ― Facebook が Yarn を公開。npm の速度・セキュリティ問題への回答として注目を集め、npm 側の改善を促す
2017年 ― npm v5 で package-lock.json が導入。再現性の問題が大幅に改善
2019年 ― npm 社が GitHub（Microsoft）に買収される
2020年 ― npm v7 で ワークスペース（monorepo） サポートが強化
2022年〜現在 ― pnpm が高速・省ディスクの代替として台頭。npm・Yarn・pnpm の3強時代に

npm と主要な代替ツールの比較

npm のほかにも JavaScript のパッケージマネージャーは複数存在します。発注・選定の場面で「どれを使っているか」を確認することがあるため、主要な違いを把握しておきましょう。

いずれのツールも レジストリは同じ npmjs.com を使います。「どのツールを使うか」は作業効率やプロジェクト規模の問題であり、利用できるパッケージに違いはありません。

package.json の基本構造

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "build": "webpack --mode production",
    "test":  "jest"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "webpack": "^5.88.0",
    "jest":    "^29.5.0"
  }
}

dependencies（本番に必要）と devDependencies（開発時のみ必要）の2種類があります。npm install --production とすると devDependencies はインストールされないため、本番サーバーへのデプロイを軽量にできます。

規格・文書	内容
CommonJS Modules 仕様	npm パッケージが従う `require()` / `module.exports` のモジュール仕様
semver 仕様	npm のバージョン指定に使われるセマンティックバージョニングの公式仕様