お問い合わせ
お問い合わせ
ホーム > JavaScript > npmとは？初心者向けに使い方をわかりやすく解説

npmとは？初心者向けに使い方をわかりやすく解説

JavaScript
npmによるパッケージ管理と開発環境構築を表現したイラスト
npmの基本的な仕組みやパッケージ管理の流れをイメージしたアイキャッチ画像です。

Web制作やフロントエンド開発を学び始めると、「npm」という言葉を目にする機会が増えます。

Node.jsをインストールした後に使うことが多いため、「Node.jsと何が違うのか分からない」「何のために使うのか理解できない」という人も少なくありません。

npmはJavaScript開発を効率化するための重要なツールです。現在ではReactやVue、Viteなどの開発環境だけでなく、SassやESLintなどの開発支援ツールを導入する際にも利用されています。

この記事では、npmの概要から基本的な使い方、よく使うコマンドまで初心者向けにわかりやすく解説します。

npmとは

npm（Node Package Manager）は、Node.js向けのパッケージ管理ツールです。

パッケージとは、開発に役立つプログラムやライブラリのことです。

例えば以下のようなツールがあります。

  • Sass
  • ESLint
  • Prettier
  • React
  • Vue
  • Vite

これらを簡単にインストールしたり更新したりできるのがnpmです。

Node.jsをインストールするとnpmも同時にインストールされます。

Node.jsについて詳しく知りたい場合は、「Node.jsとは？基本からわかりやすく解説」の記事も参考になります。

npmでできること

npmには主に次のような役割があります。

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

必要なツールをコマンド1つで導入できます。

例えばSassをインストールする場合は以下のように実行します。

npm install sass

パッケージの更新

インストール済みパッケージを最新版へ更新できます。

npm update

パッケージの削除

不要になったパッケージを削除できます。

npm uninstall sass

プロジェクトの設定管理

パッケージ情報やスクリプトをpackage.jsonで管理できます。

これによりチーム開発や複数環境での開発が容易になります。

npmを使うための準備

npmを利用するにはNode.jsをインストールします。

Node.jsをインストールする

Node.js公式サイトからインストーラーをダウンロードします。

インストール完了後、ターミナルやコマンドプロンプトで以下を実行します。

node -v

バージョンが表示されれば成功です。

続いてnpmも確認します。

npm -v

こちらもバージョン番号が表示されれば利用できます。

npmプロジェクトを作成する方法

npmを使う際は、まずプロジェクトを初期化します。

作業フォルダを作成する

まずフォルダを作成して移動します。

mkdir sample-project
cd sample-project

npm initを実行する

以下のコマンドを実行します。

npm init

質問に回答するとpackage.jsonが作成されます。

簡単に作成したい場合は以下がおすすめです。

npm init -y

実行後は次のようなpackage.jsonが生成されます。

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

package.jsonとは

package.jsonはnpmプロジェクトの設定ファイルです。

以下のような情報を管理します。

  • プロジェクト名
  • バージョン
  • 使用パッケージ
  • npmスクリプト
  • ライセンス情報

npmを利用するうえで中心となる重要なファイルです。

パッケージをインストールする方法

通常インストール

以下はSassをインストールする例です。

npm install sass

省略形もあります。

npm i sass

package.jsonへの記録

インストール後はdependenciesへ自動登録されます。

{
  "dependencies": {
    "sass": "^1.93.0"
  }
}

これにより他の環境でも同じパッケージを再現できます。

node_modulesとは

パッケージをインストールするとnode_modulesフォルダが作成されます。

この中にはインストールしたパッケージ本体が保存されます。

構成例です。

project
├── node_modules
├── package.json
└── package-lock.json

容量が大きくなるためGit管理では通常除外します。

Gitの基本については「Gitとは何か｜バージョン管理の基本概念をやさしく解説」の記事も参考になります。

package-lock.jsonとは

package-lock.jsonはインストールされたパッケージの詳細情報を記録するファイルです。

主な目的は以下のとおりです。

  • バージョンの固定
  • 開発環境の統一
  • 再現性の確保

チーム開発では非常に重要なファイルです。

npm installの仕組み

package.jsonが存在するプロジェクトで以下を実行します。

npm install

するとpackage.jsonに記載された全パッケージがまとめてインストールされます。

例えばGitHubからプロジェクトを取得した際によく利用します。

git clone リポジトリURL
cd プロジェクト名
npm install

npm runとは

npmでは独自コマンドを登録できます。

scriptsを定義する

package.jsonに以下を追加します。

{
  "scripts": {
    "start": "node index.js"
  }
}

実行する

以下のコマンドで起動できます。

npm run start

開発現場では以下のようなコマンドをよく利用します。

npm run dev
npm run build
npm run preview

特にViteを利用する場合に頻繁に登場します。

よく使うnpmコマンド一覧

バージョン確認

npm -v

プロジェクト初期化

npm init -y

パッケージインストール

npm install パッケージ名

パッケージ削除

npm uninstall パッケージ名

パッケージ更新

npm update

全パッケージインストール

npm install

スクリプト実行

npm run コマンド名

npmとNode.jsの違い

初心者が混同しやすいポイントです。

項目役割
Node.jsJavaScriptを実行する環境
npmパッケージを管理するツール

Node.jsがエンジンで、npmが管理ツールという関係です。

Node.js単体でも動作しますが、現代の開発ではnpmとセットで利用するケースがほとんどです。

npmを学ぶメリット

npmを理解すると以下のようなメリットがあります。

  • 開発環境を素早く構築できる
  • 人気ライブラリを簡単に利用できる
  • チーム開発に参加しやすくなる
  • ReactやVueの学習がスムーズになる
  • 自動化ツールを活用できる

現在のWeb開発では必須知識の一つといえます。

まとめ

npmはNode.js向けのパッケージ管理ツールです。

主な役割は以下のとおりです。

  • パッケージのインストール
  • パッケージの更新
  • パッケージの削除
  • 開発環境の管理
  • npmスクリプトの実行

最初は難しく感じるかもしれませんが、実際によく使うコマンドはそれほど多くありません。

まずはNode.jsをインストールし、npm init、npm install、npm runあたりを実際に試してみることがおすすめです。

関連記事