フロントエンド開発では、パッケージマネージャーの操作が毎日のように発生しますよね。新しいライブラリを追加したり、不要なパッケージを削除したり、バージョンを更新したりと、プロジェクトの成長とともに必要な作業は増えていきます。

Yarn は npm の代替として登場し、高速で信頼性の高いパッケージ管理を実現してきました。しかし、日常的に使う add、remove、up、run といった基本コマンドも、オプションや使い分けを理解することで、より効率的な開発が可能になります。

本記事では、Yarn の基本操作を実例を交えながら詳しく解説していきますね。初心者の方でも安心して読み進められるよう、段階的に説明していきますので、ぜひ最後までお付き合いください。

背景

パッケージマネージャーの役割

現代の JavaScript 開発では、数多くのライブラリやフレームワークを組み合わせてアプリケーションを構築します。これらの依存関係を手動で管理するのは非常に困難です。

パッケージマネージャーは、以下のような役割を担っています：

• 必要なパッケージの検索とインストール
• バージョン管理と依存関係の解決
• プロジェクト間での一貫性のある環境構築
• セキュリティアップデートの適用

以下の図は、開発者とパッケージマネージャー、npm レジストリの関係を示したものです。

mermaidCopy codeflowchart TB
  dev["開発者"] -->|"コマンド実行<br/>(add/remove/up)"| yarn["Yarn CLI"]
  yarn -->|"パッケージ<br/>検索・取得"| registry["npm Registry"]
  registry -->|"パッケージ<br/>配信"| yarn
  yarn -->|"ファイル<br/>更新"| pkg["package.json"]
  yarn -->|"依存関係<br/>インストール"| modules["node_modules"]
  yarn -->|"ロック<br/>ファイル更新"| lock["yarn.lock"]

この図から、Yarn が開発者の指示を受けて、npm レジストリからパッケージを取得し、プロジェクトに必要なファイルを更新していく流れが理解できます。

Yarn の登場と進化

npm には、インストール速度の遅さや、依存関係の不整合といった課題がありました。2016 年に Facebook が中心となって開発した Yarn は、これらの問題を解決するために誕生しました。

主な改善点は以下の通りです：

#	特徴	説明
1	高速化	並列インストールとキャッシュ機構により、インストール速度が大幅に向上
2	確定的な依存関係	yarn.lock ファイルにより、すべての環境で同じバージョンを保証
3	オフライン機能	一度ダウンロードしたパッケージはキャッシュから再利用可能
4	セキュリティ	インストール前にパッケージの整合性をチェック

2020 年には Yarn 2（Berry）がリリースされ、さらに進化を遂げました。ただし、本記事では広く使われている Yarn 1.x（Classic）の基本操作に焦点を当てて解説していきます。

プロジェクトにおける日常的な操作

実際の開発現場では、以下のような場面で Yarn コマンドを使用します：

新しい機能を追加する際

• UI コンポーネントライブラリをインストール
• 状態管理ライブラリを導入
• API クライアントを追加

プロジェクトのメンテナンス時

• セキュリティ脆弱性のあるパッケージを更新
• 不要になったパッケージを削除
• 開発用ツールのバージョンアップ

日々の開発作業で

• 開発サーバーの起動
• ビルドの実行
• テストの実行

これらの操作を効率的に行うことで、開発のスピードと品質が向上します。

課題

パッケージ管理における一般的な問題

多くの開発者が、以下のような問題に直面しています。

依存関係の複雑さ

パッケージは他のパッケージに依存しており、その依存関係は階層的に広がっていきます。直接インストールしたパッケージ（直接依存）だけでなく、そのパッケージが必要とする間接依存も含めて管理する必要があります。

以下の図は、依存関係の階層構造を示しています。

