こんにちはフロントエンドエンジニアのまさにょんです！
今回は、yarn install と yarn add と npm install の違いについて解説します。
また、 yarn と npm のコマンドの一覧・比較表も作成したので、解説していきます。
目次
yarn install と yarn add と npm install の違いとは？ yarn と npm の違いとは？
yarn install と yarn add と npm install の違いとは？
まずは、yarn installとyarn addの違いについて説明します。
yarnの場合はnpmと違って、package.jsonファイルに記載された依存パッケージをインストールするコマンドと、
新しいパッケージを追加するためのコマンドが分離されています。
yarn installは、package.jsonファイルに記載された依存パッケージをインストールするためのコマンドです。
このコマンドを実行すると、yarn.lockファイルとnode_modulesディレクトリの内容に基づいてパッケージがインストールされます。
yarn.lockファイルは、正確なバージョンのパッケージがインストールされるようにするためのものであり、
他の開発者と同じ環境を構築する際に重要な役割を果たします。
ちなみに、yarn.lockの役割はpackage-lock.jsonと同様です。
一方、yarn addは、新しいパッケージを追加するためのコマンドです。
例えば、プロジェクトに新しいライブラリやツールを追加したい場合に使用します。
yarn addコマンドを使用すると、新しいパッケージが自動的にpackage.jsonに追加され、依存関係が解決されます。
まとめると、次のとおりです。
-
yarn install：package.jsonファイルに記載された依存パッケージをインストールするコマンド yarn add： 新しいパッケージを追加するためのコマンドnpm install： 上記をどちらも1コマンドでこなしている。
yarn と npm の違いとは？
yarnもnpmもNodeのパッケージの管理ツールであり、同様の機能を提供していますが、いくつかの違いがあります。
基本的には、後発のyarnの方が、npmの弱点を改善しているポジションにあります。
ただ、昨今は、npmも強化されているので、優劣はつけられないような話も聞きます。
一般的に、yarn と npm の違いとしてピックアップされるのは、次のとおりです。
- パフォーマンス： yarn はパッケージの依存関係を解決するために並列処理を使用し、インストールの速度を向上させています。
- 依存関係の解決においてキャッシュを利用することで、再度同じパッケージをインストールする際の時間とディスク使用量を削減します。
- セキュリティチェック： yarn はパッケージのインストール時に自動的にセキュリティスキャンを実行し、脆弱性のあるパッケージを検出します。
- これにより、安全なパッケージの使用を促進します。
まとめると、yarn は、パッケージのインストール速度やセキュリティの改善に焦点を当てており、
高速なパッケージの追加が可能であることや、安全性を強みにnpmと差別化しています。
また、yarnとnpmは、コマンドの使用方法やinstall方法に若干の違いがありますが、
互換性があり、npmのプロジェクト設定ファイル（package.json）をそのまま使うことができます。
yarn と npm のコマンドの一覧・比較表
yarn と npm のコマンドの一覧・比較表は、次のとおりです。
基本的には、同じ単語を使っていますが、少し表現が違うものもあるので、注意が必要です。
| コマンド | yarn | npm |
|---|---|---|
| インストール (package.json に記載があるものを追加する) | yarn install | npm install |
| インストール (パッケージを指定して追加) | yarn add <package> | npm install <package> |
| アンインストール | yarn remove <package> | npm uninstall <package> |
| アップデート | yarn upgrade <package> | npm update <package> |
| バージョン確認 | yarn --version | npm --version |
| キャッシュ操作 | yarn cache clean | npm cache clean |
| スクリプト実行 | yarn run <script> | npm run <script> |
| パッケージ情報 | yarn info <package> | npm info <package> |
| パッケージ検索 | yarn search <package> | npm search <package> |
| パッケージ一覧 | yarn list | npm list |
| 脆弱性チェック | yarn audit | npm audit |
| 脆弱性の修正 | yarn audit fix | npm audit fix |
dependencies と devDependencies の 追加フラグの違い
npmでは--save で、パッケージをdependencies（本番環境に必要なパッケージ）に追加して、
--save-devフラグで、devDependencies（開発時に必要なパッケージ）に追加します。
ただ、yarnではこれらの代わりに、yarn add --devコマンドで、dependencies（本番環境に必要なパッケージ）に追加して、
通常のyarn addコマンドで、devDependencies（開発時に必要なパッケージ）に追加します。
つまり、npmのnpm install --save <package>コマンドは、yarnではyarn add <package>と等価です。
どちらの方法でも依存関係の保存が行われ、package.jsonファイルが更新されます。
# Dev環境のみで、使用する Styled_Components の型定義ファイルを npm で Install
npm install --save-dev @types/styled-components
# Dev環境のみで、使用する Styled_Components の型定義ファイルを yarn で Install
yarn add --dev @types/styled-components# 本番環境に必要なパッケージとして、Expressを npm で Install
npm install express --save
# 本番環境に必要なパッケージとして、Expressを yarn で Install
yarn add expressJavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
『GEEK JOBキャンプ』スピード転職コース（無料）
【IT道場】入校時0円！ 就職目的プログラミングスクール
エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】
『techgym』 (Python特化・無料)
Twitterやってます！Follow Me！
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
