yarn でパッケージをインストールする方法 初心者向け完全ガイド

はじめに

プログラミングを始めたばかりの方にとって、Node.jsのパッケージをどのように管理すればよいかは大きな課題かもしれません。 特に、たくさんのパッケージを扱う場面では手動で管理するのが大変ですね。

そこでyarnというパッケージマネージャが役立ちます。 シンプルなコマンドでパッケージを追加したり、バージョンを管理したりできるので、初心者でも比較的取り組みやすいでしょう。 このガイドでは、yarn でパッケージをインストールする方法をメインに、Node.jsやnpmとの違いも交えてわかりやすく解説します。

プログラミングを始めて日が浅い方でも安心して読み進められるよう、専門用語はできるだけ少なくし、具体的なシーンを思い浮かべやすいように説明します。 ぜひ最後まで読んでみてください。

この記事を読むとわかること

  • Yarnが何なのか、npmとは何が違うのか
  • Yarnのインストール手順と事前準備
  • yarn addを使ったパッケージインストールの基本
  • package.jsonyarn.lock の役割
  • 実務の現場でYarnを使うときのポイントや便利なコマンド
  • よくあるトラブルシューティングの方法

これらを理解することで、Node.jsの開発をスムーズに進める第一歩になるはずです。

Yarnとは何か

Yarnの登場背景と目的

Yarnは、JavaScriptやTypeScriptなどを扱う際に役立つパッケージマネージャです。 そもそもパッケージマネージャとは、プログラムの部品(パッケージ)を追加・削除・更新する仕組みを提供するツールのことを指します。 大量のパッケージを使う開発プロジェクトで、手間なく依存関係を管理できるメリットがあります。

Yarnが登場した背景には、より高速でスムーズにパッケージを管理したいという開発者の声がありました。 実際に複数のパッケージを扱う場面では、同時に処理を進める並列化の仕組みやキャッシュ機能など、Yarnならではの使いやすさを感じることができるでしょう。

Node.jsとnpmとの関係

Node.jsは、JavaScriptをブラウザ外でも実行できるようにするためのランタイムです。 ウェブアプリケーションやコマンドラインツールなど、さまざまなソフトウェアの開発で使われています。 Node.jsを利用する場合、多くの人がnpm(Node Package Manager)を使ってパッケージを管理することが多いです。

npmはNode.jsインストール時に同梱されるため、追加の設定なしに使えるという利点があります。 一方で、Yarnはnpmの仕組みをベースにしつつも、高速性や安定性を向上させることを目的としています。 このようにnpmとYarnは、どちらも同じNode.jsのパッケージマネージャでありながら、微妙に使い勝手に差があるわけですね。

npmとの違いや特徴

Yarnがnpmと違う点として、まず挙げられるのが並列処理による高速化です。 複数のパッケージを一度にインストールする際に、Yarnはできる限り同時進行で処理します。 これにより、時間を短縮しやすいという特徴があります。

また、依存関係のバージョンを厳密に固定化する仕組みも整っています。 npmでも似たようなロックファイルが存在しますが、Yarnではロックファイル (yarn.lock) が生成・管理されるため、再インストール時に余分なトラブルが起きにくい点も魅力です。 さらに、キャッシュ機能がデフォルトで充実していることから、パッケージを再利用しやすいのも利点のひとつと言えます。

Yarnをインストールする方法

Node.jsの事前準備

Yarnを使うには、Node.jsが動作する環境が必要です。 初心者の場合は、まずNode.jsの公式サイトなどからインストーラをダウンロードしてインストールしておきましょう。 インストールが完了したら、ターミナル(またはコマンドプロンプト)で次のコマンドを実行すると、Node.jsとnpmのバージョンを確認できます。

node -v
npm -v

数字が返ってくるようなら、Node.jsとnpmが正しくインストールされています。

Yarnをインストールする手順

Node.jsが準備できたら、Yarnをインストールできます。 代表的な方法として、npmを使ったインストールがあります。 次のコマンドをターミナルで実行してください。

npm install --global yarn

これにより、npmを介してYarnをグローバルに使えるようになります。 インストール後は、下記のようにバージョン情報が取得できることを確認してみましょう。

yarn -v

これでYarnのコマンドが使えるようになりました。 環境によってはパッケージ管理ツールとして、Homebrew(macOSの場合)やChocolatey(Windowsの場合)などを使うこともありますが、まずはnpm経由でインストールする方法を理解すれば問題ありません。

Yarnをインストールするときは、プロジェクト専用のフォルダを作ってから進めるとファイル管理がわかりやすくなります。

パッケージのインストール方法

Yarn addを使ったパッケージの追加

Yarnを使う主な目的は、外部パッケージをプロジェクトに導入することではないでしょうか。 例えば、Reactというライブラリを使いたい場合には、次のコマンドを実行します。

yarn add react

