npmとyarnについて解説
本記事では、npmとyarnについて解説していきます。
そもそもnpmとは何か？なぜ必要なのか？といった基本的なことから、npmとyarnどちらが良いのかといった発展的なことまで解説していくので、参考になるはずです。
これらの知識はフロントエンド開発をする上で必須となりますので、是非この記事を参考にしてください。
そもそもnpmとは？
npmやyarnは、nodeのパッケージを管理するためのツールになります。
具体的には、パッケージのインストールやアンインストール、アップデートなどをすることができます。
「そんなことをしなくても普通にインストールすれば良いのでは？」と思うかもですが、それは難しいです。
なぜなら、パッケージaを使うためにパッケージbが必要といった依存関係が存在するからです。
例えば、next.jsを使うためにはreactが必要みたいな感じです。
その依存関係を全て手動で管理しようとすると、膨大な時間がかかってしまいます。
それを解決するのが、パッケージ管理システムなのです。
なので、フロントエンドで開発する上でnpmやyarnは必須のツールとなります。
npm
では次に、npmについて具体的に解説していきます。
npmのインストール方法などは今回省きます。
初期化
まず、npmを使うためにはプロジェクトを作成する必要があります。
なので、次のコマンドを実行します。
$ npm init
こちらのコマンドを実行すると、色々と聞かれますがとりあえずは全てenterでも問題はないです。
対話を元にpackage.jsonという、プロジェクトの詳細が書かれたファイルが作成されます。
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
詳しい説明は後ほどします。
インストール
次にパッケージのインストール方法を解説していきます。
// 通常
npm install パッケージ名
// 省略形
npm i パッケージ名
// バージョン指定
npm i パッケージ名@x.y.z
このようにバージョンの指定なども可能です。
また、インストールの種類もいくつかあり、次の通りです。
// ローカルインストール
npm install パッケージ名
// グローバルインストール
npm i -g パッケージ名
// devDependenciesにインストール
npm i --save-dev パッケージ名
// 省略形
npm i -Dパッケージ名
ローカルインストールとは、現在いるディレクトリのプロジェクトへのインストールになります。
そして、グローバルインストールとはPC自体にインストールすることになります。
devDependenciesについては後ほど解説します。
アップデート
次にパッケージの更新方法について解説していきます。
# アップデートの確認
npm outdated
# パッケージを指定してアップデート
npm update パッケージ名
# package.jsonに記述された全てのパッケージをアップデート
npm update
ちなみに、こちらも-gをつけることができます。
アンインストール
次に、アンインストールを解説します。
npm uninstall パッケージ
npm remove パッケージ
// 省略形
npm r パッケージ
こちらは全て同じ挙動になります。
実行
最後にパッケージの実行方法を解説します。
まず、以下のようにパスを指定して実行することができます。
./node_modules/.bin/create-react-app
ただ、これだと実行が面倒です。
なので、次のようにしても同じように実行することができます。
npx react create-react-app
npxは、ローカルに実行可能なコマンドを探しにいきます。
そして、もしローカルに該当のものがない場合は、一時的にパッケージをインストールして実行まですることができます。
yarn
では次に、yarnについて具体的に解説していきます。
初期化
まず、yarnを使うためにもプロジェクトを作成する必要があります。
なので、次のコマンドを実行します。
yarn init
npmと同じように対話を元にpackage.jsonという、プロジェクトの詳細が書かれたファイルが作成されます。
インストール
次にインストール方法を解説します。
// 通常
yarn add package名
// バージョン指定
yarn add package@バージョン
// devDependenciesにインストール
yarn add package@バージョン —dev
// グローバルインストール
yarn add global package名
// 全ての依存関係のインストール
yarn
アップデート
次にアップデートの方法を解説します。
// 特定のパッケージをアップデート
yarn upgrade package名
// 全てアップデート
yarn upgrade
アンインストール
次にアンインストールの方法を解説します。
yarn remove package名
実行
最後にパッケージの実行方法を解説します。
yarn package名
こちらはnpxなどのようなコマンドはなく、単にyarnコマンドを使うだけでOKです。
ただ、こちらはローカルに該当のパッケージがないと実行できません。
一応、yarn createというコマンドがあり、こちらはグローバルインストール+実行までしてくれます。
けれど、こちらのコマンドは恐らくパッケージの削除まではしないので、なるべくなら使わないほうが良いのかなと個人的には思います。
package.json
後回しにしてしまいましたが、次にpackage.jsonについて解説します。
こちらは、プロジェクトの詳細が記述されたファイルになります。
それぞれの意味を解説していきます。
name
パッケージの名前です。214文字以下で好きな名前を付けることができます
version
バージョンを指定します。公開しないのであれば極論適当でもOKです。
description
パッケージの説明を記述します。
private
公開設定になります。
公開しない場合はtruenにしておけばOKです。
author
パッケージの管理者について記述します。
repository
パッケージのソースコードを管理している場所を設定します。
main
mainは、そのパッケージをインストールする際に開始となるファイルを指定します。
パッケージ自体を公開しないのなら、特に意味はありません。
scripts
scriptsはコマンドのエイリアスを設定します。
例えば、以下のように指定したとします。
"scripts": {
"start": "next start"
}
この場合はnpm,yarnで以下のように実行できます。
npm run start
yarn start
dependencies
dependenciesには、そのパッケージを実行するのに必要なパッケージを設定します。
ちなみに、パッケージのインストールをすると、自動でここにパッケージの情報が追記されます。
なので、手入力することはほとんどないです。
ちなみに、devDependenciesもありますが、これはそのパッケージを実行するのには関係なく、開発やテスト時に使用するパッケージを設定します。
なので、例えばtypescriptなどがここに該当します。
package-lock.json/yarn.lock
ついでに、package-lock.jsonについても解説します。
package-lock.jsonは、パッケージのバージョンをロックするファイルです。
パッケージをインストールすると作成され、その後インストールする度に更新されます。
これには依存関係にあるものも含め、ダウンロードした全てのパッケージのバージョンとその情報が管理されています。
lockファイルが生成されると、npm iやyarnコマンドを実行してもパッケージの最新バージョンをインストールしません。
代わりにlockファイルに明記されてるバージョンでインストールされますので、インストール時点関係無しでいつも同じバージョンがインストールされることを保証できます。
なので、チームメンバーでバージョンの齟齬が起こる可能性がなくなります。
yarnとnpmを比較
最後に、yarnとnpmについて比較します。
次の5つの観点から解説していきます。
- 信頼性
- 速度
- コマンドの長さ
- 独自機能
- セキュリティ
信頼性
公式のnpmの方がやはり安心と言えば安心です。
また現在npmはGitHubが買収し、Microsoftの孫会社となっているので技術面でも安心と言えます。
とは言え、yarnが信頼性が低いかといったらそんなことも全くありません。
yarnも多くの人に好まれて使われているので、とても安心して使うことができます。
なので、信頼性は若干npmの方が上といった感じでしょうか。
速度
色々とyarnとnpmの速度を比べている記事がありますが、大体はyarnの方が速い傾向にあります。
キャッシュなしやキャッシュありどちらも、yarnの方が半分くらいの時間でインストールを終えることができます。
なので、速度の面で見るとyarnの方が明確に上であると言えるでしょう。
コマンドの長さ
次にコマンドの長さについて比べていきます。
例えば、yarnのインストールはyarnだけで済みますが、npmもnpm iという省略形のコマンドがあります。
これは他のコマンドも同様です。
なので、コマンドの長さはどちらもほぼ一緒であるという結論になります。
独自機能
yarnにはいくつかの独自機能があります。
ただ、逆にnpmにあってyarnにない機能も存在します。
また、独自機能があると言っても、その機能を使うこと自体かなり限定的なタイミングです。
なので、独自機能はyarnの方があるが、それはそこまでのメリットにならないというのが個人的な結論です。
セキュリティ
yarnはコード実行前に、インストールされた各パッケージの整合性をチェックサムで検証します。
つまり、改竄されたファイルをインストールすることを防ぐことができます。
とは言え、npmも初期の頃から比べたら断然セキュリティ面も向上していきます。
例えば、npmはパッケージをインストールするたびにセキュリティ評価が行われます。
なので、npmを使うとヤバいということはほぼ無いでしょう。
つまり、セキュリティの面は同等か、ややyarnの方が上といった感じでしょう。
その他
- yarnは公式でないが故にたまにyarnが原因のバグが起こることもあるそうです。（僕は体験したことがありませんが）
- 若干yarnの方がインストールするのが手間
- npmを使ったことのある人の方が多いため、yarnを導入すると少し学習コストがかかる
結論
結論は両者にほとんど差はないと言えるでしょう。
なので、基本的には公式のnpmを使えば良いかと思います。
とは言え、インストールの速度は明確にyarnの方が上です。
なので、まだまだ開発段階でパッケージのインストールや、CIを回すことが多いといった場合はyarnを採用しても良いかもしれません。
どちらに明らかなデメリットがあるといったことはないので、最終的に好みで決めてしまって問題ないと言えるでしょう。
まとめ
今回はnpmとyarnについて解説してきました。
この記事を参考にして、nodeのパッケージマネージャーの理解を深めてください。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion