Yarn 1.0 → 4.0 の進化まとめ 🐱

1. CLI と出力の改善

Yarn 1.0 の時代

• シンプルな出力
  • 依存追加や削除の際、最小限の情報のみ表示
• エラーメッセージ
  • エラー発生時の情報が少なく、原因特定が難しい場合もあった

Yarn 2 以降の進化

• リッチな CLI 表示
  • 各メッセージにエラーコードが付き、公式ドキュメントで詳細な説明を参照可能に

    ➤ YN0007: │ sharp@npm:0.23.0 must be rebuilt because its dependency tree changed
    

• 改善された色付けとレイアウト
  • パッケージ名やバージョンを視認しやすく改良

Yarn 4.0 の UI 改善

• 直感的な進捗表示
  • yarn install 実行時、追加されたパッケージ数やサイズが表示されるように
• 設定表示コマンドの刷新
  • yarn config コマンドがツリー表示に対応し、各設定の説明も追加

2. コマンドの拡張と新機能

依存管理コマンドの変遷

• Yarn 1.0
  • yarn add、yarn remove、yarn upgrade のみ対応
• Yarn 2 以降
  • ワークスペース対応
    • yarn workspaces foreach で複数パッケージの一括管理が可能に
    • 例：

      # 複数ワークスペースで一括ビルド
      yarn workspaces foreach run build
      

  • 一時実行コマンド yarn dlx
    • npx の代替として、安全にリモートスクリプトを実行可能
    • 例：

      yarn dlx create-react-app my-app
      

プロジェクト初期化とバージョン管理

• Yarn 1.0
  • プロジェクト初期化時に .yarnrc などを手動編集する必要があった
• Yarn 4.0
  • Corepack 統合
    • yarn init や yarn set version で packageManager フィールドが自動設定されるように

3. プロジェクト設定と運用の改善

設定ファイルの統一

• Yarn 1.x
  • .yarnrc、.npmrc など複数の設定ファイルを横断管理
• Yarn 2 以降
  • .yarnrc.yml への統一
    • 設定を YAML 形式で一元管理し、直感的に扱いやすく改良

.yarnrc

registry "https://registry.yarnpkg.com"
strict-ssl true
cache-folder "./.yarn-cache"
network-timeout 60000

.yarnrc.yml

nodeLinker: pnp
enableGlobalCache: true
npmRegistryServer: "https://registry.yarnpkg.com"
networkTimeout: 60000
cacheFolder: ".yarn/cache"
yarnPath: ".yarn/releases/yarn-berry.cjs"

Zero-Install 機能

• 背景
  • yarn install の不要化を実現し、開発環境のセットアップを迅速化
• ユーザー操作への影響
  • node_modules なしでプロジェクトの動作が可能に

yarn 1.0ではnode_modulesが生成されている

yarn 4.0

---

4. セキュリティとパフォーマンスの強化

Hardened Mode の導入 (Yarn 4.0)

• 動作内容
  • ロックファイルとリモートレジストリのメタデータを厳密に検証
• 有効化方法
  • 環境変数または設定ファイルでオンに

    export YARN_ENABLE_HARDENED_MODE=1
    

5. プラグイン統合と拡張性の向上

公式プラグインの同梱 (Yarn 4.0)

• これまでの課題
  • TypeScript サポートやリリースワークフロー用の機能がプラグイン依存で、別途管理が必要だった
• 改善点
  • これらの機能が標準でバンドルされ、すぐに使用可能に

---

依存関係の追加・管理

• Yarn 1.0

  yarn add gsap
  

• Yarn 4.0

  • 同じコマンドでも、視認しやすい詳細な CLI 出力が提供される

Yarn v1.22.5

root@0f5191e65304 /test-project# yarn init -y
yarn init v1.22.5
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
Done in 0.01s.
root@0f5191e65304 /test-project# yarn add gsap
yarn add v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ gsap@3.12.7
info All dependencies
└─ gsap@3.12.7
Done in 0.35s.
root@0f5191e65304 /test-project# yarn remove gsap
yarn remove v1.22.5
[1/2] Removing module gsap...
[2/2] Regenerating lockfile and installing missing dependencies...

success Uninstalled packages.
Done in 0.05s.
root@0f5191e65304 /test-project#

Yarn 4.5.2

root@51fce9a2c186 /test-project (master)# yarn init -y
➤ YN0000: · Yarn 4.5.2
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 26ms
root@51fce9a2c186 /test-project (master)# yarn add gsap
➤ YN0000: · Yarn 4.5.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + gsap@npm:3.12.7
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 46ms
root@51fce9a2c186 /test-project (master)#

ワークスペースの一括操作

• Yarn 2.x 〜 3.x

  yarn workspaces foreach run build
  

• Yarn 3.2 以降

  • 変更のあったワークスペースのみ対象にする --since オプションが追加

  yarn workspaces foreach --since run eslint .
  

一時ツールの安全な実行

• Yarn 1.0
  • npx を使用していたため、誤実行のリスクがあった
• Yarn 2 以降

  yarn dlx create-react-app my-app
  

  • yarn dlx により、ローカルスクリプトの誤実行リスクを回避

プロジェクト初期化の簡素化

• Yarn 4.0
  • Corepack 統合により、yarn init で packageManager が自動設定される

参考

リリースノート