npmとyarnの違い

npm yarnとは

どちらもJavaScriptのパッケージ管理ツール。
パッケージの依存関係（例えばAというパッケージはBがないと動かないなど）を整理した上で、まとめてインストールしてくれる優れもの。
パッケージとは世界中の開発者が作成したモジュールをまとめたもの。
これをインストールすることで、日付計算や字下げなど、自分で開発するには時間がかかるモジュールをすぐに使えるようになります。

npmとは

2010年にnpm incによって開発(現在はGitHubの子会社)

基本コマンド

プロジェクトの初期化： npm init
パッケージのインストール： npm install / npm i

yarnとは

2016年にMeta社（旧Facebook）によって開発された。やっていることはnpmと同一だが、当時はnpmより圧倒的に高速だった。

基本コマンド

プロジェクトの初期化： yarn init
パッケージのインストール： yarn install / yarn

npm install / yarn installするとどうなる？

1. package.json の読み込み

プロジェクトにある設定ファイル（package.json）に書かれた「アプリを動かすのに必要なライブラリ」を読み込みます。
例)

{
  "name": "app",
  "version": "1.0.0",
  "dependencies": {
    "axios": "^1.6.0", #サーバーからAPI通信を行う
    "date-fns": "^3.0.0", #日付の計算や変換を行う
    "react": "^18.2.0" # フレームワーク
  },
  "devDependencies": {
    "eslint": "^8.50.0", # フロントエンド静的解析ツール
    "prettier": "^3.0.0",# 字下げなど、コードを見やすくする
  }
}

上記のdependenciesとは本番環境で使われるパッケージ、devDependenciesは開発・テスト環境でのみ使われるパッケージを指す。

2. ダウンロードと配置

インターネット上から対象のライブラリをダウンロードし、プロジェクト内の node_modules というフォルダの中に自動で保存します。
このnode_modulesから実際にパッケージを使います。

3. ロックファイルの生成

次回同じものをインストールしたときにバージョンがズレないよう、実際にインストールされた正確なバージョンを記録した「鍵」のようなファイルを生成します。

npm → package-lock.json が作られる

Yarn → yarn.lock が作られる

node_modulesが消えたとしても、ロックファイルとpackage.jsonがあれば復元できる。

まとめ

普段業務で使うけど、そもそも何してるんだっけとなったのでまとめました。