はじめに

記事をご覧いただきありがとうございます。
現在私は大学に通いながら日々プログラミングの勉強を進めています。
主に領域としましてはフロントエンドをメインに勉強をしてきました。そこでふと疑問に思った部分があります。

それは「npm」と「npx」の違いについてです。

主にlocalhostを立てる際に使用していましたが突然こんがらがってしまいこれは一度しっかりと理解し直すべきと感じこの記事を書くに至りました。

対象の読者

一度でも「npm」「npx」コマンドを使用したことがある方
日々開発でlocalhostを立てている方
テンプレとして考えておりしっかりと理解し直したい方
一度でも私と同じように「npm」と「npx」でこんがらがったことがある方

1.そもそも「npm」「npx」とは？

npm

Node.jsを使用したことがある方は一度は目にし、npmを使用したことがあるのではないでしょうか。
ではこのnpmとはなんなのか

結論npmとは（node package manager）の略でNode.js をインストールするとすぐに利用できる依存性+パッケージのマネージャーです。

これは私が調べて出てきた内容ですが私はここでも依存性、パッケージのマネージャー？なんだそれ、と思いました。ですのでここではその用語の意味も併せて解説したいと思います。
まずここでの依存性とは自分のプロジェクトないし環境に何かしらの影響、作用を与えているもののことを指します。これはプロジェクトのファイル構成を見た際によく目にするnode_modulesの中身が私たちに影響を与え続けるものと言ったらイメージが掴みやすいのではないでしょうか。

続いてパッケージのマネーシャーとは、２つの単語に分けて考える必要があります。それは「パッケージ」と「マネージャー」です。
一つ目の「パッケージ」は様々なシーンで便利に利用できるプログラムの塊のことを指し、「マネージャー」とはそこの管理という意味を指します。

npx

npxとは node package executerの略でパッケージの実行ツールです。 npmとの違いはインストールされてないパッケージでも自動的に探してインストールして実行してインストールしたパッケージの削除をします。

私は以上の内容をこれが「npx」だと提示されましたが正直これでは理解できなかったのでもう少し噛み砕いて説明したいと思います。そもそもnpxとはnpmバージョン5.2.0より同梱されているコマンドで、ローカルインストールしたコマンドを実行するために使われます。つまり端的にかいつまんで説明をすると

npm はnode package manager　＝　パッケージの管理ツール
npx はnode package executer　＝　パッケージの実行を行うツール

となります。

仮にnpxが存在しなかった場合には以下のコードを実行することでインストールすることが可能です。

 npm install -g npx

※もっと詳しく知りたい方はこちら↓

2.利用方法・タイミング

それでは実際にこれらのコマンドをいつ使用するのかについて書いて行きたいと思います。

まず前提としてnpmはそれ自身では、パッケージを実行しません。npmを使用してパッケージを実行するためにはpackage.jsonファイルで実行するパッケージを指定する必要があります。

実行ファイルがnpmパッケージ経由でインストールされると、npmはリンクを作成します。
またnpmでパッケージを実行するには、次のようにローカルパスを入力する必要があります。

$ ./node_modules/.bin/your-package

もしくは以下のようにpackage.jsonファイルのscriptsセクションに次のような内容を追加します。

package.json

{
  "name": "your-application",
  "version": "1.0.0",
  "scripts": {
    "your-package": "your-package"
  }
}

そして以上の準備が整い次第私たちの大好きな以下のコードを実行します。

npm run

そしてここでnpxを使用していくわけです。
ここでは何通りかの利用方法を紹介したいと思います。

インストール済みモジュールの実行

 npx <インストール済みモジュール名>

インストールしていないモジュールを実行(実行後に自動削除)

npx <未インストールのモジュール名>

GitHub上の特定リポジトリを明示的に指定して実行

npx <未インストールのモジュール名>

つまりよく私たちが使用するであろう以下のようなコードの意味として、プロジェクトを作成する際に各モジュール間の依存関係を解決しながらプロジェクトを作成することができるというイメージではないでしょうか。

npx vue create <プロジェクト名>

3.似ているもの ~yarn編~

以上の内容を調べていて頭をよぎったもの。それは「yarn」です。

各言語のget startの部分でnpm かyarnでの構築方法が記載されているのを何度か目にしており、こいつはなんなんだと思いつついつもスルーしていたので良い機会と思い概要だけでも掴もうと調べてまとめました。

yarnとはJavaScriptのパッケージマネージャであり2016年にFacebookが公開したもので、npmと互換性があるためpackage.jsonでも利用できるというものでした。

メリットとしてnpmよりインストールが速く、npmよりも厳密にモジュールのバージョン指定が可能なので人によってはnpmよりもいいという意見を持っている人もいるそうです。

使い方としてはターミナルで以下のコマンドを実行

sudo npm install -g yarn

次にpackage.jsonの作成

yarn init

そしてpackage.jsonに記載されたモジュールを以下のコードによりインストールをします

yarn

いつも特に気にすることなく教えてもらった方がnpmだったからと利用していましたが以上のようなメリットを見てみると一度yarnも使用してみようと思いました。

4.最後に

以上のように実際に調べてみて学びがとても多くありました。

普段テンプレート、よく「お約束コード」とも表現されたりしますが、それらのコードを分解、紐解いてみると結構面白いなと感じました。これからもおそらくお約束コードのようなものを見つけることがあると思いますが、一度立ち止まって積極的に調べてみようと思います。

最後まで読んでいただきありがとうございました。

npmとnpxの違い説明できますか？