npmとは？使い方・コマンド・パッケージ管理をわかりやすく解説

npmとは、JavaScriptやNode.jsの開発で利用されるパッケージマネージャーです。

npmを使うことで、他の開発者が公開したパッケージ（ライブラリやツールなど）をプロジェクトにインストールしたり、依存関係を管理したりできます。

npmには、パッケージを検索・共有するためのWebサイト、コマンドラインから操作するnpm CLI、パッケージを保存・配布するnpmレジストリという3つの主要な要素があります。

例えば、Webアプリケーションで日付処理、フォーム、UIコンポーネント、データ通信などの機能を追加するとき、必要なコードをすべて一から作るのではなく、既存のnpmパッケージを利用できます。

この記事では、npmとは何か、パッケージマネージャーの仕組み、package.jsonやpackage-lock.jsonの役割、基本的なnpmコマンド、依存関係の管理方法について初心者にもわかりやすく解説します。

npmとは？

npmは、JavaScriptのパッケージを検索、インストール、管理、公開するために広く利用されているパッケージマネージャーです。

npmには、次の3つの主要な要素があります。

• npm Registry：JavaScriptパッケージとそのメタデータを保存・配布するレジストリ

• npm CLI：ターミナルからnpmを操作するコマンドラインツール

• npm Webサイト：パッケージを検索したり、npmアカウントや組織を管理したりするWebサイト

npmの公式ドキュメントでも、この3つをnpmの主要な構成要素として説明しています。

npmパッケージとは？

npmパッケージとは、package.jsonによって説明されたJavaScriptのコードや関連ファイルのまとまりです。

パッケージには、他のパッケージへの依存関係や、プロジェクトで利用するスクリプトなどの情報を含めることができます。

npmレジストリには、オープンソースのライブラリや開発ツールなど、非常に多くのパッケージが公開されています。

例えば、プロジェクトで特定の機能を追加したい場合、npmを使って必要なパッケージをインストールできます。

npm install <package-name>

npmはパッケージ本体だけでなく、そのパッケージが必要とする依存関係も解決してインストールします。

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

パッケージマネージャーとは、ソフトウェアプロジェクトで利用するパッケージや、その依存関係を管理するためのツールです。

例えば、Webアプリケーションで決済機能を追加するとします。

必要なコードをすべて自分で開発する代わりに、既存の決済関連パッケージを利用できる場合があります。

パッケージマネージャーを使えば、

1. 必要なパッケージを探す

2. パッケージをインストールする

3. 必要な依存関係を管理する

4. パッケージのバージョンを管理する

5. パッケージを更新・削除する

といった作業を効率化できます。

npmは、JavaScript開発における代表的なパッケージマネージャーの一つです。

npmレジストリとは？

npmレジストリは、JavaScriptパッケージと、そのパッケージに関するメタデータを保存・配布するデータベースです。

npmのWebサイトでパッケージを検索すると、そのパッケージのバージョン、依存関係、README、インストール方法などを確認できます。

重要なのは、npm Webサイトとnpmレジストリは同じものではないという点です。

npm Webサイトはパッケージを検索したり、アカウントや組織を管理したりするためのWebインターフェースです。一方、npmレジストリはパッケージを保存・配布するサービスです。

npm CLIとは？

npm CLIは、ターミナルからnpmを操作するためのコマンドラインツールです。

例えば、パッケージをインストールするときは、

npm install react

のように入力します。

npm CLIを使うことで、パッケージのインストール、更新、削除、公開、スクリプトの実行など、さまざまな操作をターミナルから実行できます。

npmのコマンドは基本的に次のような形式です。

npm <command>

例えば、

npm install
npm run dev
npm update

などがあります。

依存関係（Dependencies）とは？

依存関係とは、プロジェクトが動作するために必要な外部パッケージのことです。

例えば、あるWebアプリケーションがReactを利用している場合、Reactはそのプロジェクトの依存関係になります。

さらに、Reactが別のパッケージを必要とする場合、そのパッケージも依存関係として扱われます。

このように、パッケージ同士には依存関係が存在することがあります。

npmは、パッケージをインストールするときに必要な依存関係を解決し、プロジェクトに必要なパッケージをインストールします。

dependenciesとdevDependencies

package.jsonでは、依存関係を主にdependenciesとdevDependenciesに分けて管理します。

dependencies

アプリケーションの実行に必要なパッケージを登録します。

例えば、実行時に必要なライブラリなどです。

devDependencies

開発、テスト、ビルドなどのために使用するパッケージを登録します。

例えば、テストツールやリンター、ビルドツールなどが該当します。

この2つを分けることで、アプリケーションの実行に必要なパッケージと、開発時だけ必要なツールを整理できます。

package.jsonとは？

package.jsonは、Node.jsやnpmプロジェクトの重要な設定ファイルです。

プロジェクト名やバージョン、依存関係、npmスクリプトなど、プロジェクトに関するさまざまな情報を記述します。

例えば、次のような情報を含めることができます。

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "react": "^19.0.0"
  }
}

package.jsonに依存関係が記録されているため、プロジェクトを別のコンピューターに移した場合でも、npmを使って必要なパッケージをインストールできます。

package-lock.jsonとは？

package-lock.jsonは、プロジェクトでインストールされる依存関係の具体的なバージョンや依存関係ツリーなどを記録するファイルです。

package.jsonでは、バージョンの範囲を指定することがあります。

一方、package-lock.jsonには、実際のインストール結果を再現するために必要な詳細な情報が記録されます。

これにより、開発者のコンピューターやCI/CD環境などで、依存関係をより一貫した状態でインストールしやすくなります。

特にnpm ciでは、既存のpackage-lock.jsonを利用してクリーンなインストールを行います。package.jsonとロックファイルの内容が一致しない場合、npm ciはエラーになります。

node_modulesとは？

node_modulesは、プロジェクトで利用するnpmパッケージがインストールされるディレクトリです。

例えば、

npm install react

を実行すると、Reactと必要な依存関係がプロジェクトにインストールされます。

ただし、node_modulesにあるファイルを直接編集して依存関係を管理するのではありません。

通常は、

• package.json

• package-lock.json

をプロジェクトの依存関係を管理するための重要なファイルとして扱います。

そのため、チームで開発するときは、package.jsonやpackage-lock.jsonをバージョン管理システムに含め、node_modules自体はリポジトリに含めない構成が一般的です。

npmの基本的なコマンド

npmには多くのコマンドがありますが、まずは基本的なものを覚えておくと便利です。

npm init

新しいnpmプロジェクトを作成するために使います。

npm init

対話形式でプロジェクト情報を入力し、package.jsonを作成できます。

より簡単に初期化したい場合は、

npm init -y

も利用できます。

npm install

package.jsonに記録された依存関係をインストールします。

npm install

特定のパッケージをインストールする場合は、

npm install <package-name>

とします。

例えばReactをインストールする場合は、

npm install react

です。

npmは、指定されたパッケージと必要な依存関係をインストールします。

npm install –save-dev

開発時に使用するパッケージをdevDependenciesに追加します。

npm install <package-name> --save-dev

現在のnpmでは、通常のnpm install <package-name>で依存関係として保存されるため、以前のnpmで使われていた--saveを明示的に指定する必要は基本的にありません。

npm uninstall

パッケージをプロジェクトから削除します。

npm uninstall <package-name>

npm update

プロジェクトの依存関係を更新します。

npm update

特定のパッケージを指定することもできます。

npm update <package-name>

実際の更新範囲は、package.jsonに指定されたバージョン範囲などによって決まります。

npm run

package.jsonに登録されたスクリプトを実行します。

例えば、

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

という設定があれば、

npm run dev

や、

npm run build

のように実行できます。

npmスクリプトは、開発サーバーの起動、ビルド、テスト、コードチェックなど、プロジェクトで繰り返し行う作業を簡単に実行するために利用できます。

npm ci

npm ciは、CI/CDや自動化された環境などで、クリーンな依存関係のインストールを行うためのコマンドです。

npm ci

npm installとは異なり、既存のpackage-lock.jsonを前提として、ロックファイルに記録された依存関係をそのままインストールします。

package.jsonとpackage-lock.jsonが一致しない場合はエラーになります。

そのため、CI/CDやデプロイ環境などで、開発環境と同じ依存関係を再現したい場合に便利です。

npm installとnpm ciの違い

npm installとnpm ciはどちらもパッケージをインストールするためのコマンドですが、目的が異なります。

	npm install	npm ci
主な用途	開発中の依存関係のインストール・更新	CI/CDなどでのクリーンインストール
package-lock.json	必要に応じて更新される	既存のロックファイルを使用
package.jsonとの不一致	ロックファイルを更新する場合がある	エラーになる
node_modules	既存の内容を利用して更新	開始前に削除してからインストール

npm installは日常的な開発で、npm ciは依存関係を固定して再現性の高いインストールを行いたい場合に使う、と考えると分かりやすいでしょう。

npmでパッケージを管理するメリット

npmを利用すると、JavaScriptプロジェクトの依存関係を効率的に管理できます。

開発時間を短縮できる

すでに公開されているパッケージを利用することで、一般的な機能を一から開発する必要がなくなります。

依存関係を管理できる

プロジェクトが必要とするパッケージをpackage.jsonに記録し、チーム内で共有できます。

バージョンを管理できる

package.jsonとpackage-lock.jsonを利用することで、プロジェクトで利用する依存関係のバージョンを管理できます。

豊富なパッケージを利用できる

npmレジストリには、多数のJavaScriptパッケージが公開されています。

そのため、UIコンポーネント、テスト、データ処理、開発ツールなど、さまざまな目的に合わせたパッケージを探すことができます。

npmを使うときの注意点

npmは便利なツールですが、外部パッケージを利用するときには注意も必要です。

パッケージの安全性を確認する

npmレジストリには多くのパッケージが公開されているため、インストールする前に、パッケージの提供元、更新状況、依存関係、READMEなどを確認することが重要です。

また、npmには依存関係のセキュリティ問題を確認するための監査機能もあります。

依存関係を定期的に確認する

パッケージは時間とともに更新されます。

そのため、プロジェクトで利用している依存関係を定期的に確認し、必要に応じて更新することが重要です。

ただし、重要なプロジェクトでは、更新前にテストを実行し、互換性や変更点を確認することをおすすめします。

デザイナーにとってnpmが重要な理由

npmは主に開発者が利用するツールですが、デザイナーにとっても知っておく価値があります。

特に、Reactなどのコードコンポーネントを利用したデザインシステムを運用しているチームでは、npmがデザインと開発をつなぐ役割を果たすことがあります。

例えば、開発チームがReactコンポーネントをnpmパッケージとして管理している場合、そのコンポーネントをデザイン環境で利用できる仕組みを構築できます。

これにより、

• デザインと実装で同じコンポーネントを使用する

• デザインシステムの一貫性を保つ

• 開発者とデザイナーの認識を合わせる

• 実際の製品に近いUIを検証する

といったワークフローが可能になります。

UXPinとnpmコンポーネント

UXPinでは、開発で使用しているコードコンポーネントをデザインやプロトタイピングに活用できます。

特にUXPin Mergeでは、Reactなどのコードコンポーネントを利用して、実際の製品に近いインタラクティブなプロトタイプを作成できます。

これは、デザインシステムのコンポーネントと最終製品のUIをできるだけ一致させたいチームにとって有効です。

例えば、開発チームがnpmで管理しているReactコンポーネントをデザインプロセスに取り込むことで、デザイナーは実装時に使用されるコンポーネントを使ってプロトタイプを作成できます。

その結果、デザインとコードの間に生じる違いを減らし、開発前により正確なユーザー体験を検証できます。

UXPin Mergeを利用して、コードコンポーネントを使ったプロトタイピングを試してみましょう。

まとめ：npmはJavaScript開発のパッケージ管理に欠かせないツール

npmは、JavaScriptのパッケージを検索、インストール、管理、公開するために利用されるパッケージマネージャーです。

この記事のポイントをまとめると、

• npmはJavaScript開発で利用されるパッケージマネージャー

• npmにはWebサイト、CLI、レジストリという主要な要素がある

• npmパッケージには、ライブラリや開発ツールなどが含まれる

• package.jsonでプロジェクトの依存関係やスクリプトを管理できる

• package-lock.jsonで依存関係の具体的なインストール状態を記録できる

• npm install、npm update、npm uninstall、npm runなどのコマンドを利用できる

• npm ciを使うと、ロックファイルに基づいたクリーンなインストールができる

• npmは開発者だけでなく、コードベースのデザインシステムを扱うデザイナーにとっても重要

npmを理解することで、JavaScriptプロジェクトの依存関係や、デザインと開発をつなぐコードコンポーネントの仕組みをより深く理解できるようになります。

UXPinでは、コードコンポーネントを活用した高精度なプロトタイピングによって、デザインと開発のギャップを縮めることができます。

npmとコードコンポーネントを活用した、より効率的なデザインワークフローをUXPinで体験してみましょう。