mermaidCopy codeflowchart TD
  app["アプリケーション"] --> react["react@18.2.0"]
  app --> redux["redux@4.2.0"]
  app --> axios["axios@1.3.0"]

  redux --> dep1["@babel/runtime"]
  axios --> dep2["follow-redirects"]
  axios --> dep3["form-data"]

  dep3 --> dep4["asynckit"]
  dep3 --> dep5["combined-stream"]

  dep5 --> dep6["delayed-stream"]

このような複雑な依存関係を手動で管理するのは現実的ではありません。パッケージマネージャーが自動的に解決してくれる仕組みが不可欠です。

バージョンの不整合

チーム開発では、メンバー間で異なるバージョンのパッケージがインストールされると、「私の環境では動くのに」という問題が発生しやすくなります。

#	問題	影響
1	ローカル環境での動作差異	開発者ごとに異なる動作になる
2	CI/CD での失敗	本番環境で予期しないエラーが発生
3	デバッグの困難さ	問題の原因特定に時間がかかる

操作ミスによるトラブル

コマンドの使い方を誤ると、以下のような問題が起こる可能性があります：

本番用パッケージを開発用として追加

• ビルドサイズの増大
• 不要な依存関係の追加

誤ったパッケージの削除

• アプリケーションの動作不良
• ビルドエラーの発生

バージョン指定のミス

• 互換性のない新バージョンの導入
• 既存コードの破壊的変更

コマンドの使い分けの難しさ

Yarn には多くのコマンドとオプションがありますが、それぞれをいつ使うべきか判断するのは初心者にとって難しいものです。

例えば、パッケージを追加する際にも以下のような選択肢があります：

• 通常の依存関係として追加するか、開発用依存関係として追加するか
• 特定のバージョンを指定するか、最新版を使うか
• グローバルにインストールするか、プロジェクトローカルにインストールするか

これらの判断を適切に行うには、それぞれのコマンドの特性と使い分けを理解することが重要です。

解決策

Yarn の基本コマンド体系

Yarn は直感的で覚えやすいコマンド体系を持っています。主要な 4 つのコマンド（add、remove、up、run）を理解することで、日常的なパッケージ管理のほとんどをカバーできます。

以下の図は、各コマンドの役割と対象ファイルの関係を示しています。

mermaidCopy codeflowchart LR
  subgraph commands["Yarn コマンド群"]
    add["yarn add<br/>(追加)"]
    remove["yarn remove<br/>(削除)"]
    up["yarn up<br/>(更新)"]
    run["yarn run<br/>(実行)"]
  end

  subgraph files["プロジェクトファイル"]
    pkg["package.json"]
    lock["yarn.lock"]
    modules["node_modules"]
    scripts["スクリプト"]
  end

  add -->|更新| pkg
  add -->|生成/更新| lock
  add -->|インストール| modules

  remove -->|更新| pkg
  remove -->|更新| lock
  remove -->|削除| modules

  up -->|更新| pkg
  up -->|更新| lock
  up -->|更新| modules

  run -->|読み取り| scripts
  run -->|実行| scripts

この図から、各コマンドがどのファイルに影響を与えるかが明確になりますね。

コマンド選択のフローチャート

どのコマンドを使うべきか迷ったときは、以下のフローチャートを参考にしてください。

mermaidCopy codeflowchart TD
  start["パッケージ操作が必要"] --> q1{"何をしたい？"}

  q1 -->|"新規追加"| add["yarn add 使用"]
  q1 -->|"削除"| remove["yarn remove 使用"]
  q1 -->|"更新"| up["yarn up 使用"]
  q1 -->|"スクリプト実行"| run["yarn run 使用"]

  add --> q2{"どこに追加？"}
  q2 -->|"本番環境で必要"| add_prod["yarn add パッケージ名"]
  q2 -->|"開発時のみ必要"| add_dev["yarn add -D パッケージ名"]

  up --> q3{"更新範囲は？"}
  q3 -->|"特定パッケージ"| up_one["yarn up パッケージ名"]
  q3 -->|"すべて"| up_all["yarn up '*'"]

  run --> q4{"スクリプト名は？"}
  q4 -->|"package.json<br/>に定義済み"| run_script["yarn run スクリプト名"]

このフローに従って操作することで、適切なコマンドを選択できます。

各コマンドの役割と特徴

それぞれのコマンドの役割を整理しておきましょう。

#	コマンド	主な用途	影響範囲
1	yarn add	新しいパッケージの追加	package.json、yarn.lock、node_modules
2	yarn remove	不要なパッケージの削除	package.json、yarn.lock、node_modules
3	yarn up	パッケージのバージョン更新	package.json、yarn.lock、node_modules
4	yarn run	package.json のスクリプト実行	実行のみ（ファイル変更なし）

これらのコマンドを適切に使い分けることで、安全かつ効率的なパッケージ管理が実現できます。

ファイルの役割理解

Yarn を使いこなすには、操作対象となるファイルの役割も理解しておくことが大切です。

package.json

• プロジェクトのメタデータと依存関係を記述
• スクリプトコマンドを定義
• バージョン範囲を指定（例：^1.0.0、~2.1.0）

yarn.lock

• 実際にインストールされるパッケージの厳密なバージョンを記録
• チーム全員が同じバージョンを使用できるよう保証
• 自動生成されるため、手動で編集しない

node_modules

• 実際のパッケージファイルが格納されるディレクトリ
• git には含めず、.gitignore に追加
• yarn install で再生成可能

これらのファイルが連携することで、確実なパッケージ管理が実現されています。

具体例

yarn add：パッケージの追加

パッケージを追加する際の基本的な使い方から、応用的なオプションまで見ていきましょう。

基本的な追加方法

最もシンプルな形は、パッケージ名を指定するだけです。

bashCopy codeyarn add react

このコマンドは以下の処理を実行します：

1. npm レジストリから react パッケージの最新安定版を検索
2. package.json の dependencies に追加
3. yarn.lock に厳密なバージョン情報を記録
4. node_modules にパッケージをダウンロード
5. 依存パッケージも再帰的にインストール

実行後、package.json には以下のように記録されます。

jsonCopy code{
  "dependencies": {
    "react": "^18.2.0"
  }
}

^18.2.0 という記法は、18.x.x の範囲内で最新版を使用することを意味します。メジャーバージョンは固定され、マイナー・パッチバージョンは更新可能です。

開発用依存関係として追加

テストツールやビルドツールなど、開発時にのみ必要なパッケージは -D（--dev）オプションを使います。

bashCopy codeyarn add -D @types/react

これにより、package.json の devDependencies セクションに追加されます。

jsonCopy code{
  "devDependencies": {
    "@types/react": "^18.0.27"
  }
}

本番環境でのビルド時には、devDependencies はインストールされないため、デプロイサイズの削減につながります。

バージョンを指定して追加

特定のバージョンが必要な場合は、@ に続けてバージョン番号を指定できます。

bashCopy codeyarn add react@17.0.2

この場合、厳密に 17.0.2 がインストールされ、package.json には以下のように記録されます。

jsonCopy code{
  "dependencies": {
    "react": "17.0.2"
  }
}

バージョン範囲の記法も使用可能です：

#	記法	意味	例
1	^1.2.3	マイナー・パッチ更新を許可	1.2.3 〜 2.0.0 未満
2	~1.2.3	パッチ更新のみ許可	1.2.3 〜 1.3.0 未満
3	1.2.3	厳密に一致	1.2.3 のみ
4	>=1.2.3 <2.0.0	範囲指定	指定範囲内

複数パッケージの同時追加

スペース区切りで複数のパッケージを一度に追加できます。

bashCopy codeyarn add axios react-router-dom zustand

これは 3 つのコマンドを個別に実行するより効率的です。Yarn が依存関係を一度に解決し、最適化されたインストールを行います。

開発用パッケージも同様に追加可能です。

