npm パッケージマネージャー

アリスは、Luxonの日付処理ライブラリとExpress HTTPフレームワークの追加、およびJestテストツールの設定が必要な新しいプロジェクトを引き受けたばかりだった。当初、彼女は公式ウェブサイトからJavaScriptファイルを1つずつダウンロードし、手動でプロジェクトにコピーしていたが、常にバージョン競合に悩まされ、アップグレード作業は悪夢のようなものだった。そんな時、同僚からnpmを紹介された。npmを使えば、たった1つのコマンドで依存関係をインストールでき、バージョンはpackage.jsonに記録され、lockファイルを介して正確なバージョンに固定される。それ以来、チームは「自分のマシンでは動く」という問題を二度と経験することはなくなった。

学習内容：

• npm init、npm install、および npm uninstall を使用して、プロジェクトの依存関係を管理します
• dependencies と devDependencies の違い、およびそれぞれの使用場面を区別する
• package-lock.jsonの目的とコミット戦略を理解する
• SemVerのセマンティックバージョニング規則（^、~、>=など）を理解する
• npmスクリプトとnpxを活用して開発効率を向上させる

1. npm init — プロジェクトの初期化

(1) 対話型初期化

npm init を実行すると、プロジェクト情報の入力が段階的に求められ、最終的に package.json が生成されます。

▶ 例：対話形式で package.json ファイルを作成する

mkdir my-project && cd my-project
npm init

package name: (my-project)
version: (1.0.0)
description: A sample project
entry point: (index.js)
test command: jest
git repository:
keywords:
author: Alice
license: (ISC)

(2) 迅速な初期化

-y を使用すると、すべてのプロンプトをスキップして、デフォルトの package.json を生成できます。

▶ 例：プロンプトをスキップして素早く生成する

npm init -y

Wrote to /home/alice/my-project/package.json

生成された package.json のデフォルトコンテンツ：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

2. npm install / uninstall — 依存関係のインストールとアンインストール

(1) 依存関係をインストールする

npm install <package> からパッケージをダウンロードし、node_modules に書き出します。

▶ 例：本番環境用の依存関係のインストール

npm install express

(2) 開発用依存関係をインストールする

--save-dev（略称：-D）は、パッケージをdevDependenciesに記録するものであり、開発環境でのみ使用することを目的としています。

▶ 例：開発用依存関係のインストール

npm install jest --save-dev

(3) 依存関係をアンインストールする

npm uninstall node_modules 内のファイルと package.json 内のレコードを両方とも削除してください。

▶ 例：依存関係のアンインストール

npm uninstall express

(4) すべての依存関係をインストールする

他者のプロジェクトをクローンした後、npm install を実行して、package.json および package-lock.json を使用してすべての依存関係を復元してください。

▶ 例：依存関係の復元

npm install

3. dependencies と devDependencies の違い

(1) 依存関係の分類

dependencies は本番環境に必要なパッケージを、devDependencies は開発段階でのみ使用されるパッケージをそれぞれ一覧表示しています。

▶ 例：package.json 内の「dependencies」セクション

{
  "dependencies": {
    "express": "^4.18.2",
    "luxon": "^3.4.4"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "eslint": "^8.56.0"
  }
}

(2) 本番環境へのインストール時に開発用依存関係をスキップする

--production を使用するか、NODE_ENV=production を設定して、devDependencies のインストールをスキップし、デプロイサイズを縮小してください。

▶ 例：本番環境へのインストール

npm install --production

4. package-lock.json の目的

(1) 正確なバージョンを固定する

package-lock.json すべての環境においてインストール結果が一貫性を保つよう、各依存関係の正確なバージョンと整合性ハッシュを記録してください。

(2) インストール速度の向上

lock ファイルには依存関係の完全なツリーが含まれており、これにより npm はバージョンの解決をスキップして、パッケージを直接ダウンロードすることができます。

▶ 例：ロックファイルのコードスニペット

{
  "node_modules/luxon": {
    "version": "3.4.4",
    "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
    "integrity": "sha512-zaBViHBuQffgP8h...',
    "requires": {}
  }
}

5. セマンティック・バージョニング (SemVer)

(1) バージョン番号の形式

SemVerの形式はMAJOR.MINOR.PATCHであり、各構成要素にはそれぞれ特定の意味があります。

(2) バージョン範囲記号

package.json 内の記号を使用して、許容されるバージョンの範囲を指定してください。

▶ 例：さまざまな範囲における実際の結果

{
  "express": "^4.18.2",
  "lodash": "~4.17.21",
  "axios": ">=1.6.0",
  "debug": "4.3.x"
}

(3) バージョンの更新に関する規則

• パッチ：APIを変更せずにバグを修正します
• MINOR（マイナーリリース）：新機能、下位互換性あり
• MAJOR（メジャーバージョン）：互換性を損なう変更。下位互換性なし

6. グローバルインストールとローカルインストール

(1) ローカルインストール

デフォルトでは、このパッケージは node_modules プロジェクトにインストールされます。プロジェクトごとに異なるバージョンを使用することができます。

(2) グローバルインストール

-g フラグを追加すると、パッケージがシステムのグローバルディレクトリにインストールされ、コマンドラインツールが提供されます。

▶ 例：コマンドラインツールをグローバルにインストールする

npm install -g nodemon

(3) グローバルインストールをいつ使用するか

コマンドラインからのアクセスが必要なツール（nodemon や pm2 など）のみをインストールしてください。プロジェクトの依存関係は、常にローカルにインストールする必要があります。

