1. ホーム
  2. コース一覧
  3. Node.js環境構築コース
  4. yarnコマンドでNode.jsパッケージをインストールしてみよう

Node.js環境構築コース2/10

yarnコマンドでNode.jsパッケージをインストールしてみよう

ここではyarnについて詳しく学びながら、yarnコマンドの使い方についてご説明します。

yarnとは

node.jsの代表的なパッケージ管理システムにはnpmとyarnの二種類があります。

yarn の歴史は比較的新しく、2016年にFacebook(現在はMeta)社が公開しました。npmとの互換性もあり同じくpackage.jsonが使用できます。yarnはnpmよりも比較的早い速度で実行が可能です。

yarn.lockファイルにより、npmよりも厳密に各パッケージのインストールバージョンの固定が可能です。

yarnのinstall

yarnはnpm経由でインストールを実行します。nodeおよびnpmのバージョンを確認し、yarnをインストールしてみましょう。次のコマンドの -g オプションは、グローバルにインストールを行う、つまり自分のパソコンのどこからでもyarnを参照できるようにするという意味です。

node -v # Node.jsのバージョン確認
npm -v # npmのバージョン確認
sudo npm install -g yarn # yarnインストール

npmについて

npmについては別の記事にてご紹介しているので、次のリンクからご覧ください。 https://envader.plus/course/9/scenario/1078

yarnのバージョン確認方法

インストールできたら再度バージョンを確認してみましょう。コマンドは次です。

yarn -v
x.xx.xx

yarn helpコマンド

次のコマンドでyarnにどのようなコマンドがあるか全体像を確認することができますので実行してみましょう。特定のコマンドの使い方を調べる場合は、二つ目のコマンドを実行します。

yarn --help
yarn [特定のコマンド] --help

yarn initコマンドで新規プロジェクトを作成する

新規プロジェクトを作成するための初期化コマンドは次の通りです。こちらのコマンドでpackage.jsonを作成することができます。package.jsonは、ライブラリの依存関係を記述したファイルのことで、パッケージのバージョンやどのようなパッケージを追加したかなど様々な情報が記載されています。

yarn initコマンドを実行すると、パッケージ名はどのようにするか?パッケージのバージョンはどうするかなど複数の質問を受けます。yarn init -yを実行すると、質問を省略することができます。

yarn init
yarn init -y

作成したいプロジェクトのディレクトリへ移動し、yarn initコマンドを実行すると、package.jsonが作成されているのが分かります。

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

yarn addでパッケージを追加する

新たにパッケージを追加する場合は次のコマンドを使用します。「-D」オプションを追加すると、開発環境でのみ依存関係のあるパッケージとしてpackage.jsonに認識させることができ、本番環境の構築を行う時にはこのパッケージは含まれなくなります。何も考えずに追加するとどんどんパッケージが膨れ上がるので明確に使い分けましょう。

# 使用例
yarn add [追加したいパッケージ名]

追加したいパッケージ名の後に何も指定しないと、latest(最新)のパッケージが自動で追加されます。

パッケージのバージョンを指定したい場合には、パッケージ名の後にバージョンを指定します。

yarn add [追加したいパッケージ名]@1.2.3

例として、Reactをバージョンを指定せずに追加する場合は次のコマンドを実行します。

yarn add react

package.jsonを確認すると、dependenciesの項目にreactが追加され、バージョンが記載されているのが分かります。

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

yarn info versionsコマンドでバージョンを確認する

追加可能なパッケージのバージョンを確認したい場合には、yarn info versionsコマンドで確認することができます。

yarn info [追加したいパッケージ名] versions

Reactの追加可能なバージョンを確認する場合は次のコマンドを実行します。

yarn info react versions
yarn info v1.22.19
[
  '0.0.0-375616788',
  '0.0.0-00d4f95c2',
  '0.0.0-0203b6567',
  '0.0.0-0935a1db3',
  '0.0.0-0c756fb-697f004',
  '0.0.0-0c756fb-f7f79fd',
  '0.0.0-0cf9fc10b',
  '0.0.0-0e4135e8c',
  .....

yarn removeコマンドでパッケージを削除する

パッケージを削除する場合は次のコマンドを使用します。

yarn remove [削除したいパッケージ名]

yarn removeコマンドを実行すると、package.jsonとyarn.lockファイルに記載されていたパッケージが削除されます。

yarn remove react
yarn remove v1.22.19
[1/2] Removing module react...
[2/2] Regenerating lockfile and installing missing dependencies...

success Uninstalled packages.
Done in 0.13s.

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

yarn installでパッケージの再インストールを行う

新たにパッケージを追加した場合や削除した場合は依存関係が変更される場合があります。また、プロジェクト内の他の開発者がパッケージを追加した場合、そのパッケージの依存関係も取得する必要が出てきます。このような場合に使用するのがyarn installコマンドです。installは省略可能です。

yarn install
yarn

起動を中断したい時は、「Ctrl + C」または「Command + C」で中断が可能です。

コマンドを実行すると、node_modulesフォルダへpackage.jsonに記載されているパッケージが全てインストールされます。

まとめ

今回はyarnコマンドの使い方について解説しました。

  • yarn initでプロジェクトの初期化を行う
  • yarn addで使用するパッケージの追加

この二つの基本的コマンドはよく使うコマンドですので覚えておきましょう。

問題を解くためには、十分な画面サイズのPC環境をご利用下さい。