bashCopy codeyarn add -D typescript @types/node @types/react

グローバルインストール

プロジェクトに依存しない、システム全体で使うツールは global オプションでインストールします。

bashCopy codeyarn global add create-react-app

ただし、現代の開発では npx や yarn dlx を使った一時的な実行が推奨されることが多くなっています。

bashCopy codeyarn dlx create-react-app my-app

これにより、グローバル環境を汚さずに最新版のツールを実行できます。

Peer Dependencies の扱い

一部のパッケージは、特定のパッケージが既にインストールされていることを前提としています（peer dependencies）。

例えば、React 用のライブラリをインストールする場合：

bashCopy codeyarn add react-hook-form

実行時に以下のような警告が表示されることがあります：

arduinoCopy codewarning "react-hook-form > react@^16.8.0 || ^17.0.0 || ^18.0.0" has incorrect peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0"

この場合、react が必要なバージョンでインストールされているか確認し、必要に応じて追加またはアップデートします。

yarn remove：パッケージの削除

不要になったパッケージを適切に削除することも重要です。

基本的な削除方法

パッケージ名を指定するだけで削除できます。

bashCopy codeyarn remove lodash

このコマンドは以下の処理を実行します：

1. package.json から lodash エントリを削除
2. yarn.lock から関連エントリを削除
3. node_modules から lodash ディレクトリを削除
4. 他のパッケージに必要ない場合、依存パッケージも削除

実行前後の package.json の変化：

実行前

jsonCopy code{
  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^18.2.0"
  }
}

実行後

jsonCopy code{
  "dependencies": {
    "react": "^18.2.0"
  }
}

複数パッケージの削除

add と同様、複数のパッケージを一度に削除できます。

bashCopy codeyarn remove lodash moment jquery

リファクタリングで不要になった古いライブラリを一括削除する際に便利です。

開発用パッケージの削除

開発用依存関係（devDependencies）のパッケージも同じコマンドで削除できます。Yarn が自動的に判別します。

bashCopy codeyarn remove @types/lodash

削除時の注意点

パッケージを削除する前に、以下の点を確認しましょう：

#	確認項目	理由
1	コード内で使用されていないか	削除後にビルドエラーが発生する可能性
2	他のパッケージが依存していないか	間接依存がある場合は削除できない
3	package.json のスクリプトで使用されていないか	スクリプト実行時にエラーが発生

IDE の検索機能を使って、削除予定のパッケージのインポート文を検索することをおすすめします。

javascriptCopy code// このようなインポートが残っていないか確認
import _ from 'lodash';
import { format } from 'date-fns';

yarn up：パッケージの更新

パッケージのバージョンを最新に保つことは、セキュリティとパフォーマンスの観点から重要です。

特定パッケージの更新

最も基本的な使い方は、パッケージ名を指定する方法です。

bashCopy codeyarn up axios

このコマンドは以下の処理を実行します：

1. package.json で指定された範囲内で最新バージョンを検索
2. 該当バージョンがあれば、package.json を更新
3. yarn.lock を更新
4. node_modules を更新

例えば、package.json に "axios": "^1.2.0" と記載されている場合、1.x.x の最新版（例：1.6.7）にアップデートされます。

メジャーバージョンの更新

デフォルトでは、package.json の範囲指定に従いますが、メジャーバージョンを超えて更新したい場合は --latest オプションを使います。

bashCopy codeyarn up react --latest

これにより、17.x から 18.x へのメジャーアップデートが可能になります。

ただし、メジャーバージョンアップは破壊的変更を含む可能性が高いため、以下の手順で慎重に行いましょう：

1. 公式のマイグレーションガイドを確認
2. CHANGELOG で変更内容を把握
3. テストを実行して互換性を確認
4. 必要に応じてコードを修正

すべてのパッケージを更新

プロジェクト全体のパッケージを一度に更新する場合は、ワイルドカード '*' を使います。

bashCopy codeyarn up '*'

