Yarn 1.0 → 4.0 の進化まとめ 🐱

## 1. CLI と出力の改善

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

### Yarn 2 以降の進化  
- **リッチな CLI 表示**  
  - 各メッセージにエラーコードが付き、公式ドキュメントで詳細な説明を参照可能に
    ```bash
    ➤ 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` で複数パッケージの一括管理が可能に
    - 例：
      ```bash
      # 複数ワークスペースで一括ビルド
      yarn workspaces foreach run build
      ```
  - **一時実行コマンド `yarn dlx`**  
    - npx の代替として、安全にリモートスクリプトを実行可能
    - 例：
      ```bash
      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
```plaintext
registry "https://registry.yarnpkg.com"
strict-ssl true
cache-folder "./.yarn-cache"
network-timeout 60000
```

.yarnrc.yml
```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`が生成されている
![スクリーンショット 2025-02-23 6.15.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3905122/956e29b4-0065-4cce-9f1b-7638155774f2.png)

yarn 4.0
![スクリーンショット 2025-02-23 6.15.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3905122/0b87210c-c9af-4382-aadb-239866428ccd.png)

---

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

### Hardened Mode の導入 (Yarn 4.0)  
- **動作内容**  
  - ロックファイルとリモートレジストリのメタデータを厳密に検証
- **有効化方法**  
  - 環境変数または設定ファイルでオンに
    ```bash
    export YARN_ENABLE_HARDENED_MODE=1
    ```

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

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

---

### 依存関係の追加・管理  
- **Yarn 1.0**  
  ```bash
  yarn add gsap
  ```
  
- **Yarn 4.0**  
  - 同じコマンドでも、視認しやすい詳細な CLI 出力が提供される

Yarn v1.22.5

```bash
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
```bash
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**  
  ```bash
  yarn workspaces foreach run build
  ```

- **Yarn 3.2 以降**  
  - 変更のあったワークスペースのみ対象にする `--since` オプションが追加
  ```bash
  yarn workspaces foreach --since run eslint .
  ```

### 一時ツールの安全な実行  
- **Yarn 1.0**  
  - npx を使用していたため、誤実行のリスクがあった
- **Yarn 2 以降**  
  ```bash
  yarn dlx create-react-app my-app
  ```
  - `yarn dlx` により、ローカルスクリプトの誤実行リスクを回避

![スクリーンショット 2025-02-23 6.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3905122/f075db65-8a75-4592-af24-2a60a02924f4.png)

### プロジェクト初期化の簡素化  
- **Yarn 4.0**  
  - Corepack 統合により、`yarn init` で `packageManager` が自動設定される

### 参考

[リリースノート](https://yarnpkg.com/blog)