npm

概要

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

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

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

💡 豆知識：npmは2010年にIsaac Z. Schlueterによって開発され、現在はMicrosoftの子会社であるGitHub社が運営しています。 Node.jsに標準搭載されているため、Node.jsをインストールすれば自動的にnpmも使えるようになります。

npmの役割

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

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

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

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

2. 依存関係の管理

「このプロジェクトは、Reactのバージョン18.2.0を使っている」といった情報を、package.jsonというファイルに記録します。 これにより、チームメンバー全員が同じ環境で開発できるようになります。

3. スクリプトの実行

開発サーバーの起動、ビルド、テストなど、よく使うコマンドを登録して実行できます。Vercelなどのホスティングサービスにデプロイする際も、 npmスクリプトが自動実行されます。

# 開発サーバー起動
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公式ドキュメントやNode.js公式サイトで確認できます。

npmを使うメリット・デメリット

メリット

• 豊富なパッケージ： 200万以上のパッケージから選べる
• 標準搭載： Node.jsに標準で含まれているため追加インストール不要
• 依存関係の自動解決： パッケージが必要とする他のパッケージも自動インストール
• バージョン管理： セマンティックバージョニングで安全に更新
• 広く使われている： 情報が豊富で問題解決しやすい

デメリット

• node_modulesが巨大： 数百MB〜数GBになることも
• インストールが遅い場合がある： yarnやpnpmの方が高速
• セキュリティリスク： 悪意のあるパッケージが混入する可能性

💡 セキュリティ対策：パッケージをインストールする前に、週間ダウンロード数、GitHubスター数、最終更新日を確認しましょう。 また、npm auditコマンドで脆弱性をチェックできます。