7. npm スクリプト

(1) 組み込みスクリプト

start および test は、npm start / npm test を使用して直接実行できる、npm の組み込みスクリプトです。

(2) カスタムスクリプト

その他のスクリプトは、npm run <name> を使用して実行する必要があります。

▶ 例：一般的なスクリプトの設定

{
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest --coverage",
    "lint": "eslint src/"
  }
}

npm start
npm run dev
npm test
npm run lint

(3) スクリプト間のフック

pre<script> および post<script> は、対象スクリプトの実行前と実行後に自動的に実行されます。

▶ 例：pre フックの使用方法

{
  "scripts": {
    "prebuild": "npm run lint",
    "build": "node build.js",
    "postbuild": "echo Build complete"
  }
}

npm run build を実行すると、prebuild → build → postbuild が順次実行されます。

8. npx コマンド

(1) リモートパッケージを一時的に実行する

npx インストールされていないパッケージを直接実行できるため、システム全体への影響を防ぐことができます。

▶ 例：create-react-appを一時的に使用する場合

npx create-react-app my-app

(2) ローカルにインストールされたシステムでコマンドを実行する

npx はまずローカルで node_modules/.bin があるか確認し、次にグローバルで確認し、最後にリモートからダウンロードします。

▶ 例：ローカルツールの実行

npx jest

(3) 特定のバージョンを実行する

▶ 例：パッケージの特定のバージョンを使用する場合

npx express-generator@4 --view=ejs my-site

9. .npmrc の設定

(1) 設定ファイルの階層構造

.npmrc 優先順位の高い順に、プロジェクトレベル、ユーザーレベル、グローバルレベルの3つのレベルに対応しています。

▶ 例：プロジェクトレベルの .npmrc ファイルでミラーソースを設定する

registry=https://registry.npmmirror.com

(2) 一般的な設定オプション

▶ 例：コマンドを使用した設定

npm config set registry https://registry.npmmirror.com
npm config get registry
npm config list

10. 「npm install」の実行プロセス

flowchart TD
    A[npm install] --> B{Does it exist? package-lock.json?}
    B -- Yes --> C[Read lock The exact version in the document]
    B -- No --> D[Analysis package.json Version range in]
    D --> E[Search registry Get the latest compatible version]
    E --> F[Generate a dependency tree]
    C --> G[Download the package to the cache]
    F --> G
    G --> H[Write node_modules Table of Contents]
    H --> I[Update package-lock.json]
    I --> J[Installation Complete]

flowchart TD
    A[npm install] --> B{Does it exist? package-lock.json?}
    B -- Yes --> C[Read lock The exact version in the document]
    B -- No --> D[Analysis package.json Version range in]
    D --> E[Search registry Get the latest compatible version]
    E --> F[Generate a dependency tree]
    C --> G[Download the package to the cache]
    F --> G
    G --> H[Write node_modules Table of Contents]
    H --> I[Update package-lock.json]
    I --> J[Installation Complete]

11. 包括的な例：プロジェクトの依存関係を一から設定する

以下の例では、アリスがプロジェクトをゼロから作成し、依存関係をインストールし、スクリプトを設定し、開発サーバーを起動するまでの全プロセスを示しています。

mkdir alice-server && cd alice-server
npm init -y

npm install express luxon
npm install jest nodemon --save-dev

package.json インストール後：

{
  "name": "alice-server",
  "version": "1.0.0",
  "description": "Alice's date-aware HTTP server",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "luxon": "^3.4.4"
  },
  "devDependencies": {
    "jest": "^29.7.0",
    "nodemon": "^3.0.2"
  },
  "license": "ISC"
}

エントリファイル index.js を作成します：

const express = require('express');
const { DateTime } = require('luxon');

const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
  const now = DateTime.now().toISO();
  res.json({ message: 'Server is running', timestamp: now });
});

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

開発サーバーを起動します：

npm run dev

[nodemon] starting node index.js
Server listening on port 3000

❓ よくある質問

📖 まとめ

• npm init を使用してプロジェクトを初期化します。-y を使用すると、プロンプトをスキップします
• インストール／アンインストール、依存関係の管理。-D を指定すると devDependencies に書き込まれます。
• package-lock.json では特定のバージョンが固定されます。必ずコミットする必要があります
• SemVerでは、バージョン範囲を制御するために ^/~/>= を使用します
• グローバルインストールはCLIツールのみを対象としています。プロジェクトの依存関係はすべてローカルにインストールする必要があります。
• npm スクリプトは一般的なコマンドを簡略化します。「start」や「test」は「run」とだけ記述することで省略できます
• npx: グローバルインストールを行わずに、リモートパッケージを一時的に実行する
• .npmrc では、プロジェクト、ユーザー、グローバルの 3 つのレベルの設定をサポートしています。

📝 練習問題

1. npm init -y を実行してプロジェクトを作成し、package.json 内の名前、説明、スクリプトを手動で編集します。
2. express と luxon を依存関係としてインストールし、jest を devDependency としてインストールした後、package.json の変更を確認してください。
3. npm list と npm outdated をそれぞれ使用して、依存関係のステータスを確認します。
4. .npmrc ファイルを作成し、レジストリを https://registry.npmmirror.com に設定してから、再インストールして確認してください。
5. 「Hello from npm scripts」と出力するカスタムスクリプト hello を作成し、npm run hello を使用して実行してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて