JavaScriptのパッケージマネージャーである「yarn」についてまとめたいと思います。

パッケージマネージャーとは、各ソフトウェアのインストールや更新などの操作、また他のソフトウェアとの依存関係を管理するためのツールです。JavaScriptのフレームワークは大量のプログラムで構成されており、その大量のプログラムを一まとめにしたものをパッケージと呼びます。そしてそのパッケージを管理するツールがパッケージマネージャーです。

パッケージマネージャーを使うとフレームワークのインストールなどを高速かつ正確に行うことができ、現在フレームワークをインストールするために必須の存在になっています。

yarnとは

「yarn」は、JavaScriptをサーバーサイドで動かすための実行エンジンである「Node.js」上で動作するパッケージマネージャーの1つです。yarnと同様の機能を持つパッケージマネージャーとして「npm」があります。

というか、元々はnpmが主流で、yarnが後から台頭してきた形らしいです。

両者を簡単に比較すると以下です。

2016年頃、npm installが遅い、という大きな問題がありました。それに引き換え、新たに登場したyarn installはめちゃくちゃ速く、多くのエンジニアの心を掴んだらしいです。

加えて当時のnpmはバージョン固定ができず、yarnはそれができる、というメリットもありました。バージョン固定ができると、チーム開発をする際にチームメンバーでライブラリ等のバージョンを統一して使用することができて効率的です（npmも現在はバージョン固定できます）。

また、npmはキーボードで打ちにくく、yarn は打ちやすいという違いもあるみたいでした（私のレベルではまだ分からないですが）。

そんな感じで広く普及した yarn ですが、実行する際に関わる重要なファイルが2つあります。

・「package.json」
・「yarn.lock」

この2つについて触れていきたいと思います。

package.json

アプリケーションの情報を保存 / 管理するためのJSONファイルです。保存する情報で最も重要なのは、アプリケーションにインストールする必要があるパッケージと依存関係の情報です。名前やバージョンも必須の記載項目になっています。

yarnをインストールした後、（既に作成済みでなければ）以下のコマンドで作成します。対話式でいくつか質問されるので、その回答に合わせて基本情報が入力されたファイルが作成されます。

package.jsonが既に存在している場合は、単にyarn installするだけでOKです。

$ yarn init   # 基本的な情報が入力されたpackage.jsonが作成される

また、package.jsonには「scripts」という便利なフィールドがあります。例えば以下のように記載しておくと、「yarn start」でAngularのサーバーが起動します。

[package.json]

{
  "name": "sample_json",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 8000 --disableHostCheck",
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.3",

  ～ 中略 ～

  },
}

$ yarn start

スクリプトを登録して使えるのは便利ですね。

yarn.lock

誰でも同じバージョンの依存関係をインストールできるよう、各依存のバージョンを管理するファイルです。add, upgrade, removeなどのyarnコマンドを実行すると自動でyarn.lockも更新されます。

yarn のコマンド

パッケージをインストールしたりアンインストールするためのコマンドは、以下のサイトに分かりやすくまとまっていたので割愛します。

何か皆さんのお役に立てば幸いです。
ここまでお読みいただきありがとうございました！！

参考