こんにちは。アイレットデザイン事業部の長谷です。

アイレットデザイン事業部では「INSIDE UI/UX」と題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。

今回は、私自身よく目にする「npm・npx・yarn」これら3つのコマンドついて、調査したことをまとめていきます。

1. はじめに

「npm・npx・yarn」はJavaScriptのパッケージに関わる仕組みです。さらに「npm・yarnはパッケージを管理するための仕組みでパッケージマネージャー」「npxはパッケージを実行するための仕組み」のように分けることができます。

しかし、いきなりパッケージという単語の連呼をされても、ピンとこない方も多いのではないでしょうか。そのため、次の章でJavaScriptのパッケージマネージャーについて簡単にご紹介します。

2. JavaScriptのパッケージマネージャーとは

JavaScriptのパッケージマネージャーとは、パッケージを実行、インストール、削除など、管理する仕組みのことです。

npmとyarnは、パッケージマネージャーであり、その一方npxはパッケージマネージャーではありません。しかし、パッケージに関わるコマンドではあります。
そのため、これら3つのコマンドは以下の図のようにユーザーが使用することで、パッケージに働きかけることが可能だとイメージしていただければと思います。

package-visual

また、ここでのパッケージの意味としては「JavaScriptのコードや関連ファイルをまとめたもの」の総称で、ライブラリやフレームワークといった概念も特定の目的を持つパッケージといえます。今日まで開発者はこの仕組みを使うことにより、開発に必要な機能を簡単に追加したり、他の開発者とコードを共有したりすることができています。

とても便利なパッケージという概念ですが、使用するためには、当然大量の関連ファイルを管理しなければいけません。しかし、多数のファイルを人の手で一から管理するのは大変ですよね。

そこで、パッケージの管理をコマンドで簡潔にできるようにしたものがパッケージマネージャーという仕組みになります。JavaScriptのパッケージマネージャーについてより深く知っていくために、次の章でNode.jsという技術を絡めながらご説明します。

3. Node.jsとパッケージマネージャー

Node.jsとはいわゆる実行環境（開発環境とも呼ばれる）であり、JavaScriptをサーバーサイドで実行できるようにするためのものです。このNode.jsはそれまでクライアントサイド言語であったJavaScriptをサーバーサイドもカバーできるようにしました。クライアントサイドからサーバーサイドまでの開発言語を統一出来るなど多数のメリットはJavaScriptが選ばれる要因の一つとされています。

そのNode.js上のパッケージを管理するものとして、リリースされたものがnpmです。
npmとは、Node Package Managerの頭文字を取ったもので、2010年1月にnpmがリリースされています。

npmと名前が似ているnpxはパッケージを実行するコマンドです。
npxとは、Node Package Executorの頭文字を取ったもので、 npmのバージョン5.2.0で導入されたコマンドでnpmに紐づいているものです。あくまで実行用の仕組みのため、パッケージマネージャーではありません。

npmの後に新しくリリースされたパッケージマネージャーがYarnです。
Yarnとは、Yet Another Resource Negotiatorの頭文字を取ったもので、2016年にリリースされたnpmと互換性のある新しいパッケージマネージャーです。

次の章では実際に特徴を比較していきます。

4. 「npm・npx・yarn」それぞれの特徴比較

前述させていただいたように、npm・yarnはパッケージマネージャー、npxはパッケージを実行する仕組みです。その点を踏まえた上で、特徴が異なる3つの仕組みを比較しながら見ていきましょう。

以下が「npm・npx・yarn」それぞれの特徴を比較した表になります。

この表から、npmとyarnはパッケージのインストール、アンインストール、更新など、パッケージの管理全般が行えることがわかると思います。一方、npxはパッケージの実行に特化しており、基本的にパッケージの管理は行えないことがわかると思います。

また、上の比較表では省略していますがnpmとyarnにもいくつか違いがあります。

代表的なものをあげると
yarnはセキュリティ面で優れており、簡単に言えば、改ざんしたデータが入りづらい仕組みなっています。さらに、yarnはnpmに比べてパッケージのインストール速度が速い特徴もあり、2倍くらいの差があるとも言われています。

これらの点から、yarnの方がnpmよりも優れていると言われることもあります。
しかし、npmもバージョンアップの度に弱点を改善しているので、最終的にはその時適したものを使用することが一番良いかなと思います。

5. まとめ

ここまで「npm・npx・yarn」の違いについて説明していきました。npm・yarnはパッケージ管理を行うためのパッケージマネージャー、npxはパッケージを実行・インストールするためのコマンドでしたね。

また、パッケージマネージャーについて理解するために、Node.jsなどの技術やJavaScriptの歴史も合わせて考えると、理解が容易になるかもしれません。

「npm・npx・yarn」の3つはそれぞれ適切な場面で使用することが重要なので、それぞれの特徴を理解し、適切に使用していければと思います。

以上が「npm・npx・yarn」の簡単な説明でした。これらの単語は目にしていたけど違いがわからなかった方などは、ぜひ参考にしていただければと思います。

本記事を読んでいただきありがとうございました！