npmとパッケージ管理

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • npm は Node Package Manager、JavaScript のパッケージ管理ツール
  • npm install lodash で node_modules/ にインストール + package.json に追記
  • dependencies (本番要) と devDependencies (開発時のみ) を区別
  • package-lock.json でバージョン固定、チーム全員同じ依存を再現

npmとパッケージ管理 とは

npmの使い方とpackage.jsonの役割を理解しよう。本レッスンでは、npmとパッケージ管理 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

npmとパッケージ管理

npmはNode.jsのパッケージマネージャーです。世界中の開発者が作ったライブラリを簡単に使えます。

package.json

プロジェクトの設定と依存パッケージの情報を管理するファイルです。

JSON

{ "name": "my-app", "version": "1.0.0", "dependencies": { "react": "^18.0.0" }, "devDependencies": { "jest": "^29.0.0" } }

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

バージョンは メジャー.マイナー.パッチ の形式です。^1.2.3 はメジャーバージョンを固定し、マイナー・パッチの更新を許可します（1.x.x の範囲）。~1.2.3 はメジャーとマイナーを固定し、パッチの更新のみ許可します（1.2.x の範囲）。

この問題では、package.jsonのオブジェクトを解析して依存情報を整理する関数を実装しましょう。

実務で遭遇するパターン

中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。

  • ライブラリ追加 ─ React / Vue / Express / lodash 等の導入
  • スクリプト実行 ─ npm run build で webpack 起動
  • 社内モジュール公開 ─ Private registry で再利用ライブラリを配信
  • セキュリティ監査 ─ npm audit で脆弱性チェック

コードレビューで指摘されがちなポイント

PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。

  • package-lock.json を gitignore ─ チームで再現性が崩れる、必ずコミット
  • --save-dev 漏れ ─ ビルドツールが dependencies に入って本番バンドルが膨らむ
  • バージョン指定が * や latest ─ ビルドが日によって壊れる、^x.y.z か固定
  • node_modules を git に入れる ─ サイズ爆発、.gitignore 必須

パフォーマンス考慮事項

  • npm ci ─ npm install よりクリーンで速い、CI 推奨
  • pnpm / yarn berry ─ シンボリックリンクで node_modules を縮小
  • tree-shaking ─ ES Module 化されたパッケージのほうがバンドルサイズが小さい
  • バンドルアナライザ ─ webpack-bundle-analyzer で重いパッケージを特定
この章のポイント

ここまでの要点 npm install で依存追加、package.json + package-lock.json で再現。devDependencies と dependencies を区別、npm audit で監査。

よくある質問

Q. 実務ではどんな場面でこの知識を使いますか？

A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。

Q. コードレビューで指摘されやすいポイントは？

A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。

Q. 次に学ぶべき内容は何ですか？

A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。

次のレッスン

次は 実践：モジュール設計 で、npmの使い方とpackage を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. npmとパッケージ管理 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. npmとパッケージ管理 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

入出力例

test-cases.txt

parsePackageJson({"dependencies":{"axios":"^1.0.0","react":"^18.0.0"},"devDependencies":{"jest":"^29.0.0"},"name":"my-app","version":"1.0.0"}) → {"devDeps":1,"name":"my-app","packages":[{"isDev":false,"name":"axios","version":"^1.0.0"},{"isDev":true,"name":"jest","version":"^29.0.0"},{"isDev":false,"name":"react","version":"^18.0.0"}],"prodDeps":2,"totalDeps":3,"version":"1.0.0"} parsePackageJson({"name":"lib","version":"0.1.0"}) → {"devDeps":0,"name":"lib","packages":[],"prodDeps":0,"totalDeps":0,"version":"0.1.0"}
main.js
main.js
学習モード

メモ

npmとパッケージ管理

⌘S で保存