Zenn
💨

npmについての最低限知識

2025/03/12に公開
JavaScript
Next.js
React
TypeScript
npm
tech

npmとは

Node Package Managerというパッケージマネージャー

パッケージマネージャーとは？

ソフトウェア開発において必要な「部品」（ライブラリやフレームワークなど）を探して、インストールし、更新し、管理するためのツール。

パッケージマネージャーがなければ、必要なコードを自分で探してダウンロードし、正しい場所に配置し、バージョンを確認し、更新を手動で行う必要がある。

パッケージマネージャーはこれらの作業を自動化して、開発者がコードの作成に集中できるようにしてくれる。

主な役割

パッケージのインストール:

必要なコードをインターネットから自動的に探してダウンロードします
例: npm install react でReactをプロジェクトに追加

依存関係の解決

パッケージAがパッケージBを必要とする場合、Bも自動的にインストールします
複雑な「部品の関係図」を自動的に理解して管理します

バージョン管理

どのバージョンのパッケージを使用しているか記録します
「このプロジェクトではReact 18.2.0を使っています」という情報を保持

更新の管理

利用中のパッケージの新しいバージョンを確認できます
安全に更新するための仕組みを提供します

プロジェクト設定の共有

チームメンバー全員が同じ環境で開発できるよう情報を共有します

主要なパッケージマネージャーの例

  • npm: JavaScript/Node.js用（最も広く使われている）
  • yarn: JavaScriptの代替パッケージマネージャー
  • pip: Python用
  • composer: PHP用
  • gem: Ruby用
  • apt, yum: Linux用
  • Homebrew: macOS用

npmの主要コマンド

インストール関連

npm init - 新しいプロジェクトを初期化し、package.jsonファイルを作成
npm install (または npm i) - package.jsonに記載された全ての依存関係をインストール
npm install パッケージ名 - 特定のパッケージをインストール
npm install パッケージ名@バージョン - 特定のバージョンをインストール
npm install パッケージ名 --save-dev (または -D) - 開発依存関係としてインストール
npm install -g パッケージ名 - グローバルにパッケージをインストール

開発依存関係（Dev Dependencies）とは

ソフトウェア開発プロセスでのみ必要なパッケージやツールのことで、実際のアプリケーション本番環境では不要なもの。（例：ESLint, Prettier等）

グローバルにインストールとは

特定のパッケージをコンピュータ全体で使えるようにインストールすること。

プロジェクトへのインストールならプロジェクトのnode_modulesフォルダ内に配置されるが、グローバルの場合はシステム全体の共有場所（例: /usr/local/lib/node_modules）に配置される。

下記の場合に使う事が多い。

  • コマンドラインツールとして頻繁に使う場合
  • プロジェクトに依存しないユーティリティの場合

実行関連

npm run スクリプト名 - package.jsonの"scripts"セクションで定義されたスクリプトを実行
npm start - package.jsonで定義された"start"スクリプトを実行（省略形）
npm test (または npm t) - テストスクリプトを実行

管理関連

npm update - インストール済みのパッケージを更新
npm uninstall パッケージ名 (または npm remove) - パッケージを削除
npm list - インストールされたパッケージの一覧を表示
npm outdated - 古くなったパッケージを表示
npm audit - セキュリティ脆弱性をチェック
npm audit fix - セキュリティ脆弱性を自動修正

情報表示

npm help - ヘルプを表示
npm --version (または -v) - npmのバージョンを表示
npm info パッケージ名 - パッケージの詳細情報を表示

あのnpm run devとは何なのか

package.json内で定義されているdevという名前のスクリプトを実行する。
例えば下記のような設定ならnext devが実行される。

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

ではnext devを直接実行するのと何が違うのか

next devを直接実行する場合

  • Next.js のコマンドラインツールを直接呼び出している。
  • このためには、Next.js がグローバルにインストールされているか、もしくは npx などを使用する必要がある。

npm run devを実行する場合

  • package.jsonファイル内のscriptsセクションを参照する
  • devに定義されたコマンド（通常はnext dev）を実行する
  • このとき、ローカルにインストールされたパッケージの node_modules/.bin ディレクトリ内の実行ファイルが優先的に使用される
  • package.json で定義された環境変数やフック（pre-scripts や post-scripts）も実行する

プロジェクト固有の設定を適用させ、チーム全体で一貫した環境するためにnpm run devが推奨される。

Discussion