このようにyarn add パッケージ名というシンプルなコマンドで導入できます。 npmでいうところの npm install パッケージ名 に相当するイメージを持っていただければOKです。

パッケージを追加するときには、package.json というファイルに依存関係が追記されます。 新しいメンバーがプロジェクトに参加しても、このファイルを使って同じバージョンのパッケージをインストールできるため、チーム開発がスムーズになります。

devDependenciesに追加する場合

開発環境だけで使うパッケージを追加したいケースもあるでしょう。 例えば、テストライブラリやコード整形ツールなどは本番アプリケーションに含める必要がないため、devDependenciesに分けて管理します。 これをYarnで指定するには、次のコマンドを実行します。

yarn add パッケージ名 --dev

こうすると依存関係が開発用の領域に分かれて記述されるため、本番環境への不要なインストールを避けられます。 その結果、プロジェクトの構造が整理され、トラブルを防ぎやすい状態になります。

グローバルインストールの場合

ローカル(プロジェクト内)だけでなく、全プロジェクトで共通にコマンドとして使いたいものもあります。 このときは、次のようにglobalオプションを使うのが便利です。

yarn global add パッケージ名

これでコマンドライン上で直接、各種パッケージにアクセスできます。 例えば、TypeScriptのコンパイラを全体的に使いたいときなどに役立ちます。 ただし、プロジェクトごとにバージョンを厳密に管理したい場合は、あまりグローバルインストールを多用しない方がいいかもしれません。

パッケージバージョンの管理

パッケージを導入する際に、バージョンを指定したい場合があります。 例えば「特定のバージョンが安定して動くので固定したい」という場面です。 Yarnでは、yarn addのあとに「@バージョン番号」を付けるだけでOKです。

yarn add react@18.2.0

こうすると、reactのバージョンが 18.2.0 に固定されます。 将来的にバージョンアップしたいときは、別途指定してアップグレードすればよいでしょう。 自分のプロジェクトで確実に動くバージョンを管理しやすいのは、Yarnを使うメリットの一つです。

package.jsonとyarn.lockの理解

package.jsonとは

Node.jsで開発を進める上で、package.json は重要な役割を果たすファイルです。 プロジェクトの名前、バージョン、使用しているパッケージの一覧、スクリプトなどさまざまな情報がまとめられています。 Yarnを使えば、このpackage.jsonを自動で更新してくれるため、手動で追記していく手間が省けます。

例えばYarnで新しいパッケージを追加すると、dependenciesセクションにパッケージ名やバージョンが追記されるわけです。 複数人で開発をするときも、package.jsonがあれば誰でも同じ環境を再現できるので便利です。

yarn.lockの役割

パッケージの依存関係には、1つのパッケージが別のパッケージを参照していることも含まれます。 これらの複雑な依存関係を管理するために、Yarnは**yarn.lock** というロックファイルを作成し、厳密にバージョンを固定します。 例えば、reactをインストールした場合、間接的にインストールされるパッケージも含め、全体のバージョン情報が詳細に記録されます。

このyarn.lockがあるおかげで、同じプロジェクトを別のマシンでインストールするときに、パッケージのバージョン差異が起きにくくなります。 一度動作確認ができたバージョンの組み合わせを再度インストールできるので、安定した開発環境を共有しやすいのです。

実務におけるYarnの活用事例

複数プロジェクトを効率的に管理

フロントエンドとバックエンド、あるいは複数のウェブアプリケーションなど、複数プロジェクトを同時に進める場面があるかもしれません。 Yarnをプロジェクトごとに導入していけば、AプロジェクトとBプロジェクトでバージョンが異なるパッケージを使う場合でも衝突が起きにくくなります。 package.jsonyarn.lock がしっかり管理してくれるおかげで、どのプロジェクトにも独立した環境が構築されるわけです。

さらにYarnはキャッシュ機能が優れているため、一度インストールしたパッケージはダウンロードが早くなります。 大規模プロジェクトになるほど、短い時間で必要なパッケージを揃えられることは大きなアドバンテージといえるでしょう。

プロジェクトごとの依存関係の分離

実務では、ライブラリAはバージョン2を使いたいけれどライブラリBはバージョン3に対応している、というような「バージョンのズレ」が起こることがあります。 このような状況もYarnであれば、プロジェクトフォルダごとに分離して管理できるため、Aの影響がBに波及してしまうリスクを下げられます。

仮に互換性の問題が出た場合でも、yarn.lock を変更せずに調整を進めることで、不用意なアップグレードやダウングレードからトラブルが生じるリスクを回避できます。 実際の現場でも、検証用に古いバージョンを維持しながら、新機能検証用の環境を別に作るなど工夫をすることが多いです。

Yarn Scriptsを使った自動化

