npmとyarnとnpxを説明できるようになる

今やフロントエンド開発に欠かせないコマンドラインツールであるnpmですが、npmって結局何なのと言われるとうまく説明できないなと感じました。 npm・yarn・npxを知らない人に簡単に説明できるレベルなれるようなレベルを目指したいと思います。

Node.jsとは

npmを知るためには、Node.jsについて知る必要があります。

Node.jsは、ブラウザ以外でJavaScriptを実行するために必要な環境です。

以下で詳細を見ていきます。

公式ページの説明を見ます。

Node.js® は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。

$card

誤解を恐れず公式の説明を噛みくだいてみます。 Node.jsをインストールすればパソコンでJavaScriptファイルを実行できるようになるぞ！になるでしょう。

JavaScriptは、基本的にはブラウザ上でしか実行できません。しかし、Node.jsをインストールすることでブラウザ以外でもJavaScriptファイルを実行することができるようになります。

たとえば、下のようなスクリプトファイルはマウスでJSファイルをダブルクリックしても実行できません。 実行するためには、htmlファイルのscriptタグで読み込ませて、htmlファイルをブラウザで開く必要があります。

console.log('hello, world')

Node.jsをインストールすればコマンドラインツール（黒い画面、ターミナルやコマンドプロンプト）で実行が可能になります。

node helloworld.js // hello, world

npmとは

npmで提供されているパッケージを管理するコマンドラインツールです。

ブラウザ以外で、JavaScriptで書いたプログラムが実行できるようになりました。そうすると開発を補助するツールがたくさん作られていきました。 それらのほとんどはオープンソースとしてオンラインで公開されました。そして、誰でも自由に使えるようになり、それらはパッケージと呼ばれるようになりました。

npmはNode Package Managerという名の通り、Node.jsで動くパッケージの管理ツールです。つまり、オープンソースとして公開されたプログラムを管理するツールがnpmになります。パッケージを追加・更新・削除・バージョン管理することができるコマンドラインツールです。

ここで公式の説明も見ておきましょう。

npmにはいろいろなものがあります。

npmは、Node.jsのパッケージマネージャです。2009年にオープンソースプロジェクトとして、JavaScript開発者がパッケージ化されたコードモジュールを簡単に共有できるようにするために作成されました。

npmレジストリは、Node.js、フロントエンドのウェブアプリ、モバイルアプリ、ロボット、ルーター、その他JavaScriptコミュニティの無数のニーズに対応するオープンソースコードのパッケージの公開コレクションです。

npmは、開発者がこれらのパッケージをインストールし、公開するためのコマンドラインクライアントです。

npm公式

npmと呼ばれるものにはいくつか意味があるようです。

• 会社名としてのnpm
• Node.jsのパッケージマネージャーとしてのnpm
• パッケージをインストールしたりするためのコマンドラインクライアントとしてのnpm

話の中でnpmが出てきたときは、3つ目のコマンドラインクライアントとしてのnpmと捉えれば問題ないでしょう。

yarnとは

npmの改良版として登場しましたが、現在はnpmとyarnの違いはほとんどありません。

yarnはnpmの改良版として、旧Facebook社によって開発されました。 できることはnpmと同じで、公開されているパッケージを追加・更新・削除・管理することができます。npmとの互換性もあります。

ではなぜ開発されたのかというと。npmには、当初はバージョン管理やパフォーマンス、セキュリティの問題が山積していたためです。 しかし、yarn側の機能がnpmにも取り込まれていき、現在では気にするほどの違いはないようです。

yarn公式

npxとは

npmで提供されているパッケージをマシン上へインストールせずに、1回限り実行するときに便利なコマンドです。

npxとは、npmパッケージで提供されているプログラムを実行するためのものです。該当のパッケージがパソコンにインストールされていればそれを実行する。されていなければ最新版をダウンロードして実行してくれます。そして、ダウンロードの場合は、実行後、そのコマンドのパッケージを削除します。

create-react-appなど、1回限りのコマンドを実行するときに有効です。ディスクの容量も節約することができる上に、ムダなものをインストールせずに済みます。

まとめ

Node.jsは個人的に理解しにくい概念だと思っていました。名前のせいもあると思うんですが…（拡張子がjsでJavaScriptの実行環境？ってのが知らない人からすればわかりづらい） 調べてみて感じたのは、Node.jsのエコシステムの広がりはオープンソースの素晴らしいところだと思いました。開発者同士で協力してみんなハッピーになろうぜ！みたいなコミュニティの雰囲気が伝わってきて、自分もいつか貢献してみたいと思いました。

npmやyarn、npxについて納得していただければ幸いです。（わからなかった方は参考によりわかりやすいリンク貼っておくので、みにいってください汗）

参考

• Node.js
• npm
• yarn
• npmとyarnとpnpmの違い2021
• Node.jsとはなにか？なぜみんな使っているのか？
• りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】