6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年9月23日 現場Rails Chapter8 npmについて深掘りしました

先日の続き

※先日学んだJavaScriptのパッケージマネージャーであるyarnとnpmで、yarnはアウトプットしたので今回はnpmについて学んでいきます。yarnはnpmを改造して作られたものなので根幹は同じという認識です。

npmとは?

npmは、Node.js 関連のパッケージをインストールするためのコマンドラインツールです。 WindowsMacOS であれば、npm は Node.js に同梱されており、Node.js をインストールすることにより npm も使えるようになります。基本的には、JavaScript関連のパッケージを管理するのに使います。

wiki)参照↓

npmとはパッケージ管理システムの一種。Node Package Managerの意[3]。なおnpmとは「Node Package Manager」の頭文字を取ったものではなく、実際はバクロニムである。 Node.jsのパッケージ管理システムであり、V8 JavaScriptエンジンで動作する。npm自身もJavaScriptで記述されている。 Node.jsは、サーバ上で動作するJavaScriptであるが、Node.jsを使ったツールが開発されるようになると、これらを管理するバージョン管理システムの必要性が生まれた。

npmでのパッケージインストール方法

npmでインストールされたパッケージは、node_modulesディレクトリに配置されます。これは、yarnでインストールする時と同じです。

# package.json
{ 
  "name": "sample",
  "dependencies": {#=> 通常は、dependenciesにパッケージが入ります。
    "request": "^2.81.0"
  },
  "devDependencies": {#=> 開発環境のみで、使いたいパッケージが入ります。
    "mocha": "^3.4.2"
  }
} 

//このほかの要素は省略します 
$ npm install
// package.jsonに記載されているパッケージを全てインストール(dependencies、devDependenciesに書かれているパッケージも全てインストールされます。)
// あらかじめ、インストールしたいパッケージをpackage.jsonに記載しておく必要があります。(bundle installコマンドのようなもの)
$ npm install {パッケージ名}
// dependenciesにパッケージを指定してインストール
// npm v5 以降はインストール時にデフォルトで package.json の dependencies に追加してくれるようになったため、--saveオプションは不要になりました。
// 前もって、package.jsonにパッケージを記載しておく必要はなく、パッケージ名を指定して、コマンドのみで、パッケージをインストール出来ます。
$ npm install --save-dev {パッケージ名}
// devDependenciesにパッケージを指定してインストール(devDependenciesには、開発に必要なパッケージのみを書きます。)

npmとyarnの違い

npm v6以降、npmのパッケージインストール速度が向上したので、yarnとの性能の差はあまりありません。 npmもyarnもpackage.jsonというファイルでパッケージを管理します。管理するパッケージは同じということです。(Gemで言えばGemfileです。)

バージョンのロックファイル
yarn yarn.lock
npm package.lock.json

yarnnpmを共存させることも出来るのですが、どちらかに統一してパッケージをインストールするようにしましょう。共存していると、デプロイ時にwarningが出ることがあります。
yarnもnpmもパッケージをインストールするための手段が異なるだけで、結果として、javascriptのパッケージをインストールして、実際に使えるようにしています。インストール時にnode_moduleディレクトリにパッケージを配置するなどの挙動はほぼ同じです。インストール後に、インストールの結果が書かれたファイル(gemfile.lockのようなもの)が異なるだけです。

そもそもライブラリとパッケージ、モジュールの違いとは?

画像引用

モジュールとは?

プログラム内で、繰り返し使えるような部品として提供されているものがモジュールです。自分で作成することも出来ますし、誰でも使えるように提供されているものもあります。提供されているものを使うときは、requireを使って、モジュールファイルを取り込む必要があります。

ライブラリとは?

モジュールの集まったものがライブラリとなります。

パッケージとは?

パッケージとは、ライブラリで集めたプログラムを、似た機能ごとにあつめたものです。つまり、ライブラリの集合がパッケージです。

例えると

例えた内容
モジュール 部品
パッケージ
ライブラリ 似た箱を揃えて荷詰め

モジュール < パッケージ < ライブラリという関係性をイメージすると良いです。

議論の途中でフレームワークとライブラリの違いについて気になったので調べました。

React, Vue.js はフレームワーク?ライブラリ?がとても参考になりましたので、以下に引用させていただきます。

フレームワークとは?

アプリケーションを動かすために必要な処理・機能が一通り実装されている。 その他に必要な処理などがあれば自分で実装して、フレームワークに組み込んで利用することができる。 開発者が一からフルスクラッチで作るのは大変だけど、フレームワークを利用することで、楽するとこは楽してコアな部分にフォーカスすることができる。

例)Vue.js, Ruby on Rails, Bootstrap

ライブラリとは?

いろいろな便利な機能が準備されていて、必要に応じて必要な機能のみをピックアップして利用する。 主体はライブラリではなく、主体のプログラムから呼ばれて使われる。

例)React, jQuery

料理で例えると

例えた内容
フレームワーク 料理セット一式
ライブラリ 調味料

yarnとnpmコマンドの違いをまとめました

注) npm 5.0.0 以降からは、--saveオプションは省略できます。

yarn npm
yarn install npm install
yarn add パッケージ名 npm install パッケージ名
yarn add --dev パッケージ名 npm install --save-dev パッケージ名

参照

バクロニム

npm (パッケージ管理ツール))

npm/cli

npmとyarnのコマンド早見表

会計freeeがyarnからnpmに出戻った本当の理由

npm入門

【npm,yarn】今さら聞けないlockファイル

モジュール・パッケージ・ライブラリの違い。

ライブラリとパッケージとは?

React, Vue.js はフレームワーク?ライブラリ?

【いまさらですが】package.jsonのdependenciesとdevDependencies