npm

概要

npm（Node Package Manager）とは、「JavaScriptのパッケージ（ライブラリ）を管理するツール」です。

プログラミングをしていると、「誰かがすでに作った便利な機能を使いたい」という場面が必ず出てきます。 例えば、「日付を扱うライブラリ」「グラフを描画するライブラリ」など、 車輪の再発明をせずに済むコードがたくさんあります。

npmは、そういった便利なパッケージを簡単にインストール・管理できる仕組みを提供してくれます。 コマンド一つで、世界中の開発者が作った200万以上のパッケージを利用できるのです。

npmの役割

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

他の開発者が作った便利なコードを、簡単にダウンロードして使えます。

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

# 日付処理ライブラリをインストール
npm install date-fns

2. 依存関係の管理

「このプロジェクトは、Reactのバージョン18.2.0を使っている」といった情報を、package.jsonというファイルに記録します。

3. スクリプトの実行

開発サーバーの起動、ビルド、テストなど、よく使うコマンドを登録して実行できます。

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

# ビルド実行
npm run build

package.jsonとは？

package.jsonは、プロジェクトの「設定ファイル」です。 どんなパッケージを使っているか、どんなスクリプトがあるかなどが書かれています。

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "react": "^18.2.0",
    "next": "^15.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

主な項目

• name: プロジェクト名
• version: プロジェクトのバージョン
• scripts: よく使うコマンドの登録
• dependencies: 本番環境で必要なパッケージ
• devDependencies: 開発時だけ必要なパッケージ

node_modulesとは？

npm installを実行すると、node_modulesというフォルダが作られます。 ここに、インストールしたパッケージの実際のコードが保存されます。

⚠️ 重要： node_modulesは非常に大きくなるため、GitHubにはアップロードしません。.gitignoreにnode_modules/を追加しましょう。

なぜnode_modulesをGitHubに上げないのか？

• サイズが大きい（数百MB〜数GB）
• package.jsonがあれば、誰でもnpm installで復元できる
• 環境によって必要なファイルが異なる場合がある

npmの基本コマンド

セマンティックバージョニング

npmのパッケージは、1.2.3のような形式でバージョンが管理されています。

メジャー.マイナー.パッチ
  1   .  2  .  3

1 (メジャー): 互換性のない大きな変更
2 (マイナー): 後方互換性のある機能追加
3 (パッチ): バグ修正

バージョン指定の記号

• ^1.2.3: 1.x.xの最新版（マイナー・パッチは自動更新OK）
• ~1.2.3: 1.2.xの最新版（パッチのみ自動更新OK）
• 1.2.3: 完全に固定（更新しない）

💡 ポイント： ^が一般的です。 大きな破壊的変更は入らず、バグ修正や小さな機能追加は自動で取り込まれます。

package-lock.jsonとは？

npm installを実行すると、package-lock.jsonというファイルも作られます。

役割

インストールされた正確なバージョンを記録します。 これにより、チームメンバー全員が同じバージョンのパッケージを使うことができます。

⚠️ 重要： package-lock.jsonは、.gitignoreに入れず、GitHubにコミットしましょう！

npm vs yarn vs pnpm

npmの他にも、パッケージ管理ツールがあります。

初心者はnpmから始めるのがおすすめです。 慣れてきたら、他のツールも試してみましょう。

npmでよくあるトラブルと解決法

1. 「command not found: npm」

Node.jsがインストールされていません。nodejs.orgからNode.jsをインストールしてください。

2. 「EACCES: permission denied」

権限エラーです。sudoを付けるか、 Node.jsのインストール方法を見直しましょう（nvmの使用を推奨）。

3. 「Cannot find module ...」

パッケージがインストールされていません。npm installを実行してください。

4. 「version conflict」

パッケージのバージョンが競合しています。npm install --legacy-peer-depsを試すか、 package.jsonのバージョンを調整しましょう。

npmレジストリ

npmレジストリは、世界中のパッケージが保存されているデータベースです。

• npmjs.comでパッケージを検索できる
• 200万以上のパッケージが公開されている
• 誰でも自分のパッケージを公開できる

💡 ヒント： パッケージを選ぶときは、 週間ダウンロード数、GitHubスター数、更新頻度をチェックしましょう。

実際の使用例

Next.jsプロジェクトを始める

# Next.jsプロジェクトを作成
npx create-next-app@latest my-app

# ディレクトリに移動
cd my-app

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

# ブラウザで http://localhost:3000 を開く

便利なパッケージを追加

# 日付処理ライブラリを追加
npm install date-fns

# アイコンライブラリを追加
npm install react-icons

# 使ってみる（コード内）
import { format } from 'date-fns'
const today = format(new Date(), 'yyyy-MM-dd')

実際にやってみよう：npmコマンド実行シミュレーター

よく使うnpmコマンドを選んで、実行結果を確認してみましょう！