🐈

React入門 | パッケージマネージャー(npm / yarn)

2022/02/23に公開

今までのJavaScript開発では、処理を全て1つのファイルに記載していたので、複雑なシステムの場合だとコードが数千行以上になりカオスな状態となっていた。
そこで少し改善されたJavaScript開発では、jsファイルから他のjsファイルを読み込んで使用できるようになったが、エラーが多発した。
そして現在のモダンJavaScript開発では、npmやyarnを用いることで以上の問題点を大幅に改善している。

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

パッケージの管理、インストール、アップデート等を担ってくれる管理ツールのこと。

  • JavaScriptのnpm
  • Rubyのgem
  • PHPのcomposer

etc...

メリット
-依存関係を意識しなくても勝手に解決してくれる
-チーム内でのパッケージの共有や、バージョン統一が容易
-世界中で句会されているパッケージをコマンド1つで利用可能
-どこから読み込んだものか分かりやすくなった

まず世界中の人がパッケージの公開場所として使用しているのがNPMというレジストリ(一般的に大文字の場合はレジストリ、小文字の場合はパッケージマネージャーとしてのnpmを指すことが多い)。

インストール方法
npmの場合

npm install [パッケージ名]

yarnの場合

yarn add [パッケージ名]

上記コマンド実行時に、ローカルファイルのpackage.jsonが更新され、パッケージの情報が追記される。それと同時にnpmでインストールした場合はpackafelook.json、yarnでインストールした場合はyarn.lookファイルが生成される。lookファイルにはパッケージが内部で使用している別パッケージ等のバージョン情報や依存関係が記載される。
package.jsonとpackage-look.json(yarn.look)の2ファイルからモジュールを展開(同じ環境を作成)するのも非常に簡単で、以下のコマンドを実行するだけ。

npmの場合

npm install

yarnの場合

yarn install

コマンドを実行すると2つのファイルを参照してバージョンや依存関係が解決された状態で、node_modulesというフォルダが生成され、その中にパッケージの実体が展開される。

Discussion