はじめに
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等のフロントエンド用のパッケージを提供するのにも使われるようになったということですね。
流れとしては以下のようなイメージです。
1. JavaScriptは元々ブラウザで動作するプログラミング言語だった
2. Node.jsの誕生によってサーバでJavaScriptが使えるようになった。
3. 最近では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とは何かまとめてみる（初心者向け）
↧