Macで初心者がYarnをインストールする方法を徹底解説
はじめに
皆さんは、複数のライブラリやツールを管理するときに、どのようにして依存関係を整理しているでしょうか。
JavaScriptやTypeScriptを使って開発する際には、パッケージマネージャの役割が重要です。
そんなパッケージマネージャの一つとして多くの人に利用されているのが Yarn です。
本記事では、初めてYarnを使うMacユーザー向けに、インストール手順や設定方法、よくあるトラブルへの対処などを紹介します。
これからWeb開発に挑戦したい方や、フロントエンドのライブラリ管理を効率化したい方の参考になれば幸いです。
この記事を読むとわかること
- Yarnとは何か
- Yarnのインストール手順
- 導入時によくあるトラブルと対処法
- 実務での活用シーン
- Mac環境固有の注意点
初心者でもわかりやすいように、実際のインストール手順や設定の流れを具体的に解説します。
特にMacを使っている方にフォーカスしているため、インストールでつまずきやすいポイントや対処法もまとめています。
Yarnとは何か
Yarnは、Node.jsのパッケージを管理するためのツールです。
同じような働きをするものにnpmがありますが、Yarnはもともと高速かつ安定した動作を目指して登場しました。
npmと比べると、Yarnはキャッシュ機能が充実しているという特徴があり、よく使うライブラリの再ダウンロードを最小限に抑えようとしてくれます。
これにより、ライブラリのインストール時間を短縮することが期待できます。
また、Yarnを使うことでチーム開発での依存関係の管理がスムーズになることも多いです。
たとえば、yarn.lockというファイルでライブラリのバージョン情報を正確に固定してくれるので、チームメンバーが同じ環境下で作業しやすくなります。
Yarnを使うメリット
Yarnを使うメリットを初心者の皆さんにも理解しやすいように、いくつかの観点に分けて紹介します。
インストールの速度が比較的早い
Yarnは一度インストールしたパッケージをキャッシュに保存しておき、再度利用できるようにする仕組みがあります。
そのため、同じライブラリを再びインストールする場合でも通信量が減り、作業をスムーズに進めやすくなります。
一貫性のある依存関係管理
プロジェクトの依存関係を確実に固定することで、チーム全員が同じバージョンのライブラリを使えます。
複数人が関わるプロジェクトで「動いた」「動かない」の不一致が起こりにくくなるでしょう。
コマンドが比較的シンプル
npmから乗り換える人の多くが「馴染みやすい」と言うように、Yarnのコマンドは直感的に使いやすいです。
慣れればプロジェクト作成やライブラリの追加・削除が素早く行えます。
Yarnのインストール準備
MacにYarnをインストールするには、まず大前提として Node.js が必要です。
Node.jsをまだインストールしていない場合は、事前に準備してください。
また、Macでは Homebrew と呼ばれるパッケージ管理ソフトを使うと便利です。
もちろんHomebrewを使わずにYarnを導入する方法もありますが、本記事ではHomebrewを利用した手順を中心に説明します。
Node.jsが必要
YarnはNode.jsの仕組みを活用して動きます。
そのため、Node.jsがインストールされていないと、Yarnを有効に使うことができません。
Node.jsは公式サイトからダウンロードできますが、Homebrewを使って入れる方法もあります。
Macのターミナルで以下のコマンドを打つとNode.jsを簡単にインストールできます。
brew install node
このコマンドを実行し終わったら、node -v と打ってバージョンが表示されるか確認すると安心です。
表示された数値が、今ご自身のMacにインストールされているNode.jsのバージョンです。
Homebrewとは
Homebrewは、macOS上でオープンソースのソフトウェアをインストール・管理するための有名なツールです。
ターミナルから操作するのですが、一度慣れるとかなり便利になります。
Homebrewがすでにインストールされているかどうかは、以下のコマンドで簡単に確認できます。
brew -v
バージョン情報が表示されれば導入済みです。
もしコマンドが見つからないと言われた場合は、公式サイトを参照してインストールするのがおすすめです。
Yarnのインストール手順
ここでは、Homebrewを使った代表的なインストール手順をまとめます。
Mac環境の場合、もっともわかりやすい方法として多くの人が採用しているやり方です。
Step1. Homebrewが動作するか確認する
まずは下記のようにコマンドを打ってみてください。
brew -v
もしバージョンが表示されれば問題ありません。
表示されなかったり「コマンドが見つからない」と出る場合は、Homebrewをあらためて導入してから進みましょう。
Step2. Node.jsが正常に動くか確認する
Node.jsが動作しないとYarnも利用できません。
以下のコマンドを入力し、Node.jsのバージョンが返ってくることを確認してください。
node -v
何も表示されない場合は、Node.jsが未インストールか正常にパスが通っていない可能性があります。
その場合は brew install node で導入してみてください。
Step3. Yarnのインストール
準備が整ったら、いよいよYarnをインストールします。
ターミナルで以下のコマンドを実行してください。
brew install yarn
インストールには多少時間がかかることがありますが、特別なエラーが出なければ正常に完了します。
途中でパスワード入力を求められることがありますが、macOSの管理者パスワードを入力すれば問題ありません。
Step4. バージョン確認
インストールが終わったら、以下のコマンドでインストールされたYarnのバージョンを確認できます。
yarn -v
数字のバージョンが表示されればインストールは完了です。
ターミナル上で「command not found」などと出た場合は、パスが通っていない可能性がありますので、あらためてHomebrewの設定を見直してください。
Yarnを使うための初期設定
Yarnを使い始めるにあたって、最初に知っておきたいのが package.json との関係性と、プロジェクトでのYarnの使い方です。
package.jsonとの関係
JavaScriptやTypeScriptのプロジェクトでは、ライブラリやスクリプトの情報をpackage.jsonというファイルで管理します。
このファイルには、プロジェクト名やバージョン、依存関係といった情報が記載されます。
npmを使う場合も同じファイルに情報が書き込まれますが、Yarnではさらに yarn.lock というファイルが生成される点が特徴的です。
yarn.lockは依存ライブラリの正確なバージョンや取得元が細かく記載されるため、チーム開発で環境のブレが起きにくくなります。
プロジェクトでYarnを利用する
プロジェクトでYarnを使う際は、まずディレクトリを作成してから以下のコマンドを試してみてください。
yarn init
これは、npmでいう npm init に相当するコマンドで、対話形式でpackage.jsonを生成する処理が始まります。
質問に適宜答えていくと、package.jsonが作成され、そこにYarnで管理するための基本情報が書き込まれます。
Yarnコマンドの基本
Yarnを使う上で、よく使うコマンドをまとめてみましょう。
npmの場合は npm install、 npm run start といったコマンドがありましたが、Yarnでは少し異なる書き方になります。
yarn init
新しいプロジェクトを開始するときに用いるコマンドです。
先ほど触れたように、package.jsonがプロジェクト直下に作成され、基本情報が登録されます。
yarn add
ライブラリ（パッケージ）を追加する際に利用します。
たとえばReactを導入したい場合は、以下のように入力します。
yarn add react
オプションとして --dev を付けることで開発依存に指定することも可能です。
この場合は次のようにします。
yarn add typescript --dev
これでpackage.jsonに依存関係が書き込まれ、さらにyarn.lockにも正確なバージョン情報が反映されます。
yarn remove
不要になったライブラリを削除するときに使うコマンドです。
たとえば、試しに入れてみたライブラリを削除したい場合は次のようにします。
yarn remove package-name
この操作で、package.jsonとyarn.lockが更新され、node_modulesフォルダからも該当のライブラリが削除されます。
yarn install
npmの npm install と同じように、package.jsonやyarn.lockに記載されたライブラリをインストールします。
プロジェクトを新しくクローンした場合などに、このコマンドを打つことで必要な依存関係一式が準備されます。
yarn install
yarn run
スクリプトを実行するときには、 yarn run スクリプト名 という形になります。
package.jsonに記載したスクリプトを呼び出す際に使い、npmの npm run スクリプト名 と同様のイメージで扱えます。
yarn run dev
このように、npmと同じ感覚で使える点がYarnの魅力のひとつです。
便利なYarnのサブコマンド
Yarnには、基本コマンド以外にも便利なサブコマンドが存在します。
初心者の皆さんが使う機会が多いものをいくつか紹介します。
yarn global add
パッケージをシステム全体で利用したい場合、グローバルインストールが必要になる場合があります。
たとえば、CLIツールを導入したいシーンなどです。
yarn global add create-react-app
これで、create-react-appをグローバルで利用できるようになります。
ただしグローバルインストールは混乱を招くこともあるので、本当に必要な場合のみ使うのがよいでしょう。
yarn outdated
依存しているライブラリのうち、古いバージョンがあるかどうかを調べます。
プロジェクトを長く運用していると、ライブラリのバージョンがどんどん更新されるため、このコマンドで定期的に確認すると良いです。
yarn outdated
yarn upgrade
インストール済みのライブラリを更新するときに利用します。
アウトデートになっているライブラリがあれば、これでバージョンを上げることができます。
yarn upgrade package-name
また、一括でアップグレードしたい場合は、引数なしでコマンドを打つこともあります。
ただし、上位互換性が保証されない場合もあるので、バージョンアップ前に変更点を確認してください。
yarn cache
Yarnが内部で保持しているキャッシュを操作するためのコマンドです。
キャッシュをクリアしたいときに、次のように使用できます。
yarn cache clean
キャッシュが壊れているなどの特殊なケースで使うイメージです。
普段の開発ではあまり触れる機会が少ないでしょう。
Yarn利用時によくあるトラブルと対処
Yarnを使い始めたころに、ありがちなトラブルとその対処法をまとめます。
つまずきそうなポイントを事前に知っておくと、時間を無駄にせずに済むはずです。
依存関係の衝突
複数のライブラリが互いに異なるバージョンを要求している場合、依存関係が衝突することがあります。
この場合、プロジェクト全体がエラーになるケースも少なくありません。
対処策としては、問題を引き起こしているライブラリを特定し、バージョンを統一できるよう調整することが必要です。
一部のライブラリを削除して入れ直したり、特定のバージョンを指定してインストールすることで解決を目指します。
Node.jsバージョンの不一致
プロジェクトに求められるNode.jsのバージョンと、自分の環境に入っているバージョンが合わない場合、インストールがうまくいかないことがあります。
エラーメッセージが出る場合は、Node.jsを指定バージョンに切り替えるか、全体的に対応を取る必要があります。
Macであれば、Node.jsのバージョンマネージャ（例としてnvmなど）を活用する方法もありますが、そこまで行わなくても、まずはひとつのバージョンで統一して使うと混乱が減るでしょう。
ネットワークエラー
プロキシ設定など、ネットワークの影響でパッケージのダウンロードがうまくいかないケースがあります。
自宅やオフィスのネットワーク環境によっては、通信がブロックされる場合も考えられます。
エラーが出たときに試してみることとしては、別のネットワークに接続してみる、あるいはVPNを一時的にオフにしてみるなどが挙げられます。
それでも改善しない場合は、システム管理者に問い合わせる必要があるかもしれません。
一部の企業ネットワークでは、外部リポジトリへの接続が制限されている場合があります。
そのような場合は、社内であらかじめ許可を取るなどの手続きが必要になることもあるでしょう。
実務でどう使われるか
Yarnが実務で使われるシーンとしては、やはりフロントエンド開発が多い印象です。
ReactやVueなどのライブラリを使うときに、依存関係のインストールや管理をスムーズにするために導入されます。
フロントエンド開発での活用例
たとえば、Reactプロジェクトを立ち上げる際に、yarn create react-app のようなコマンドを使うケースがあります。
ここで作られたフォルダの中には、すでにpackage.jsonが用意され、Yarnで管理するための環境が整っていることも多いです。
ReactのUI関連のライブラリや、テストツールなどを追加していく際も、すべて yarn add ライブラリ名 で一貫して管理できます。
これにより、作業者が増えても環境構築で悩む時間を減らすことができます。
Reactアプリケーションでの依存管理
実際のReact開発では、React本体のライブラリだけでなく、React RouterやReduxなどの追加ツールを使うこともあります。
このような複数ライブラリの管理をYarnが一手に担ってくれるのです。
さらに、バージョンアップしたい場合は yarn upgrade、不要になった場合は yarn remove といった具合で、シンプルな操作で済みます。
トラブルシューティングの際も、yarn.lockを確認すれば、どのバージョンが正しく使われているか一目で把握しやすいです。
アプリケーションのビルドとデプロイ
Yarnを使ってライブラリを管理していると、ビルドコマンドやテストコマンドも yarn run で一貫して実行できます。
最終的に本番環境へデプロイするときには、CI/CDツールと連携しやすいのもメリットです。
実務では、GitHub ActionsなどのCI/CDサービスを用いて、自動的に yarn install → yarn run build → デプロイ の流れを組むことがよくあります。
こうした自動化パイプラインの構築も、Yarnの使い方をきちんと理解していればスムーズに組み上げやすいでしょう。
インストール後にやるべき確認事項
Yarnのインストールが完了したら、いくつかのポイントをチェックすると安心です。
特に初めてのプロジェクトで作業するときは、パッケージ管理の状態をしっかり確認しておきましょう。
node_modules フォルダの確認
ライブラリをインストールすると、プロジェクト直下に node_modules フォルダが作成されます。
これは、実際にインストールされたライブラリが入っている場所です。
このフォルダは基本的に手動で編集する必要はありませんが、誤って消してしまうと動作に支障が出ます。
ただし、再度 yarn install すれば再構築できるため、消してはいけないというわけでもありません。
package.json と yarn.lock
package.json には、ライブラリの「大まかなバージョン指定」が書かれており、yarn.lock は「厳密なバージョン情報」が並んでいます。
これら2つはYarnが動作する上で大切です。
もし意図しないバージョンアップが起きてしまう場合、yarn.lock を削除してから yarn install を再実行すると、再生成されます。
しかし、チームで作業する場合はyarn.lockを勝手に削除するのは避けたほうがよいでしょう。
理由としては、他メンバーの環境に影響を与える恐れがあるためです。
バージョン管理との連携
Gitなどのバージョン管理システムを使う際には、node_modules フォルダは通常 .gitignore に指定してバージョン管理対象から外します。
一方で、package.json と yarn.lock は重要なので、必ずコミットに含めるようにします。
これによって、他の開発者が同じリポジトリをクローンし、yarn install すれば、同じバージョンのライブラリを取得できます。
誰かがライブラリをアップグレードした際の変更履歴も明確になるため、コードレビューがスムーズです。
Mac環境で注意すべきポイント
Mac特有の設定やハードウェア構成によっては、Yarnのインストールや実行が通常とは違った挙動をすることがあります。
ここでは、よくあるポイントをいくつか紹介します。
ターミナルのパス設定
インストール後に yarn -v を打っても「command not found」と出る場合は、シェルのパス設定が通っていないかもしれません。
~/.bashrc や ~/.zshrc のような設定ファイルに、Homebrewのパスを追加する行が正しく記載されているかを確認しましょう。
もしパスの追記が必要な場合は、以下のような記述を参考にしてみてください。
export PATH="/usr/local/bin:$PATH"
macOSのバージョンやチップの種類によって、標準インストール先が異なる場合もあるので、独自に調べて追記してみてください。
Rosetta2環境の場合
M1やM2チップのMacの場合、Intel向けのコードを動かすためにRosetta2 を利用しているケースがあります。
Rosetta2経由でHomebrewをインストールしている場合、ターミナルをRosettaモードで起動しないとbrewコマンドが動かないなどの現象が出るかもしれません。
そのようなときは、まず現在どこにHomebrewがインストールされているかを確認し、ターミナルの設定を揃えることが大事です。
エラーが出た場合は、「mac Rosetta2 brew」などのキーワードで調べてみると、トラブルシューティングの情報が見つかることが多いでしょう。
Apple Siliconへの対応
Apple Silicon（M1やM2など）のMacでは、YarnやNode.jsのネイティブ対応が進んでいます。
ただし、一部の古いライブラリがネイティブ対応していない可能性もあります。
Apple SiliconのMacで開発を始める際には、ライブラリが対応しているかどうかを各ライブラリのGitHubなどで確認しておくと安心かもしれません。
まとめ
ここまで、MacでYarnをインストールする方法と、その後の基本的な使い方、そして注意点について解説してきました。
初心者の皆さんに向けて、できるだけ具体的に手順を示しましたが、まだまだ細かいトラブルや特殊な環境設定のパターンは存在します。
ただ、Yarnを導入する大きなメリットは、やはり「依存関係を高速かつ一貫性を保って管理できる」点にあるでしょう。
プロジェクトの規模が大きくなると、依存しているライブラリの数も多くなりますが、Yarnなら効率的に管理できます。
また、フロントエンドの開発フレームワークやテストツールとの相性が良いのも見逃せません。
ReactやVueなどを本格的に学び始める際にも、Yarnでのパッケージ管理を習得しておけば、開発のスムーズさがぐっと増すはずです。
記事の中で紹介したコマンドは、どれも実務や学習で頻繁に使用されるものばかりです。
最初は覚えることが多いと感じるかもしれませんが、実際に触っていくうちにすぐに慣れてくるでしょう。
ぜひ、MacでのYarn導入を一歩ずつ進めながら、より快適なJavaScript開発を楽しんでみてください。