Yarnでは、npm同様にscriptsを設定することで、開発に必要なタスクを自動化できます。 例えば、package.json のscriptsセクションにテスト実行コマンドやビルドコマンドを登録しておき、yarn testyarn buildで一発実行できます。 この仕組みを活用することで、チーム内の作業手順を標準化したり、複数のコマンドを一括で走らせることが可能になります。

自動化できる内容はテストの実行だけでなく、リンター(コードスタイルチェック)やファイル圧縮など多岐にわたります。 大きめのプロジェクトになればなるほど手動でコマンドを叩く回数が増えるので、scriptsでまとめて管理してしまう方が効率的です。

実務でよく使うYarnコマンド

yarn install

プロジェクトを新規にクローンしてきた際や、package.jsonを更新したあとなどに実行すると、必要な依存パッケージをまとめてインストールできます。 package.jsonyarn.lockをもとに、一貫したバージョンで導入してくれるため、チームメンバーが同じ環境を再現するのに便利です。

もし古いパッケージが残っていてトラブルが起きそうな場合は、node_modules フォルダを削除してから yarn install をやり直すこともあります。 このように作業を繰り返していると、Yarnは一度ダウンロードしたパッケージをキャッシュしているので、次回以降のインストールが速くなるのも魅力です。

yarn add

先ほど説明したように、ライブラリやツールをプロジェクトに追加したいときに使うコマンドです。 たとえば「Reactを入れたい」「日付操作ライブラリを使いたい」といった場合に yarn add パッケージ名 と実行します。

オプションとして、--dev を指定すれば devDependenciesに追加できます。 グローバルインストールの場合は yarn global add もありますが、実務ではプロジェクト内にインストールするケースの方が多いでしょう。

yarn remove

不要になったパッケージをアンインストールするには、yarn removeを使います。 例として、日付操作ライブラリがプロジェクトに合わなかった場合、下記コマンドですぐに消せます。

yarn remove moment

アンインストールすると package.jsonyarn.lock の情報も更新されるので、使わなくなったパッケージをきちんと管理できます。 依存関係が複雑になりがちなプロジェクトでは、このように定期的に不要なパッケージを整理することが大切です。

yarn upgrade

すでにインストールしているパッケージのバージョンを更新するには、yarn upgrade を使います。 例えば、ReactやVueなどのライブラリに新しいバージョンが登場したときに適用したい場合、次のようなコマンドで行います。

yarn upgrade react

このコマンドでは、指定したパッケージの最新バージョンを取得して package.jsonyarn.lock を更新します。 開発中にバージョンを上げる場合は、事前にテストを行って問題がないか確認するのが大切です。

トラブルシューティング

依存パッケージが競合する場合

異なるパッケージ同士が同じファイルや機能を使用していると、競合が発生することがあります。 このときは、まず yarn.lock を確認して、どのバージョンのパッケージ同士が衝突しているのかを特定しましょう。 もしも必要のないパッケージであれば、yarn remove してみるのも一つの手段です。

どうしても競合が解消できない場合には、バージョン指定を行って一方のパッケージを古いバージョンで固定するなどの工夫が必要になるかもしれません。 無理にすべてを最新化すると互換性が崩れるケースがあるため、1つずつ段階的にアップデートしてチェックしていくのがポイントです。

yarn.lockと衝突した場合

複数人で作業していると、Gitなどのバージョン管理システム上で yarn.lock ファイルが衝突することがあるかもしれません。 このような場合は、自分が変更した箇所と他の人の変更箇所がどのパッケージに関する部分なのかを丁寧にチェックする必要があります。

衝突が発生した場合は、最終的に正しい依存関係が維持されるよう手動でファイルを修正するか、改めて yarn install を行うことで整合性を保つ場合があります。 運用で気を付けたいのは、複数のプルリクエストに同時にパッケージの変更が含まれるシチュエーションです。 テスト環境やステージング環境を使い、どの組み合わせが正しく動くか確認することが大切です。

複数のメンバーが同時にパッケージを更新する際は、作業タイミングをずらしたり、依存関係の修正方針をチームで共有しておくと、衝突リスクを下げやすくなります。

まとめ

ここまで、yarn でパッケージをインストールする方法を中心に、初心者でも理解しやすいように解説してきました。 Yarnはnpmをベースとしながらも、高速性や安定性の面で工夫が凝らされた便利なパッケージマネージャです。

  • Node.js のインストールが前提
  • npm install --global yarn でYarnを導入
  • yarn addyarn removeyarn upgrade などのシンプルなコマンドで依存関係を管理
  • package.jsonyarn.lock がプロジェクトを支える
  • 依存パッケージの競合や yarn.lock の衝突は落ち着いて対処

実務のプロジェクトでも利用しやすいツールなので、これを機にぜひ試してみてください。 開発環境が整うと、プログラミング自体の学習効率もさらに高まるはずです。 今後、複数のプロジェクトを同時に管理するシーンや、チーム開発で依存関係が複雑になったときにこそ、Yarnの真価を実感できるでしょう。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか?
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。