Webフロントエンド開発では、パッケージ管理ツールである「npm」または「yarn」を使用することが必須となっています。
この記事では、Node.jsがすでにインストールされていることを前提に、「npm」または「yarn」の使い方をできるだけわかりやすく解説していきます。
Node.jsのパッケージ管理システムnpmとは？
JavaScriptはWebブラウザだけでなく、サーバーサイドでも実行できる言語であり、クライアントサイド開発だけでなく、サーバーサイド開発にも幅広く使われています。
Node.jsはJavaScriptをサーバーサイドで実行するためのランタイムであり、JavaScriptをWebブラウザやコマンドライン、サーバー上など、様々な場所で実行することができます。
Node.jsでサーバーサイドのモジュールを扱う際、依存関係を管理する必要があります。
このために、Node.jsにはパッケージ管理システムが付属しており、その中でも「npm」と呼ばれるものがJavaScriptのパッケージ管理に特化して使用されます。
「npm」は、JavaScriptのライブラリやフレームワークなどの依存関係を解決するだけでなく、プロジェクトの開発や配布、共有に必要な機能を提供します。
例えば、「npm install」コマンドを使用することで、パッケージが依存する他のパッケージも一緒にインストールされます。
ただし、「npm」を使用して自作のパッケージを公開する場合には、品質やセキュリティなどを十分に検討し、「npm publish」コマンドを使用して公開する必要があります。
「npm」は、2010年にリリースされ、JavaScriptエコシステムの発展に大きく貢献しています。
現在では、JavaScriptを使う際には「npm」を使用することが一般的となっています。
yarnのインストール
「Yarn」は、「Yet Another Resource Negotiator」の略語で、2016年10月にFacebookによってリリースされた「npm」の代替手段です。
「Yarn」を使用するには、まず「npm」を介してグローバルにインストールする必要があります。
以下は、正確なコマンドです。
npm install -g yarn //グローバルでインストール
「Yarn」は、「npm」よりも高速で信頼性が高く、依存関係の解決がより迅速に行えるため、多くのプログラマーによって好まれています。
「Yarn」を使用することで、パッケージのインストールやアップグレードが簡単に行えます。
また、「Yarn」はキャッシュを使用して、同じパッケージを何度もダウンロードする必要がないため、ネットワーク帯域幅を節約することができます。
npm・yarnの使い方
Node.jsをインストールすると、「npm」が自動的にインストールされます。
「npm」自身をアップデートする場合は、以下のコマンドを実行します。
npm update -g npm
一方、「yarn」を使用する場合、プロジェクトごとに異なるバージョンを使用できます。
プロジェクト内で特定のバージョンを使用するには、以下のコマンドを実行します。
yarn set version berry
最新バージョンに更新する場合は、以下のコマンドを実行します。
yarn set version latest
「npm」で同じことをするには、nvm（Node Version Manager）をインストールする必要があります。
「npm」または「yarn」をインストールした後、新しいパッケージを作成するために初期化する必要があります。
以下のコマンドを実行すると、対話形式で質問されます。
npm init
yarn init
対話形式をスキップして、デフォルト設定でインストールする場合は、以下のオプションを使用します。
npm init -y
yarn init -y
これにより、全ての設定がデフォルトでYESになります。
「init」コマンドを使用すると、プロジェクトのルートディレクトリに「package.json」ファイルが生成されます。
このファイルには、プロジェクトに関する設定情報が含まれます。
依存関係のリストも記述されているため、「npm」や「yarn」がプロジェクトを識別し、依存関係を処理するために使用されます。
「package.json」ファイルの例を示します。
{
"name": "npm-init-test",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"keywords": [],
"license": "ISC",
"description": "",
"devDependencies": {}
}
「yarn」の場合、「yarn.lock」ファイルが生成され、依存関係を特定のバージョンにロックし、依存関係ツリーを常に一貫していることを確認します。
新しいパッケージのインストール
Node.jsのパッケージ管理には、ローカルインストールとグローバルインストールの2つのオプションがあります。
ローカルインストール
ローカルインストールは、カレントディレクトリにある「node_modules」フォルダーにパッケージをインストールします。
つまり、プロジェクトごとにバージョンを管理できます。
以下のように、「npm」または「yarn」コマンドを使用してパッケージをインストールできます。
npm install パッケージ名 npm install パッケージ名@ バージョン指定
yarn add パッケージ名 yarn add パッケージ名@ バージョン指定
これにより、使用するパッケージをプロジェクトに新しい依存関係として追加できます。
開発環境でのみ実行されるパッケージをインストールする場合は、以下のように開発依存関係としてパッケージをインストールします。
npm install --save-dev パッケージ名 yarn add - -dev パッケージ名
インストールされたパッケージは、「package.json」の「devDependencies」に追加されます。
「devDependencies」には、開発中に使用するパッケージが含まれています。
したがって、アプリケーションの開発中にのみ必要となります。
一括でインストール
複数のパッケージを一括でインストールすることもできます。以下のコマンドを使用します。
npm install パッケージ名 パッケージ名
yarn add パッケージ名 パッケージ名
パッケージをアップグレード（更新）するには、以下のコマンドを使用します。
npm update パッケージ名 npm update パッケージ名@バージョン指定
yarn upgrade パッケージ名 yarn upgrade パッケージ名@ バージョン指定
省略形として、「npm up」を使用できます。特定のバージョンを指定してアップグレードする場合は、依存関係に注意する必要があります。
依存関係の更新
依存関係は、パッケージを動作させるために必要なパッケージの関係性です。
以下のコマンドを使用して、依存関係を更新できます。
npm update yarn upgrade
不要になったパッケージをアンインストールするには、以下のコマンドを使用します。
npm uninstall パッケージ名
yarn remove パッケージ名
未使用のパッケージを削除
package.jsonから削除した不要なパッケージをnode_modulesから削除します。
npm prune
yarn prune
パッケージの一覧
インストール済みのパッケージの一覧を表示して確認したい場合は、以下のコマンドを使用します。
npm list npm ls
yarn list yarn ls
グローバルインストール
ローカル環境でパッケージをインストールすると、カレントディレクトリに「node_modules」というディレクトリが作成され、その中にパッケージがインストールされます。
グローバル環境では、「システムディレクトリ」の「node_modules」にインストールされ、全てのプロジェクトで使用できます。
プロジェクトを変えても何度もインストールする必要がなく、自動的に実行されpathが通ります。
ただし、グローバル環境にインストールしたパッケージやバージョンが変わると、パッチ問題が発生する場合があります。
グローバルインストールは以下のように行います。
npm install —global パッケージ名
yarn add global パッケージ名
オプションのグローバルですが、グローバルインストールしたパッケージは、他のプロジェクトでも使用できるため、何度もインストールする必要がなく、自動的にパスが通ります。
使用方法はローカルインストールと同様に、オプションのグローバルを指定します。
また、省略形として「 "npm i -g パッケージ名" 」のように書くこともできます。
ただし、グローバルインストールはあまり推奨されておらず、パッチ問題やバージョンの競合が発生する場合があります。
できるだけローカルインストールを行い、プロジェクトごとに必要なパッケージをインストールすることをおすすめします。
npmとyarnの違い
「yarn」と「npm」は、どちらもパッケージ管理の競争で覇権争いをしていますが、それぞれの特徴があります。
まず、「yarn」は「npm」と互換性があり、「npm」で使用していたプロジェクトの設定ファイル(package.json)をそのまま使用できます。
しかし、「yarn」はインストールが早く、セキュリティに関しても「npm」よりも優れています。
特に、バージョン違いの依存パッケージをインストールする恐れがないため、プロジェクトの安定性を高めることができます。
また、「yarn」には「npm」にはない独自の機能があります。
例えば、「npm」は各パッケージを一度に1つずつインストールし、すべてのパッケージを個別にフェッチしますが、「yarn」は複数のパッケージを同時にフェッチしてインストールするように最適化されています。
これにより、パッケージのインストール速度が向上し、開発者の作業効率が高まります。
さらに、「yarn」で依存関係をインストールすると、プロジェクトで使用される依存関係の正確なリストを保存するロックファイルが自動的に作成されます。
このファイルは「yarn.lock」と呼ばれ、パッケージのバージョン管理に役立ちます。
ただし、最近の「npm」はコマンドを使用する際にシンプルで扱いやすくなり、どちらを使っていくかは個人の好みによるところが大きくなっています。
プロジェクトによっては、「yarn」と「npm」を併用する場合もありますが、実際はどちらか一方に統一することが推奨されています。
以上のように、「yarn」と「npm」にはそれぞれ特徴があり、どちらを使うかを決定するには、プロジェクトの要件や開発者の好みも含まれますが、基本的にはプロジェクトやチームの方針に合わせて決定し適切に選択することが望ましいです。
本日は以上となります。
最後まで読んで頂きありがとうございます。