💬

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

2021/02/06に公開・約2,600字

はじめに

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

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

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

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

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

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

便利な機能を使える状態であえて使わないのはもったいないので是非使っていきたいコマンドの１つです。

もし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"
  },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「百聞は一見にしかず」

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

以下のスクラップにてnpxで使用すると便利なツール・パッケージをまとめております。
npxを活用する上で参考になれば幸いです。

ログインするとコメントできます