npxコマンドとは？何ができるのか？

はじめに

Nuxt.js のプロジェクトを作成する際に、公式ドキュメントを読みながらすすめていたのですが。

$ npx create-nuxt-app <project-name>

という記述があり、おなじみの install コマンドみたいな 何か という勝手な認識だけで進めていました。

しかし、何回かプロジェクト作成を繰り返す中で、「npx」について理解していないことに気づき、調べてみたところ便利だと感じたためまとめてみます。

間違っている部分もあるかと思われますので、ご指摘いただけると幸いです。

npx コマンドは npm バージョン 5.2.0 より同梱されているコマンドで、ローカルインストールしたコマンドを実行するために使われます。npm のバージョン 5.2.0 がリリースされたのは、今から約 3 年ほど前になるため、今主に使われている npm ではほとんど使える状態にあります。

npx が使える状態であえて使わないのはもったいないくらいなので是非使っていきたいコマンドの１つです。

もし npx コマンドが存在しない場合は。

$ npm install -g npx

でグローバルにインストールできます。

なぜ、npx コマンドなのでしょうか？

npm を使ってプロジェクトを作成、初期化するコマンドは以下の通りです。

$ npm init <project-name>

これは npm を使いプロジェクトを管理配下へ置くために必要な package.json を生成します。

npm を使ってスクリプトを実行するためには package.json の scripts へ予めスクリプトを定義しておく必要があります。

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

上記は create-nuxt-app で作成したプロジェクトから抜粋。

しかし npx コマンドを使うことでインストールされていないコマンドであっても自動的に探してインストール、実行まで行ってくれます。

実行したあとはパッケージの除去まで行ってくれるため、環境が汚れる心配はないそうです。

インストールするまでも無いけど手軽に試したい、環境を汚したくないそんなニーズにぴったりだと感じました。

npx コマンドの基本的な使い方は次のとおりです。

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

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

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

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

GitHub リポジトリを指定して実行

$ npx github:<リポジトリ名>

GitHub のリポジトリを直接指定して実行もできるのが便利ですね。

npx コマンド実行が実行されるとローカル内で指定された node モジュール格納パスの探しに行き、見つからない場合はインターネット上から探して自動的にインストールするようです。
実行した node モジュールは実行後に自動的に削除されるため、環境を大きく汚すことはありません。

前程挙げた Nuxt.js のプロジェクト作成コマンドをもう一度見てみます。

$ npx create-nuxt-app <project-name>

つまり Nuxt.js のプロジェクトを作る際にcreate-nuxt-appというモジュールを実行することで各モジュールごとの依存関係を解決しながらプロジェクトを作成できるというイメージです。

Nuxt.js を使ったプロジェクトスクラッチで１から始めることもできますが、正直かなり手数が多いため、create-nuxt-app を使うことで簡単に始められるのは大きなメリットだと感じます。

npx コマンドを使うことで、インストールせずともスクリプトの実行が簡単に行えることが分かりました。

普段何気なく叩いているコマンド 1 つでも意味が分かると点と点がつながるようにプログラムへの理解がぐっと深まるように感じます。

「百聞は一見にしかず」

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