TechBlog

npm入門|package.jsonの読み方・npm installの仕組み・scriptsの活用法を解説

by あくえり
#npm #Node.js #パッケージ管理 #JavaScript #初心者
npm入門 package.json解説
目次

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 <スクリプト名>で実行できるコマンドを定義します。starttestnpm startnpm 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

このコマンドを実行すると以下の処理が行われます。

  1. package.jsondependenciesdevDependenciesを読み込む
  2. 各パッケージをnpmレジストリ(registry.npmjs.org)からダウンロード
  3. node_modules/ディレクトリに展開
  4. 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のビルドが実行されます。

また、prepostプレフィックスで前後処理を自動実行できます。

{
  "scripts": {
    "prebuild": "npm run lint",   // build前に自動実行
    "build": "vite build",
    "postbuild": "npm run test"   // build後に自動実行
  }
}

yarn・pnpm・bun との比較

npmの他にも複数のパッケージマネージャーが存在します。

ツール特徴インストール
npmNode.js標準搭載。設定不要Node.jsに同梱
yarnFacebook製。ワークスペース機能が充実npm install -g yarn
pnpmディスクの節約。シンボリックリンクで共有npm install -g pnpm
bunJavaScriptランタイム兼ツール。非常に高速curl -fsSL https://bun.sh/install | bash

2026年現在、個人開発ではpnpmbun、チーム開発ではnpmpnpmが多い印象です。初心者はまず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設計も扱います。

¥1,800〜 Udemyで見る

※ アフィリエイトリンクを含みます

まとめ

npmの重要なポイントをまとめます。

  • npm init -y でプロジェクトを素早く開始
  • package.json にプロジェクトの依存関係とスクリプトを定義
  • dependencies vs devDependencies — 本番用と開発用を分けて管理
  • node_modules.gitignoreに追加してGitで管理しない
  • package-lock.json はGitにコミットして環境の再現性を保証
  • npm scripts でよく使うコマンドをまとめて管理

npmは毎日使うツールです。ここで紹介したコマンドとpackage.jsonの読み方を身につけることで、JavaScriptエコシステムを自信を持って扱えるようになります。

共有: