npmとは？Voltaを使ってNode.jsとnpmをインストールする方法

公開日：2025-12-20

パッケージ管理システム

Web制作の勉強をしていると、必ずと言っていいほど「npm」というキーワードを目にすると思います。

Webpackなどのモジュールバンドラーを学んでみようと思った際に、「まずはnpmをインストールしてください」「npmコマンドを実行します」といった説明に戸惑い、「そもそもnpmが分からない」といった経験がある方も多いでしょう。

そこで、今回は「そもそもnpmとは何なのか？」といった概念から解説し、npmが使える環境をPC上に構築するまでの流れを分かりやすく紹介していきます。

npmとは？

npmは、Node.jsのパッケージを管理するパッケージ管理システムです。

パッケージとは、JavaScriptで書かれた便利な機能や処理をひとまとめにしたプログラムのことを指し、特にnpmの場合は、npmレジストリに登録・公開されているパッケージのことを指します。

また、Node.jsは、JavaScriptをブラウザ以外の環境（主にサーバーサイド）でも実行できるようにするための実行環境のことで、npmはNode.js上で動作します。

npmを利用することで、コマンド一つでnpmレジストリに登録・公開されているパッケージをインストール・更新・削除できるため、手動ダウンロードしてプロジェクトに配置するといった手間を大幅に削減できます。

また、npm使用時に生成されるpackage.jsonおよびpackage-lock.jsonには、インストールしたパッケージの一覧やバージョン、依存関係の情報が記録されており、これをチーム内で共有することで、開発メンバー全員が同じ環境を簡単に構築できます。

このような理由から、Web制作・フロントエンド開発においてnpmが広く利用されています。

◾️npmを使用するメリット

コマンド一つで、パッケージのインストール・管理・削除ができ、手動でファイルを配置する手間を省ける。
パッケージが動作するために必要な依存関係（関連パッケージ）も自動的に解決・インストールしてくれる。
npm使用時に生成されるpackage.json、package-lock.jsonをチーム間で共有することで、必要なパッケージや依存関係の情報を他の環境でも再現できる。

Voltaを使ってNode.js・npmをインストールする方法

npmは、Node.jsをインストールすると基本的に一緒にインストールされるため、個別にインストールする必要はありません。

Node.jsをインストールする方法はいくつかありますが、最もおすすめはVoltaを使ってインストールする方法です。

Voltaは、Node.jsやnpmのバージョンを安全かつ簡単に管理できるツールで、プロジェクトごとに使用するNode.jsやnpmのバージョンを切り替えたり、固定したりできます。

そのため、過去の案件で古いバージョンのNode.jsやnpmを使用していた場合でも、Voltaを使って当時の環境が固定されていれば、そのまま当時の開発環境を再現でき、環境差によるトラブルを防ぐことができます。

STEP. 1：Node.jsのアンインストール（※すでにNode.jsをインストールしたことがある方のみ）

※過去にNode.jsをインストールしたことがない方は対応不要です。

すでに公式サイトやVolta以外のバージョン管理ツールを使ってNode.jsをインストールしている場合は、こちらをまずアンインストールしましょう。

Node.js のアンインストール方法は、公式サイトから直接ダウンロードしてインストールした場合と、nodebrewやnvmなどのバージョン管理ツールを利用している場合とで手順が異なります。

そのため、まず自分がどの方法でNode.jsをインストールしているかを確認したうえで、「nvm node アンインストール」など使用しているバージョン管理ツール名を含めて検索し、該当する手順に従ってアンインストールを行ってください。

複数の方法でNode.js がインストールされていると、node -vの結果が意図しないバージョンになるなど、環境トラブルの原因になることがあります。

STEP. 2：Voltaのインストール（MacOS / Windows）

Voltaを使ってNode.js・npmをインストールするには、まずVoltaをインストールしましょう。

MacOS

MacOSの場合はターミナルを開き、以下のコマンドを実行します。

curl https://get.volta.sh | bash

これでVoltaがインストールされます。

問題なくインストールできているかどうかを確認するには、以下のコマンドを実行します。

volta -v

これでバージョン情報が表示されれば、インストールは成功です。

Windows

Windowsの場合はターミナルを開き、以下のコマンドを実行します。

winget install Volta.Volta

問題なくインストールできているかどうかを確認するには、MacOSと同様以下のコマンドを実行します。

volta -v

これでバージョン情報が表示されれば、インストールは成功です。

STEP. 3：Node.jsのインストール

Voltaがインストールできたら、続いてNode.jsをインストールします。

Node.jsをインストールするには、以下のコマンドを実行します。

volta install node@latest

そうすると、その時点での最新版のNode.jsとnpmがインストールされます。

以下のコマンドを実行して、バージョン情報がそれぞれ表示されれば、正しくインストールができています。

node -v && npm -v

npmを使ってプロジェクトを作る方法

Node.js・npmのインストールができたら、npmを使ってプロジェクトを作成してみましょう。

STEP.1：プロジェクト用ディレクトリを作成する