注意: シングルクォートで囲むことが重要です。囲まないと、シェルがワイルドカードを展開してしまいます。

この操作は慎重に行うべきで、以下のタイミングで実施することをおすすめします：

• 定期的なメンテナンスタイム
• セキュリティアップデートが必要な場合
• 大きな機能追加の前

インタラクティブな更新

Yarn 2 以降では yarn upgrade-interactive コマンドがありましたが、Yarn 1.x では以下の手順で更新可能なパッケージを確認できます。

まず、outdated コマンドで更新可能なパッケージを一覧表示します。

bashCopy codeyarn outdated

出力例：

graphqlCopy codePackage       Current  Wanted  Latest  Package Type
axios         1.2.0    1.6.7   1.6.7   dependencies
typescript    4.9.0    4.9.5   5.3.3   devDependencies

この情報をもとに、必要なパッケージを選択的に更新できます。

bashCopy codeyarn up axios typescript

更新後の確認手順

パッケージを更新したら、以下の確認を行いましょう。

1. ビルドの確認

bashCopy codeyarn build

エラーが発生しないか確認します。TypeScript を使用している場合は、型エラーに特に注意が必要です。

2. テストの実行

bashCopy codeyarn test

すべてのテストがパスすることを確認します。

3. 開発サーバーの起動確認

bashCopy codeyarn dev

実際にアプリケーションが正常に動作するか確認します。

問題が発生した場合は、git で変更を巻き戻すか、問題のあるパッケージを以前のバージョンに戻します。

bashCopy codeyarn up axios@1.2.0

yarn run：スクリプトの実行

package.json に定義されたスクリプトを実行するためのコマンドです。

スクリプトの定義

まず、package.json の scripts セクションにコマンドを定義します。

jsonCopy code{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "lint": "eslint . --ext .ts,.tsx",
    "type-check": "tsc --noEmit"
  }
}

各スクリプトは、コマンドラインで実行するコマンドを文字列として記述します。

基本的な実行方法

定義したスクリプトは yarn run コマンドで実行できます。

bashCopy codeyarn run dev

実際には、run は省略可能で、以下のように書くこともできます。

bashCopy codeyarn dev

ただし、Yarn 自体のコマンド（add、remove など）と名前が重複する場合は、run を明示的に指定する必要があります。

よく使うスクリプトの例

開発現場でよく定義されるスクリプトを紹介します。

開発サーバーの起動

jsonCopy code{
  "scripts": {
    "dev": "next dev -p 3000"
  }
}

bashCopy codeyarn dev

ホットリロード機能付きの開発サーバーが起動します。コードを変更すると、自動的にブラウザが更新されます。

本番用ビルド

jsonCopy code{
  "scripts": {
    "build": "next build"
  }
}

bashCopy codeyarn build

最適化された本番用のビルドを生成します。

テストの実行

jsonCopy code{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

bashCopy codeyarn test
yarn test:watch
yarn test:coverage

目的に応じて異なるオプションでテストを実行できます。

リンターとフォーマッター

jsonCopy code{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write \"**/*.{ts,tsx,json,md}\""
  }
}

bashCopy codeyarn lint
yarn lint:fix
yarn format

コード品質を維持するためのツールを実行します。

スクリプトの連鎖実行

複数のスクリプトを順番に実行したい場合は、&& で連結します。

jsonCopy code{
  "scripts": {
    "prebuild": "yarn lint && yarn type-check",
    "build": "next build",
    "postbuild": "echo 'Build completed!'"
  }
}

yarn build を実行すると、以下の順序で実行されます：

1. prebuild（存在する場合、自動的に先に実行）
2. build
3. postbuild（存在する場合、自動的に後で実行）

並列実行したい場合は、npm-run-all のようなツールを使うか、& で連結します。

jsonCopy code{
  "scripts": {
    "dev:all": "yarn dev:server & yarn dev:client"
  }
}

