「npm install」とか「npm run dev」って何?

プログラミングを始めた方なら、一度は見たことがあるこのコマンド。
でも「npm」って一体何なのか、ちゃんと理解している人は意外と少ないかもしれません。

この記事では、npmとは何か、何ができるのか、どう使うのかを、初心者の方にもわかりやすく解説します!

npmとは? 3秒でわかる概要

npm（Node Package Manager） は、JavaScriptのパッケージ管理ツールです。

スマホのアプリストアをイメージしてください。

App StoreやGoogle Play → アプリをインストールする場所
npm → JavaScriptのライブラリやツール（パッケージ）をインストールする場所

つまり、npmは開発者がアプリケーションで利用するライブラリやコードのインストール、共有、管理をするためのJavaScriptパッケージマネージャーです。

npmの正式名称と歴史

正式名称

npmは元々「Node Package Manager」の略でしたが、誤解を招くとして後に変更され、現在は正式には略称ではありません。

ただし、多くの開発者は今でも「Node Package Manager」の意味で使っています。

簡単な歴史

2010年: Node.jsと共に登場
2016年: Yarn（Facebook製）が登場し、npmの課題を解決
2020年: GitHub（Microsoft）がnpmを買収
2025年現在: npm、yarn、pnpmの3つが主流

npmが解決する3つの問題

問題1: ライブラリを手動でダウンロードするのが面倒

npmがない世界

1. Reactの公式サイトに行く
2. ZIPファイルをダウンロード
3. 解凍してプロジェクトに配置
4. HTMLファイルに<script>タグを追加
5. バージョンアップの度に1〜4を繰り返す

npmがある世界

npm install react

たったこれだけ!

問題2: 依存関係の管理が複雑

例えば、あなたが「パッケージA」をインストールしたとします。でも実はこんなことが起きていたりします↓

パッケージA
├── パッケージB が必要
│   └── パッケージD が必要
└── パッケージC が必要
    └── パッケージE が必要

npmを使用することにより、パッケージ同士の依存関係や競合関係を解決してくれるメリットがあります。つまり、BもCもDもEも自動でインストールしてくれるんです!

問題3: チーム開発で環境が揃わない

Aさんのパソコン: Reactバージョン 17.0.0
Bさんのパソコン: Reactバージョン 18.0.0

→ これでは動かず、バグが起きることがあります!

npmはpackage.jsonというファイルで「このプロジェクトはReact 18.0.0を使います」と記録し、チーム全員が同じ環境で開発できるようにします。

Node.jsとnpmの関係

Node.jsとは?

JavaScriptは本来ブラウザでしか動かないプログラミング言語でしたが、Node.jsを使うことでパソコン上でも動かせるようになりました。

例えばこんなこと

サーバーの構築
ファイルの読み書き
データベースへの接続
コマンドラインツールの作成

npmとNode.jsの関係

Node.jsをインストールすると、npmも一緒についてきます。

つまり

Node.js (JavaScript実行環境)
└── npm (パッケージマネージャー)

両方セットで使うのが基本です!

npmでできること

1. パッケージのインストール

# Reactをインストール
npm install react

# 短縮形
npm i react

2. パッケージの削除

npm uninstall react

# または
npm remove react

3. パッケージの更新

# すべてのパッケージを更新
npm update

# 特定のパッケージのみ
npm update react

4. スクリプトの実行

# 開発サーバーを起動
npm run dev

# ビルド
npm run build

# テスト
npm test

5. プロジェクトの初期化

npm init

# すべてデフォルトで作成
npm init -y

6. セキュリティチェック

# 脆弱性をスキャン
npm audit

# 自動修正
npm audit fix

基本的なnpmコマンド一覧

コマンド	説明	使用例
`npm init`	新規プロジェクト作成	`npm init -y`
`npm install`	package.json記載の全パッケージをインストール	`npm install`
`npm install <パッケージ名>`	特定のパッケージをインストール	`npm install react`
`npm install -D <パッケージ名>`	開発環境専用でインストール	`npm install -D eslint`
`npm install -g <パッケージ名>`	グローバル(PC全体)にインストール	`npm install -g typescript`
`npm uninstall <パッケージ名>`	パッケージを削除	`npm uninstall react`
`npm update`	パッケージを更新	`npm update`
`npm run <スクリプト名>`	package.jsonのスクリプトを実行	`npm run dev`
`npm start`	startスクリプトを実行（省略形）	`npm start`
`npm test`	testスクリプトを実行	`npm test`
`npm list`	インストール済みパッケージ一覧	`npm list`
`npm outdated`	古くなったパッケージを表示	`npm outdated`
`npm audit`	セキュリティチェック	`npm audit`
`npm --version`	npmのバージョン確認	`npm -v`
`npm help`	ヘルプ表示	`npm help`