まずはプロジェクト用ディレクトリを作成しましょう。

STEP.2：プロジェクトを初期化する

続いて、プロジェクトを初期化しましょう。

プロジェクトを初期化するには、ターミナルを開き、プロジェクト用ディレクトリに移動したうえで、次のコマンドを実行します。

npm init -y

このコマンドを実行すると、デフォルト設定でpackage.jsonが作成されます。

{
  "name": "project-a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

package.jsonファイルとは？

package.jsonは、プロジェクトの設定や依存関係をまとめて管理するためのファイルです。

このファイルには、主に次のような情報が記載されます。

プロジェクト名やバージョン
インストールしているパッケージ（依存関係）
npm scripts（ビルドや開発用コマンド）

STEP.3：必要なパッケージをインストールする

プロジェクトが初期化されたら、必要なパッケージをインストールします。

パッケージをインストールしたい場合は、次のコマンドを実行します。

npm install パッケージ名

例えば、モジュールバンドラー「Webpack」をインストールしたい場合であれば以下のように記述します。

npm install webpack webpack-cli --save-dev

上の例では、webpackとwebpack-cliという2つのパッケージをインストールしています。

また、–save-devは「開発時のみ使用するパッケージ」としてインストールするためのオプションで、実行すると package.jsonのdevDependenciesにこれらのパッケージが追加されます。

devDependenciesに関する詳しい解説は割愛しますが、モジュールバンドラーなど環境構築などでしか使わないパッケージに関しては–save-devを付けてインストールすると覚えておくと良いでしょう。

STEP.4：npm scriptsを設定する

最後に、npm scriptsを設定します。

npm scriptsを設定することで、よく使うコマンドを簡単に実行できるようになります。

{
  "name": "project-a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "webpack": "^5.104.1",
    "webpack-cli": "^6.0.1"
  }
}

上の例では、buildという名前のnpm scriptを定義しています。

そのため、npm run buildというコマンドを実行すると、登録されているコマンド（今回の場合はwebpack）が実行されます。

npm run build（package.jsonの"scripts"で定義されている名前）

補足：voltaでNode.jsとnpmのバージョンを固定する方法

npmでプロジェクトを作成した場合、将来的にNode.jsやnpm のバージョンがアップデートされると、当時は動いていたコードが動かなくなることがあります。

そこで、Node.jsやnpmのバージョン差によるトラブルを防ぐためにも、Voltaを使ってバージョンを固定しておくと安全です。

VoltaでNode.jsとnpmのバージョンを固定するには、以下のコマンドを実行します。

volta pin node
volta pin npm

※明示的にバージョンを指定したい場合はnode@20、npm@10のように指定することもできます。

こうすることで、その時点で使用しているNode.jsとnpmのバージョンをプロジェクトに固定できます。

{
  "name": "project-a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "webpack": "^5.104.1",
    "webpack-cli": "^6.0.1"
  },
  "volta": {
    "node": "24.12.0",
    "npm": "11.7.0"
  }
}

最初に覚えておくべきnpmの必須コマンド

最後に最初に覚えておくべきnpmの必須コマンドを紹介します。

npm init：プロジェクトの初期化

npm initは、プロジェクトの初期化をする際に使用されるコマンドです。

npm initと記述すると、プロジェクト名やバージョンなどについて対話形式で質問され、それらの内容をもとに package.jsonが作成されます。

対話形式を省略してデフォルト設定で初期化したい場合は、npm init -yと記述します。

npm install：パッケージのインストール

npm installは、パッケージのインストールをする際に使用されるコマンドです。

npm install パッケージ名とすることで、対象のパッケージをインストールできます。

また、npm installのみを実行すると、package.jsonおよびpackage-lock.jsonに基づいて、必要なパッケージがインストールされます。

このため、他の人が作成したプロジェクトを取得した際などは、まずnpm installを実行して開発環境を再現します。

npm uninstall：パッケージのアンインストール

npm uninstall は、インストール済みのパッケージを削除する際に使用されるコマンドです。

npm uninstall パッケージ名と実行すると、対象のパッケージが削除され、package.jsonやpackage-lock.jsonからも該当の依存関係が自動的に削除されます。

npm update：パッケージの更新

npm updateは、インストールされているパッケージを更新する際に使用されるコマンドです。

package.jsonに記載されているバージョン範囲をもとに、更新可能なパッケージが最新のバージョンへアップデートされます。

npm run：スクリプトの実行

npm runは、package.jsonのscriptsに定義されているコマンドを実行するためのコマンドです。

たとえば、次のように定義されている場合、npm run buildと実行することで登録されているwebpackコマンドが実行されます。

{
  "name": "project-a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "devDependencies": {
    "webpack": "^5.104.1",
    "webpack-cli": "^6.0.1"
  }
}

webpackだけであれば、あまり恩恵を感じにくいかもしれませんが、webpack --config ./webpack.prod.jsのようにコマンドが長い場合は、短い名前で簡単に実行できるようになるため便利です。