引数の渡し方

スクリプトに引数を渡す場合は、-- の後に指定します。

bashCopy codeyarn test -- --watch --coverage

これにより、test スクリプトで定義されたコマンドに --watch --coverage オプションが渡されます。

環境変数の設定

スクリプト実行時に環境変数を設定できます。

jsonCopy code{
  "scripts": {
    "dev:prod": "NODE_ENV=production next dev",
    "build:staging": "NEXT_PUBLIC_API_URL=https://staging-api.example.com next build"
  }
}

クロスプラットフォーム対応のため、cross-env パッケージを使うことも推奨されます。

bashCopy codeyarn add -D cross-env

jsonCopy code{
  "scripts": {
    "dev:prod": "cross-env NODE_ENV=production next dev"
  }
}

これにより、Windows でも Unix 系 OS でも同じスクリプトが動作します。

実践的な使用例：新規プロジェクトのセットアップ

ここまで学んだコマンドを組み合わせて、実際のプロジェクトセットアップの流れを見てみましょう。

ステップ 1：プロジェクトの初期化

bashCopy codemkdir my-app
cd my-app
yarn init -y

-y オプションを付けると、対話的な質問をスキップして、デフォルト値で package.json が生成されます。

ステップ 2：フレームワークのインストール

Next.js を使った React アプリケーションを作る場合：

bashCopy codeyarn add next react react-dom

TypeScript を使う場合は、開発用の型定義も追加します。

bashCopy codeyarn add -D typescript @types/react @types/node

ステップ 3：開発ツールの追加

コード品質を保つためのツールを追加します。

bashCopy codeyarn add -D eslint prettier eslint-config-prettier
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

ステップ 4：スクリプトの定義

package.json を編集して、スクリプトを定義します。

jsonCopy code{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write \"**/*.{ts,tsx,json,md}\""
  }
}

ステップ 5：開発開始

bashCopy codeyarn dev

これで開発サーバーが起動し、開発を開始できます。

以下の図は、プロジェクトセットアップの全体フローを示しています。

mermaidCopy codeflowchart TD
  start["プロジェクト開始"] --> init["yarn init -y<br/>(初期化)"]
  init --> fw["yarn add next react<br/>(フレームワーク追加)"]
  fw --> types["yarn add -D typescript @types/react<br/>(型定義追加)"]
  types --> tools["yarn add -D eslint prettier<br/>(開発ツール追加)"]
  tools --> scripts["package.json に<br/>スクリプト定義"]
  scripts --> dev["yarn dev<br/>(開発開始)"]

  dev --> coding["コーディング"]
  coding --> need_pkg{"新しいパッケージ<br/>必要？"}
  need_pkg -->|"はい"| add["yarn add"]
  add --> coding
  need_pkg -->|"いいえ"| continue["開発継続"]

トラブルシューティング：よくあるエラーと解決方法

実際の開発では、さまざまなエラーに遭遇することがあります。代表的なものと解決策を紹介します。

エラー 1：ERESOLVE - 依存関係の競合

エラーメッセージ

vbnetCopy codeerror An unexpected error occurred: "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz: Request failed \"404 Not Found\""

発生条件

• パッケージのバージョンが存在しない
• ネットワークの問題で npm レジストリにアクセスできない
• キャッシュが破損している

解決方法

まず、キャッシュをクリアします。

bashCopy codeyarn cache clean

それでも解決しない場合は、node_modules と yarn.lock を削除して再インストールします。

bashCopy coderm -rf node_modules yarn.lock
yarn install

エラー 2：Integrity check failed

エラーメッセージ