package.jsonとは?

package.jsonは、プロジェクトの設定ファイルです。

実際の例

{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "description": "素晴らしいアプリ",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "eslint": "^8.50.0"
  }
}

各項目の意味

name: プロジェクト名
version: バージョン番号
scripts: 実行できるコマンド（npm run devなど）
dependencies: 本番環境でも必要なパッケージ
devDependencies: 開発環境でのみ必要なパッケージ（テストツールなど）

バージョン番号の見方

"react": "^18.2.0"

^18.2.0 → 18.x.xまでOK（マイナーアップデートは許可）
~18.2.0 → 18.2.xまでOK（パッチのみ許可）
18.2.0 → 完全に固定

node_modulesの正体

node_modulesとは?

npm installを実行すると、プロジェクトフォルダにnode_modulesというディレクトリが作られます。

my-project/
├── node_modules/    ← ここにすべてのパッケージが入る
│   ├── react/
│   ├── react-dom/
│   └── ... (数百〜数千個!)
├── package.json
└── package-lock.json

注意点

めちゃくちゃ重い: 数百MB〜数GB になることも
Gitにコミットしない: .gitignoreに必ず追加
削除しても大丈夫: npm installで復元可能

なぜGitにコミットしないの?

ファイル数が多すぎる（数万ファイル）
容量が大きい
package.jsonがあれば誰でも復元できる

やること

# .gitignoreに追加
echo "node_modules/" >> .gitignore

npm vs yarn vs pnpm

JavaScriptやTypeScriptのプロジェクトでは、代表的な3つのパッケージマネージャー「npm」「yarn」「pnpm」があります。

3つの比較表

項目	npm	yarn	pnpm
リリース年	2009年	2016年	2017年
開発元	GitHub（Microsoft傘下）	Meta（旧Facebook）	独立プロジェクト
インストール速度	普通	速い	超高速
ディスク使用量	多い	多い	最小
初期設定	不要（Node.js同梱）	要インストール	要インストール
モノレポ対応	△	◎	◎
2025年の人気度	依然として高い	普通	急上昇中

それぞれの特徴

npm

✅ Node.jsに標準搭載で環境構築が最も簡単
✅ 最も広く使われていて情報が多い
✅ シンプルで学習コストが低い
❌ 速度とディスク容量ではpnpmに劣る

yarn

✅ 高速インストール
✅ オフラインキャッシュ機能
✅ モノレポ（ワークスペース）に強い
❌ Yarn 2以降は仕様が大きく変わった
❌ 新規プロジェクトでの採用は減少傾向

pnpm

✅ ディスク使用量を最大80%削減
✅ シンボリックリンクでパッケージを共有し、GBレベルの容量を節約
✅ Next.js、Vite、Nuxt、Astro、Prismaなどが2022-24年に移行
✅ 厳密な依存関係管理でバグを防ぐ
❌ まだnpmほど普及していない
❌ 一部の古いツールで互換性問題の可能性

おすすめ

個人開発や小規模プロジェクト、学習目的: pnpmを第一候補として推奨。ディスクスペースの節約とインストール速度は開発体験を大きく向上させます。

チーム開発や既存プロジェクト: プロジェクトで使われているツールに従うのが鉄則。package-lock.jsonがあればnpm、yarn.lockがあればyarn、pnpm-lock.yamlがあればpnpmを使います。

初心者の方: 私含め初心者の方であれば、まずはnpmから始めるのが無難です。Node.jsに標準で入っているので環境構築が簡単です。

まとめ

npmを一言で説明すると

「JavaScriptのライブラリを簡単にインストール・管理できるツール」

覚えておきたい重要ポイント

npmはNode.jsと一緒に入ってくる → 別途インストール不要
package.jsonがプロジェクトの設計図 → これが最重要
node_modulesはGitに入れない → .gitignoreに追加
依存関係は自動で解決してくれる → 深く考えなくてOK
2025年はpnpmも選択肢に入れよう → 高速で容量節約

次のステップ

npmの基礎を理解したら、次はこれらにチャレンジ:

npm scriptsを書いてみる → npm run devなどを自作
人気パッケージを試す → React、Express、Viteなど
自分のパッケージを公開 → npmレジストリに登録
pnpmに挑戦 → 高速化を体感

参考リンク