【JavaScriptの応用】npmの進化版？yarnのインストール方法を解説

現在JavaScriptでは、npmとyarnというパッケージマネージャーが使われており、当ブログでもnpmのインストール方法を解説しました。
yarnもnpmと似たようなコマンド操作でパッケージ管理を行うことができますが、やや異なる特徴を持っています。

プログラム開発には、個人やチーム、プロジェクト単位で異なるパッケージマネージャーを使うことがあるため、npmに加えてyarnについても知っておいて損はありません。
今回は、yarnのインストール方法と基本的な使い方について解説していきます。

yarn

「yarn」とは、Facebookによって開発されたパッケージマネージャです。
npmと相互性があるため、npmと同様のpackage.jsonを使用できるなど、npmとyarn間での乗り換えや併用ができます。

npmが2010年にリリースされたのに比べ、yarnは2016年リリースと、比較的新しいツールです。

基本的な機能や操作はnpmと似ていますが、npmに比べてパッケージのインストールが高速な点や、パッケージのバージョンを固定しやすい点の特徴があります。
そのため、現在では、npmよりのyarnをメインのパッケージマネージャーとして利用されることが多くなりました。

yarnのインストール

Image may be NSFW.
Clik here to view.
ここでは、npmを使ってパソコンにyarnをインストールします。
Node.jsをインストールするとnpmが使えるようになります。Node.jsのインストール方法は以下を参考にしてください。

Image may be NSFW.
Clik here to view.

2021.10.07

【JavaScriptの応用】サーバーサイドで使用できる「node.js」とは？インストール手順も解説

JavaScriptと言えば、Web制作やWebアプリに利用されるスクリプト言語のことで、表示部分を制御するクライアント言語と呼ばれています。最近では、JavaScriptがサーバー言語としても利用されているの...

yarnのインストールには以下のコマンドを入力してください。

$ npm install -g yarn

インストールが完了したら、バージョンを確認してみましょう。

$ yarn -v
1.22.4
//出力結果は、インストールされているバージョン、インストール時期によって異なります

バージョン確認ができれば、インストールが完了です。

インストールするパッケージには、グローバルパッケージとローカルパッケージの2つに分類されます。
ローカルパッケージは、1つのプロジェクト内のみで利用されるのに対し、グローバルパッケージは、複数のプロジェクトで共有することが可能です。

上記でyarnをインストールした際に、「npm install -g パッケージ名」とコマンドを入力しましたが、「-g」の部分がグローバルであることを指します。
つまり、-gのオプションを付けることでグローバル領域にインストールし、-gを付けないとローカル領域にインストールされます。

他のパッケージをインストールする際にも、プロジェクト単位であるか、複数のプロジェクトで共有したいかによって、ローカルまたは、グローバルにインストールできることを意識すると良いでしょう。

package.jsonファイルの作成

yarnのインストールが完了したので、package.jsonファイルを作成していきましょう。

まずは、ルートディレクトリに「yarn-test」というディレクトリを作成し、移動します。

$ mkdir yarn-test
$ cd yarn-test

専用のディレクトリに移動ができたら、npmと同様に「yarn init」というコマンドを使用します。
今回は、package.jsonが生成される際の質問文の確認を省略するため、「yarn init -y」を入力します。

$ yarn init -y
yarn init v1.22.4
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.05s.

package.jsonのファイルの作成ができたことが確認できます。

$ ls
package.json

package.jsonの中身は、以下のようになっています。

$ cat package.json
{
  "name": "yarn-test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

yarnでパッケージをインストール

これで準備が整いました。
yarnでパッケージのインストールを行うには、「yarn add パッケージ名」というコマンドを使います。

npmと同様に、複数のパッケージを指定することができます。

$ yarn add lodash react redux

パッケージの種類にもよりますが、ほんの数秒で上記の3つをインストールするができました。

$ yarn add lodash react redux
yarn add v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
...
✨ Done in 2.35s.

パッケージのインストールにより、「node_nodules」と「yarn.lock」が保存されたことが確認できます。

$ ls
node_modules package.json yarn.lock

yarn.lockは、npmで言うpackage-lock.jsonと同じ役割で、各プロジェクトが依存しているパッケージの正確なバージョン情報が記録されているファイルです。
npmとは違ったアルゴリズムで、より厳密にパッケージが管理されます。
npmでは環境によってバグが起きてしまうことがありますが、yarnであればどのような環境下でも必ず同じバージョンのパッケージがインストールされるなど、管理がしやすいと言われています。

package.jsonの中身を確認してみましょう。

「”dependencies”」の中にインストールしたパッケージと、それらのバージョンの範囲情報が追加されています。

$ cat package.json
{
  ...
  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "redux": "^4.1.1"
  }
}

さいごに、yarnでグローバルパッケージをインストールしてみましょう。
yarnの場合は、「yarn global add パッケージ名」というコマンドを利用します。

ここでは試しにparcelというビルドツールをインストールしてみます。

$ yarn global add parcel-bundler
...
✨ Done in 11.38s.

知っておくと良いコマンド

インストールや確認の他にも知っておくと便利なコマンドがあります。
以下を参考にしてみてください。

・バージョン確認：yarn -v
・初期化：yarn init
・パッケージのインストール：yarn add パッケージ名
・パッケージをグローバル領域でインストール：yarn global add パッケージ名
・開発環境のみで必要なパッケージのインストール：yarn add パッケージ名 –dev
・パッケージのアップデート：yarn upgrade パッケージ名
・パッケージのアンインストール：yarn remove パッケージ名
・ヘルプ機能：yarn help
・パッケージの一覧化：yarn ls