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