npm入門|package.jsonの読み方・npm installの仕組み・scriptsの活用法を解説
目次
npmとは何か・なぜ必要か
npm(Node Package Manager)は、Node.jsに付属するパッケージマネージャーです。JavaScriptのエコシステムで公開されているライブラリ(パッケージ)を手軽にインストール・管理するためのツールです。
例えばReactを使うには、公式サイトからファイルをダウンロードしてHTMLに読み込む代わりに、以下のコマンド1行でインストールできます。
npm install react react-dom
npmがなかった時代は、ライブラリのダウンロード、バージョン管理、依存関係の解決を全て手動で行う必要がありました。npmはこれらを自動化し、チーム全員が同じ依存関係でプロジェクトを動かせるようにします。
npmのインストール状況の確認:
node --version # Node.jsのバージョン(例: v20.11.0)
npm --version # npmのバージョン(例: 10.2.4)
Node.jsをインストールするとnpmも一緒にインストールされます。
npm init でプロジェクトを開始する
新規プロジェクトでは、まずnpm initでプロジェクトを初期化します。
mkdir my-project
cd my-project
npm init
対話形式でプロジェクト情報を入力する画面が表示されます。全てデフォルトでよければ-yフラグを付けると質問をスキップできます。
npm init -y
# package.jsonが自動生成される
package.jsonの構造を読む
package.jsonはプロジェクトの「設定ファイル」です。依存パッケージやスクリプトなどのメタ情報を管理します。
{
"name": "my-project",
"version": "1.0.0",
"description": "サンプルプロジェクト",
"main": "index.js",
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js",
"build": "vite build",
"test": "jest"
},
"dependencies": {
"express": "^4.18.2",
"axios": "^1.6.0"
},
"devDependencies": {
"nodemon": "^3.0.2",
"jest": "^29.7.0",
"typescript": "^5.3.3"
},
"engines": {
"node": ">=18.0.0"
},
"license": "MIT"
}
各フィールドの意味を解説します。
name / version
プロジェクトの名前とバージョンです。npmレジストリに公開する場合は一意である必要があります。プライベートなプロジェクトでは"private": trueを追加するとうっかり公開するミスを防げます。
scripts
npm run <スクリプト名>で実行できるコマンドを定義します。startとtestはnpm start・npm testと短縮して実行できます。
dependencies
アプリの実行に必要なパッケージです。npm install expressを実行すると自動的にここに追加されます。
devDependencies
開発時にのみ必要なパッケージです。テストフレームワーク、型チェックツール、バンドラーなどが該当します。npm install --save-dev jestで追加します(-Dフラグでも同じ)。
本番サーバーにデプロイする際はnpm install --productionとすることでdevDependenciesのインストールをスキップでき、サイズを小さくできます。
バージョン指定のルール(セマンティックバージョニング)
バージョン番号はメジャー.マイナー.パッチの形式です。
| 指定 | 意味 |
|---|---|
"4.18.2" | バージョン4.18.2固定 |
"^4.18.2" | 4.x.x の最新(メジャー固定) |
"~4.18.2" | 4.18.x の最新(マイナー固定) |
"*" | 最新版(非推奨) |
通常は^(キャレット)が使われます。
npm install の仕組み
インストール時に何が起きるか
npm install
このコマンドを実行すると以下の処理が行われます。
package.jsonのdependenciesとdevDependenciesを読み込む- 各パッケージをnpmレジストリ(registry.npmjs.org)からダウンロード
node_modules/ディレクトリに展開package-lock.jsonを更新(または生成)
node_modules とは
インストールされたパッケージが全て格納されるディレクトリです。依存関係の依存関係(間接依存)も含めて展開されるため、小さなプロジェクトでも数百MBになることがあります。
node_modulesは.gitignoreに必ず追加して、Gitで管理しないようにします。
# .gitignore
node_modules/
他の人がリポジトリをクローンしたらnpm installを実行すれば同じ環境が再現されます。
package-lock.json の役割
package-lock.jsonはインストール時のパッケージの正確なバージョンと依存ツリーを記録するファイルです。
- チームメンバー全員が全く同じバージョンのパッケージを使えるように保証する
npm ciコマンドはこのファイルを元に厳密にインストールする(CI/CDで推奨)
package-lock.jsonはGitにコミットします(node_modulesとは逆)。
よく使うコマンド
# パッケージのインストール
npm install lodash # dependenciesに追加
npm install --save-dev eslint # devDependenciesに追加(-Dでも可)
npm install # package.jsonの全パッケージをインストール
npm ci # package-lock.jsonに基づいて厳密にインストール
# パッケージのアンインストール
npm uninstall lodash # パッケージを削除
# パッケージの更新
npm update lodash # 指定パッケージをバージョン範囲内で更新
npm outdated # 更新可能なパッケージを一覧表示
# スクリプトの実行
npm run dev # scriptsのdevを実行
npm run build # scriptsのbuildを実行
npm start # scripts.startを実行
# npx — パッケージを一時的に実行
npx create-react-app my-app # インストールせずにCLIを実行
npx tsc --init # TypeScriptの設定ファイルを生成
npm scripts の活用
scriptsフィールドを活用すると、チームで同じコマンドを使えて便利です。
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint src --ext .ts,.tsx",
"lint:fix": "eslint src --ext .ts,.tsx --fix",
"format": "prettier --write src/**/*.{ts,tsx,css}",
"test": "vitest",
"test:coverage": "vitest run --coverage",
"prepare": "husky install"
}
}
&&でコマンドを連結すると、前のコマンドが成功した場合のみ次を実行します。buildの例では、TypeScriptのコンパイルが成功した場合のみViteのビルドが実行されます。
また、preとpostプレフィックスで前後処理を自動実行できます。
{
"scripts": {
"prebuild": "npm run lint", // build前に自動実行
"build": "vite build",
"postbuild": "npm run test" // build後に自動実行
}
}
yarn・pnpm・bun との比較
npmの他にも複数のパッケージマネージャーが存在します。
| ツール | 特徴 | インストール |
|---|---|---|
| npm | Node.js標準搭載。設定不要 | Node.jsに同梱 |
| yarn | Facebook製。ワークスペース機能が充実 | npm install -g yarn |
| pnpm | ディスクの節約。シンボリックリンクで共有 | npm install -g pnpm |
| bun | JavaScriptランタイム兼ツール。非常に高速 | curl -fsSL https://bun.sh/install | bash |
2026年現在、個人開発ではpnpmかbun、チーム開発ではnpmかpnpmが多い印象です。初心者はまずnpmで覚えてから移行を検討すると良いでしょう。コマンドの文法はほぼ同じため、npmを覚えれば他のツールへの移行も容易です。
Node.js超入門 第4版
Node.jsの基礎からExpressを使ったWebアプリ開発まで解説。npmの使い方・パッケージ管理の仕組みも丁寧に説明されています。
※ アフィリエイトリンクを含みます
Udemy — Node.js, Express, MongoDB & More: The Complete Bootcamp
Node.jsとnpmの使い方からExpressアプリの本番デプロイまでハンズオンで学べる人気講座。REST API設計も扱います。
※ アフィリエイトリンクを含みます
まとめ
npmの重要なポイントをまとめます。
- npm init -y でプロジェクトを素早く開始
- package.json にプロジェクトの依存関係とスクリプトを定義
- dependencies vs devDependencies — 本番用と開発用を分けて管理
- node_modules は
.gitignoreに追加してGitで管理しない - package-lock.json はGitにコミットして環境の再現性を保証
- npm scripts でよく使うコマンドをまとめて管理
npmは毎日使うツールです。ここで紹介したコマンドとpackage.jsonの読み方を身につけることで、JavaScriptエコシステムを自信を持って扱えるようになります。