【初心者向け】npmとは？yarn との違いも含めて5分で解説

この記事で解決すること

「npm install って何をしているの？」「yarnって何？npmと何が違うの？」

JavaScriptの開発を始めると必ず出会う「npm」と「yarn」を、ゼロから解説します。

npmとは

npmは「Node Package Manager」の略で、JavaScriptのライブラリ（パッケージ）を管理するツールです。

Pythonでいう pip、Rubyでいう gem と同じ役割です。

何ができるのか

他の人が作ったライブラリをインストールする
プロジェクトで使っているライブラリの一覧を管理する
ライブラリのバージョンを管理する

具体例

Webサイトにアニメーションを追加したいとき、自分でゼロから書く代わりに：

npm install animate.css

これだけで、世界中の開発者が使っている「animate.css」というライブラリがプロジェクトに追加されます。

package.jsonとは

npm install を実行すると、package.json というファイルにライブラリの情報が記録されます。

{
  "name": "my-project",
  "dependencies": {
    "animate.css": "^4.1.1",
    "axios": "^1.6.0"
  }
}

これは「このプロジェクトはanimate.cssとaxiosを使っています」という設計図です。

チームで開発するとき、package.json を共有すれば、他の人も npm install するだけで同じ環境が作れます。

node_modulesフォルダ

npm install すると node_modules というフォルダが作られます。ここにライブラリの実体が入ります。

このフォルダは非常に大きくなるので、GitHubには上げません。.gitignore に追加してください。

node_modules/

yarnとは

yarnはnpmの代替ツールです。Facebookが開発しました。

やることはnpmとほぼ同じですが、以下の違いがあります。

	npm	yarn
インストール速度	普通	やや速い
コマンド	`npm install`	`yarn add`
ロックファイル	`package-lock.json`	`yarn.lock`
標準搭載	Node.jsに付属	別途インストール必要

どっちを使えばいい？

初心者はnpmで十分です。Node.jsをインストールすれば自動で使えます。

プロジェクトに yarn.lock があればyarn、package-lock.json があればnpmを使ってください。混ぜるとトラブルの原因になります。

よく使うコマンド

# ライブラリをインストール
npm install ライブラリ名

# package.jsonに書かれた全ライブラリをインストール
npm install

# ライブラリを削除
npm uninstall ライブラリ名

# プロジェクトを初期化（package.jsonを作る）
npm init -y

まとめ

npmはJavaScriptのライブラリを管理するツール
npm install でライブラリを追加できる
package.json がライブラリの設計図
node_modules はGitHubに上げない
yarnはnpmの代替。初心者はnpmでOK