はじめに

VueやReactを使ってWeb開発をする際、npmやyarnといったコマンドを使ってプロジェクトの作成やパッケージのインストール等を行っていると思います。
自分はこのnpmやyarnについてなんとなく使っていたので理解を深めるため、主に以下の3点について調べてみました。

そもそもnpm, yarnとは何か
Node.jsとは何か
npmとyarnで何か違いはあるのか

npm, yarn とは

共に、Node.js上で動くJavaScriptのパッケージマネージャーのことを指します。

まず「パッケージマネージャー」とは

コンピュータに何のソフトウェアがインストールされたかを記録し、新しいソフトウェアのインストール・新しいバージョンへのソフトウェアの更新・以前インストールしたソフトウェアの削除を容易に行えるようにするプログラムのこと

参考
パッケージマネージャとは

特徴

パッケージAのバージョン1.5にはパッケージBのバージョン5.0以上が必要といった依存関係を解決する情報や現時点でインストールされているパッケージの情報をもつ
パッケージのインストール・アンインストール・アップグレード・ダウングレードを行う
インストール・アップグレート時には依存関係にあるパッケージを自動でインストール・アップグレートしてくれる
言語ごとにパッケージマネジャーが分かれている
Linux, Windows, macOSなど, OSを管理するパッケージマネジャーもある

パッケージマネージャーを使わないと大変

無数のソフト（パッケージ、ライブラリ）をパッケージマネージャーを使わず、ソフトのホームページから手動でインストールするのは骨の折れる作業です。また、それぞれのソフトにはバージョンの依存関係が発生し、それらを確認しながら必要なバージョンをインストールする必要があるためかなり時間がかかります。

パッケージマネージャーの例

パッケージマネジャー	言語 or OS
pip	Python
gem	Ruby
composer	PHP
glide	Go
npm	JavaScript
yarn	JavaScript
Homebrew	macOS
apt-get	Linux (Debian系)

次に「Node.js上で動く」とは

そもそもNode.jsとは

Node.jsとはサーバ上でJavaScriptを実行するための環境のことです。
もともとJavaScriptはブラウザ上で動く言語ですが、Node.jsをインストールすることでサーバ上でJavaScriptが使えるようになります。「Node.js上で動く」とは「サーバ上でJavaScriptを実行するための環境で動作する」ということになります。
つまり、npm, yarnは__Node.jsという環境で動くJavaScriptでできたツール（パッケージやモジュール）を管理するプログラム__ということになります。

サーバ上で実行する環境とは

Node.jsをインストールすることで、RubyやPythonのようなバックエンド言語としてJavaScriptを使うことができ、今までできなかったファイルの読み書きや、ネットワーク通信等のOSの機能にアクセスできるようになるということです。
Pythonを動かしたいとき、PythonをインストールしてPythonの実行環境をつくる必要があるように、サーバ上でJavaScriptを動かしたいときはNode.jsをインストールしてJavaScript実行環境を作る必要があるといったイメージです。
ちなみに、ブラウザ上で動いているJavaScriptはブラウザ自体が実行環境の役割を担ってくれています。

なぜReactで開発を行う際Node.jsが必要になるのか

「ReactはJavaScriptのUIライブラリであり、ブラウザ上で動くものなのでNode.js（サーバ上でのJavaScript実行環境）は不要ではないか」と思っていました。
調べてみると、Node.jsがないと色々と不便なことがあり、Node.jsのインストールは基本的に必要とされています。
ただ以下の記事で紹介されている通り、Node.jsがなくてもReact自体は使えます。

正真正銘のReactだけの不純物なしでReact入門
ブラウザだけで動作するNode.jsなしReactの使い方

Node.jsが必要な理由

npmもしくはyarnを使用したい
- Reactを使った大規模なアプリケーション開発となると、様々なパッケージをインストールする必要があります。前述しましたが、それらのパッケージを依存関係を意識しながらインストールするにはnpmがあると嬉しくてNode.jsが必要になるということです。
babelを使用したい
- JavaScriptの新しい書き方から古い書き方に変換する
  - 新しいJS文法に対応していない古いブラウザでも使えるようになる
webpackを使用したい
- JavaScript, CSS, 画像等を一つのjsファイルにまとめる
  - 機能ごとにモジュールを細かく分けられる
  - HTTPリクエストの回数を減らすことができる
その他様々なビルドツールや開発補助ツールを使用したい

用途の遷移

つまり、サーバーサイドでJavaScriptのパッケージを管理するnpmでしたが、ReactやVue等のフロントエンド用のパッケージを提供するのにも使われるようになったということですね。

流れとしては以下のようなイメージです。

JavaScriptは元々ブラウザで動作するプログラミング言語だった
Node.jsの誕生によってサーバでJavaScriptが使えるようになった。
最近ではnpm, babel, webpack等のパッケージを提供する「クライアントサイドのJavaScript実行環境」として使われることが多くなった

npmとyarnの特徴

npm

Node.jsがリリースされた翌年（2010年）リリース
Node Package Managerの略
package-lock.jsonファイルを自動的に生成する
Node.jsをインストールすれば自動的にインストールされる

yarn

2016年リリース
Facebook、Google、Exponent、Tildeによって開発された新しいJavaScriptパッケージマネージャー
npｍと互換性がある
- 同じpackage.jsonが使える
npmより厳密にモジュールのバージョンを固定できる
npmよりインストールが速い

yarnの方が優れているように見えますが、最近ではnpmがアップデートされて機能の差はあまりないようです。

参考

パッケージマネージャがパッケージをインストールする仕組み
 パッケージ管理システムとは？
Node.jsとはなにか？なぜみんな使っているのか？
Node.js入門編
 JSのモジュールとbabelとwebpackとは何かまとめてみる（初心者向け）