JavaScriptでは、yarnとnpmを使ってパッケージ管理を行うことができますが、やや異なる特徴を持っています。
プログラム開発には、個人やチーム、プロジェクト単位で異なるパッケージマネージャーを使うことがあるため、どちらも知っておいて損はありません。
そこで今回は、yarnのインストール方法と基本的な使い方について解説していきます。
yarn
yarnとは、Facebookによって開発されたパッケージマネージャです。
npmと相互性があるため、npmと同様のpackage.jsonを使用できるなど、npmとyarn間での乗り換えや併用ができます。
>>Yarn
npmが2010年にリリースされたのに比べ、yarnは2016年リリースと比較的新しいツールです。
基本的な機能や操作はnpmと似ていますが、npmに比べてパッケージのインストールが高速な点や、パッケージのバージョンを固定しやすい点の特徴があります。
そのため、現在では、npmよりのyarnをメインのパッケージマネージャーとして利用されることが多くなりました。
yarnのインストール
ここでは、npmを使ってパソコンにyarnをインストールします。
Node.jsをインストールするとnpmが使えるようになります。Node.jsのインストール方法は、以下の記事を参考にしてください。
JavaScriptと言えば、Web制作やWebアプリに利用されるスクリプト言語のことで、表示部分を制御するクライアント言語と呼ばれています。最近では、JavaScriptがサーバー言語としても利用されているのです。 そこで今回は、サーバーサイドで利用できる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.jsonpackage.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.lockyarn.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
まとめ
今回は、yarnのインストール方法と基本的な使い方について解説しました。
yarnは、npmよりもインストールが高速でパッケージのバージョンを固定しやすいというメリットがあります。しかし、実際には各プロジェクトやチームでの開発状況、個人の使いやすさによっても異なります。
yarnはnpmと相互性があるため、まずは両方試してみて使いやすい方が採用するのが良いでしょう。
コメント