rustCopy codeerror Integrity check failed for "react" (computed integrity doesn't match our records)

発生条件

• ダウンロード中にファイルが破損
• キャッシュの不整合

解決方法

キャッシュをクリアして再インストールします。

bashCopy codeyarn cache clean
rm -rf node_modules
yarn install

エラー 3：Script not found

エラーメッセージ

goCopy codeerror Command "dev" not found.

発生条件

• package.json の scripts セクションに該当するスクリプトが定義されていない
• スクリプト名のタイプミス

解決方法

package.json を確認し、スクリプトが正しく定義されているか確認します。

jsonCopy code{
  "scripts": {
    "dev": "next dev"
  }
}

定義されているスクリプトの一覧は、以下のコマンドで確認できます。

bashCopy codeyarn run

エラー 4：Permission denied

エラーメッセージ

vbnetCopy codeerror Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules'

発生条件

• グローバルインストールで権限が不足
• システムディレクトリへのアクセスが制限されている

解決方法

sudo を使わずに済むよう、npm のグローバルディレクトリを変更することをおすすめします。

bashCopy codemkdir ~/.yarn-global
yarn config set prefix ~/.yarn-global

そして、パスを追加します（.bashrc や .zshrc に追記）。

bashCopy codeexport PATH="$HOME/.yarn-global/bin:$PATH"

エラー 5：Module not found after install

エラーメッセージ

arduinoCopy codeError: Cannot find module 'axios'

発生条件

• パッケージのインストールに失敗
• node_modules の不整合

解決方法

該当パッケージを再インストールします。

bashCopy codeyarn remove axios
yarn add axios

それでも解決しない場合は、完全な再インストールを試みます。

bashCopy coderm -rf node_modules yarn.lock
yarn install

パフォーマンス最適化のヒント

Yarn の動作を高速化するためのテクニックを紹介します。

オフラインミラーの活用

一度ダウンロードしたパッケージをローカルに保存し、ネットワークアクセスを減らすことができます。

bashCopy codeyarn config set yarn-offline-mirror ./npm-packages-offline-cache
yarn config set yarn-offline-mirror-pruning true

並列インストール数の調整

デフォルトでは、Yarn は並列でパッケージをインストールします。マシンスペックに応じて調整できます。

bashCopy codeyarn config set network-concurrency 8

キャッシュの確認と管理

キャッシュの場所を確認：

bashCopy codeyarn cache dir

キャッシュのサイズを確認：

bashCopy codedu -sh $(yarn cache dir)

古いキャッシュをクリア：

bashCopy codeyarn cache clean

まとめ

Yarn の基本操作である add、remove、up、run の 4 つのコマンドについて、実例を交えながら詳しく解説してきました。

それぞれのコマンドは、以下のような役割を持っています：

yarn add - 新しいパッケージをプロジェクトに追加します。開発用依存関係（-D オプション）と本番用依存関係を使い分けることで、効率的なパッケージ管理が可能になります。

yarn remove - 不要になったパッケージを安全に削除します。package.json、yarn.lock、node_modules すべてから適切に削除されるため、手動での管理は不要です。

yarn up - パッケージを最新バージョンに更新します。セキュリティパッチやパフォーマンス改善を取り込むため、定期的な実行が推奨されますね。

yarn run - package.json に定義されたスクリプトを実行します。開発サーバーの起動、ビルド、テストなど、日常的な開発タスクを簡単に実行できます。

これらのコマンドを適切に使い分けることで、パッケージ管理の効率が大幅に向上します。特に重要なのは、package.json と yarn.lock の役割を理解し、チーム全体で一貫した環境を維持することです。

エラーが発生した際も、本記事で紹介したトラブルシューティング手順を参考にすることで、多くの問題は解決できるでしょう。キャッシュのクリアや再インストールといった基本的な対処法を知っておくことが大切です。

Yarn はシンプルながらも強力なツールで、これらの基本操作をマスターすることで、日々の開発作業がスムーズになります。まずは実際のプロジェクトで試してみて、コマンドの動作を体感することをおすすめします。

関連リンク

• Yarn 公式ドキュメント
• Yarn CLI コマンドリファレンス
• npm レジストリ
• package.json の仕様
• セマンティックバージョニング