YarnとNPMの違いと使い分け方を徹底解説！初心者でもわかるフロントエンド依存管理の基本
生徒
「RailsでJavaScriptを使おうとしたら、YarnとかNPMって出てきたんですけど、何が違うんですか？」
先生
「それはフロントエンドの依存管理ツールですね。JavaScriptのライブラリを追加したり更新したりするための便利な道具です。」
生徒
「便利そうだけど、YarnとNPM、どっちを使えばいいのか分かりません…」
先生
「それでは、YarnとNPMの導入方法と使い分け方、Railsでの役割を詳しく解説していきましょう！」
1. フロントエンド依存管理とは？
依存管理（いぞんかんり）とは、アプリで使う外部のツールやライブラリをまとめて管理することです。JavaScriptでは、ボタンの動きやデザイン、データの表示などを便利にするライブラリがたくさんあります。
Railsでも、JavaScriptの機能を使うためにYarnやNPMを使って、必要なライブラリを追加・更新・削除していきます。
2. NPMとは？基本と使い方
NPM（エヌピーエム）は、Node.jsと一緒に使う依存管理ツールです。Node.jsをインストールすると自動でついてきます。
たとえば、jQueryというライブラリを入れたいときはこうします：
npm install jquery
すると、node_modulesというフォルダにライブラリが追加されます。また、package.jsonというファイルに「何をインストールしたか」が記録されます。
これは、お買い物メモのようなものです。「何を買ったか」「どのバージョンか」が全部書かれているので、後から再現しやすくなります。
3. Yarnとは？NPMとの違い
Yarn（ヤーン）は、Facebookが作ったNPMの代わりになるツールです。機能は似ていますが、以下のような特徴があります。
- より速いインストール速度
- 同じバージョンで再現できるようロックファイルが強化されている
- コマンドがシンプルでわかりやすい
YarnでjQueryを入れるときはこうです：
yarn add jquery
Rails 6以降では、Yarnが最初から使われていることが多いです。
4. YarnとNPMの使い分けのポイント
初心者が一番迷うのが「どっちを使えばいいの？」というところです。以下の表で整理しましょう。
| 比較項目 | NPM | Yarn |
|---|---|---|
| 速度 | やや遅い | 高速 |
| 使いやすさ | 標準的 | 初心者に優しい |
| ロックファイル | package-lock.json | yarn.lock |
| Railsとの相性 | 使えるが設定が必要 | 標準で対応 |
Railsでは、特別な理由がなければYarnを使うのがおすすめです。
5. YarnとNPMは混ぜて使わない
YarnとNPMは似ていますが、同じプロジェクトで両方を使うとトラブルの原因になります。
どちらか一方を使いましょう。以下のように確認できます：
yarn install
# または
npm install
もしyarn.lockがあるならYarnを、package-lock.jsonがあるならNPMを使いましょう。
6. Railsでのフロントエンド管理の考え方
Railsでは、JavaScriptのライブラリやCSSなどのフロントエンド資産をwebpackerやimportmapで管理します。その際、Yarnを使ってライブラリを入れるスタイルが多く見られます。
例えばBootstrapを使いたいとき：
yarn add bootstrap
これにより、Railsの中でも最新のJavaScriptやCSSフレームワークを安全に使うことができます。
7. 開発チームでの管理ルールの例
開発チームで複数人が関わる場合、以下のようなルールを決めておくと安全です。
- 基本はYarnで統一する
yarn.lockはバージョン管理（Git）に含める- 新しいパッケージはチームで相談して追加
node_modulesはGitに含めない
特に初心者が混乱しやすいのが「どこに何が保存されているか」ですが、YarnもNPMもすべてnode_modulesに入ります。中身を直接触らず、コマンドで管理することが大切です。
この記事を読んだ人からの質問
