フロントエンド - ビルド・ツール

yarn やーん

パッケージマネージャーnpmNode.js依存関係管理JavaScriptPlug'n'Play

yarnについて教えて

簡単に言うとこんな感じ！

yarnはJavaScriptのライブラリ（部品）を管理するツールだよ！「このプロジェクトにはこのライブラリのこのバージョンを使う」ってのを自動で整理してくれる。npm（エヌピーエム）という標準ツールの弱点を補うために作られた、ちょっと賢い版の管理ツールってこと！

yarnとは

yarnは、JavaScriptのプロジェクトで使う外部ライブラリ（パッケージ）を管理するためのパッケージマネージャーです。Webアプリやシステムを開発するとき、世界中の開発者が公開したコード部品を組み合わせて使うのが一般的ですが、その「どの部品をどのバージョン使うか」を管理するのがyarnの役割です。

2016年にFacebook（現Meta）がnpm（Node Package Manager）の課題を解決するために開発・公開しました。当時のnpmは、インストール速度が遅い・チーム内で環境の差異が出やすい・セキュリティが弱いといった問題を抱えていました。yarnはこれらを「ロックファイル」「並列ダウンロード」「キャッシュ活用」の3つのアプローチで解決し、大規模プロジェクトでも安定して使えるツールとして急速に普及しました。

現在はバージョン1系（Classic）とバージョン2/3/4系（Berry）の2系統が存在します。yarn Berryでは「Plug’n’Play（PnP）」という革新的な仕組みが導入され、従来のnode_modulesフォルダを使わない依存管理も選べるようになっています。

yarnの核心的な仕組み

基本的なコマンド対応表

操作	yarnコマンド	npmコマンド
パッケージ追加	`yarn add パッケージ名`	`npm install パッケージ名`
開発用パッケージ追加	`yarn add -D パッケージ名`	`npm install --save-dev パッケージ名`
全パッケージをインストール	`yarn install`	`npm install`
パッケージ削除	`yarn remove パッケージ名`	`npm uninstall パッケージ名`
スクリプト実行	`yarn スクリプト名`	`npm run スクリプト名`
グローバルインストール	`yarn global add パッケージ名`	`npm install -g パッケージ名`

yarnの3つの強み

特徴	内容
ロックファイル（yarn.lock）	「このバージョンで動いた」という状態を記録。チーム全員・本番環境でも同じ構成を再現できる
並列ダウンロード	複数のパッケージを同時に取得するので、npmより高速にインストールできる
オフラインキャッシュ	一度取得したパッケージをローカルに保存。ネット接続なしでも再インストール可能

サブトピック1: 覚え方

「yarn＝毛糸」 と覚えよう。糸（ライブラリ）をきれいに束ねてプロジェクトを編み上げるイメージ！ロックファイルは「この毛玉（バージョン）でこの模様（動作）ができた」というレシピメモだよ。

サブトピック2: yarn.lockファイルの役割

# yarn.lock の例（自動生成されるファイル）

react@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz"
  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
  dependencies:
    loose-envify "^1.1.0"

このファイルがあることで、「Aさんのパソコン」「Bさんのパソコン」「本番サーバー」が全員まったく同じバージョンのライブラリを使えるようになります。必ずGit等でチームと共有するのが鉄則です。

歴史と背景

2010年 — npmがNode.jsの標準パッケージマネージャーとして登場。当初は個人・小規模向けで十分だった
2015年頃 — FacebookなどのメガIT企業がJavaScriptを大規模利用し始め、npmの「インストールが遅い」「環境差異が出る」問題が顕在化
2016年10月 — FacebookがGoogleやExponentと共同でyarn v1を公開。ロックファイルと並列ダウンロードで一気に普及
2018年 — npmもv5でロックファイル（package-lock.json）を導入。両者の機能差が縮まり始める
2020年 — yarn v2（Berry） リリース。Plug’n’Play・Zero-Installsなど大幅に設計を刷新。ただし破壊的変更が多く移行は段階的に
2022〜現在 — yarn v3/v4がリリース。npmも大幅改善され、pnpmという第3の選択肢も台頭。3つどもえの競争状態に

yarn / npm / pnpm の比較

3大パッケージマネージャーの特徴を整理します。

Workspaces（モノレポ）への対応

大規模なプロジェクトでは「モノレポ（ひとつのリポジトリに複数のアプリを入れる構成）」が使われます。yarnはWorkspaces機能で複数パッケージをまとめて管理できます。

my-project/
├── package.json        ← ルートの管理ファイル
├── yarn.lock
├── apps/
│   ├── web/            ← Webアプリ
│   │   └── package.json
│   └── admin/          ← 管理画面
│       └── package.json
└── packages/
    └── shared/         ← 共通コンポーネント
        └── package.json

yarn install を一度実行するだけで、すべてのアプリの依存関係をまとめてインストールできます。