YarnとNPMの違いと使い分け方を徹底解説！初心者でもわかるフロントエンド依存管理の基本

1. フロントエンド依存管理とは？

1. フロントエンド依存管理とは？

依存管理（いぞんかんり）とは、アプリで使う外部のツールやライブラリをまとめて管理することです。JavaScriptでは、ボタンの動きやデザイン、データの表示などを便利にするライブラリがたくさんあります。

Railsでも、JavaScriptの機能を使うためにYarnやNPMを使って、必要なライブラリを追加・更新・削除していきます。

2. NPMとは？基本と使い方

2. NPMとは？基本と使い方

NPM（エヌピーエム）は、Node.jsと一緒に使う依存管理ツールです。Node.jsをインストールすると自動でついてきます。

たとえば、jQueryというライブラリを入れたいときはこうします：

npm install jquery

すると、node_modulesというフォルダにライブラリが追加されます。また、package.jsonというファイルに「何をインストールしたか」が記録されます。

これは、お買い物メモのようなものです。「何を買ったか」「どのバージョンか」が全部書かれているので、後から再現しやすくなります。

3. Yarnとは？NPMとの違い

3. Yarnとは？NPMとの違い

Yarn（ヤーン）は、Facebookが作ったNPMの代わりになるツールです。機能は似ていますが、以下のような特徴があります。

• より速いインストール速度
• 同じバージョンで再現できるようロックファイルが強化されている
• コマンドがシンプルでわかりやすい

YarnでjQueryを入れるときはこうです：

yarn add jquery

Rails 6以降では、Yarnが最初から使われていることが多いです。

4. YarnとNPMの使い分けのポイント

4. YarnとNPMの使い分けのポイント

初心者が一番迷うのが「どっちを使えばいいの？」というところです。以下の表で整理しましょう。

Railsでは、特別な理由がなければYarnを使うのがおすすめです。

5. YarnとNPMは混ぜて使わない

5. YarnとNPMは混ぜて使わない

YarnとNPMは似ていますが、同じプロジェクトで両方を使うとトラブルの原因になります。

どちらか一方を使いましょう。以下のように確認できます：

yarn install
# または
npm install

もしyarn.lockがあるならYarnを、package-lock.jsonがあるならNPMを使いましょう。

6. Railsでのフロントエンド管理の考え方

6. Railsでのフロントエンド管理の考え方

Railsでは、JavaScriptのライブラリやCSSなどのフロントエンド資産をwebpackerやimportmapで管理します。その際、Yarnを使ってライブラリを入れるスタイルが多く見られます。

例えばBootstrapを使いたいとき：

yarn add bootstrap

これにより、Railsの中でも最新のJavaScriptやCSSフレームワークを安全に使うことができます。

7. 開発チームでの管理ルールの例

7. 開発チームでの管理ルールの例

開発チームで複数人が関わる場合、以下のようなルールを決めておくと安全です。

• 基本はYarnで統一する
• yarn.lockはバージョン管理（Git）に含める
• 新しいパッケージはチームで相談して追加
• node_modulesはGitに含めない

特に初心者が混乱しやすいのが「どこに何が保存されているか」ですが、YarnもNPMもすべてnode_modulesに入ります。中身を直接触らず、コマンドで管理することが大切です。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

YarnとNPMの違いとは何ですか？初心者向けに簡単に教えてください。

YarnとNPMはどちらもJavaScriptライブラリを管理するための依存管理ツールです。YarnはFacebookが開発し、NPMはNode.jsに標準で付属しています。Yarnは高速で使いやすく、Railsとの相性も良いのが特徴です。