本記事の内容

npx/npm/nvmとは何で、どんな関係か
nvmのインストール
MacOSのターミナルで"npx create-vue"コマンドを使えるようにする！

３が今回の最終目標となる。

環境

macOS Monterey
MacBook Pro (13-inch, M1, 2020)

経緯（読み飛ばしてok）

Vue3を学習するため、以下のサイトのコースを受講している。
Vue Mastary※課金要、一部無料

勉強しているコースのチャプター２にて、Vueプロジェクトの作成（参照）があり、npx create-vueを使ってVueプロジェクトを作成することになった。

「npxをhomebrewでインストールしたらええやろ！」と思ってbrew install npxとしても、「そんなもん無いよ」と言われてしまった。

これについて調査すると、３時間ほどかかったため今回調査内容をまとめてみた。

調査結果概要

npxはそもそもパッケージではないためhomebrewでインストールできない
npx/npm/nvmの関係
nvmのインストール方法

調査の詳細

npxはそもそもパッケージではないのでhomebrewでインストールできない

npxはパッケージだと思い、homebrewでインストールできるだろうと次を試した。

brew install npx

ここで、エラーが発生。

realworldvue3 % brew install npx
==> Downloading https://formulae.brew.sh/api/formula.jws.json
################################################################################################################################################################################################### 100.0%
==> Downloading https://formulae.brew.sh/api/cask.jws.json
################################################################################################################################################################################################### 100.0%
Warning: No available formula with the name "npx". Did you mean nyx, nox, upx or gpx?
==> Searching for similarly named formulae and casks...
==> Formulae
nyx                                                nox                                                upx                                                gpx

To install nyx, run:
  brew install nyx
realworldvue3 %

そもそも、npxはhomebrewのインストール対象外のようだ。

npx/npm/nvmの関係

調べてみると、npmのツール群にnpxが存在していると言われ、さらにnvmなるものも関係しているという。そこで、一度それぞれの語を調査した。

npx, Node Package eXecutor
- パッケージの実行を行うためのコマンドラインツール
- パッケージを都度インストール&アンインストールすることで、パッケージを残さない
- npxはnpmのVersion5.2.0以降に含まれる
npm, Node Package Manager
- Node.jsのパッケージを管理するシステム
- 便利なパッケージをそのプロジェクトにインストールして使用可能（Visual StudioのNuGetと同様）
- 直接パッケージをダウンロードすると発生しうるリスク（パッケージの依存関係、競合）を回避できる
- nvmはhomebrewからインストールできるが、公式ではサポートされていないので避けるべき
nvm, Node Version Manager
- 一つのシステム内に複数のバージョンのNode.jsをインストールしておき、必要に応じてバージョンを切り替えて使える
- MITライセンス
- ネットスラングのnvmはNever Mindの意

つまり包含関係としてはnvm＞npm＞npxといった形で、nvmをインストールすれば他の２つも利用できるということだ。

nvmのインストール方法

ターミナルで以下を実行し、nvmをインストールしよう。

.zshrcの作成

touch ~/ .zshrc

.bashrcの作成

touch ~/.bashrc

xcodeコマンドツールのインストール

xcode-select --install

このGithubのサイトでコマンドを確認してインストール。私が確認した時は次のコマンドだった。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

一度Command + Qでターミナル終了
バージョン、nvmのインストール、npmのバージョンを確認して完了

~ % nvm -v
0.39.7
~ % command -v nvm
nvm
~ % npm -v
10.2.4

npx create-vueの実行

npxが使えるようになったので、"npx create-vue"コマンドで
Vueプロジェクトを作成する。

npx create-vue real-world-vue

npxコマンドが機能したことを確認！

終わりに

「これくらいわかるよね？」という具合に唐突に出てきたnpxであったが、うまく自分の中で解釈ができた。
そもそもnpmからわからないではcreate-vueを使わない方法でプロジェクト作成を行なっているので、興味がある方は是非。
npmにおけるパッケージの概念について詳しく説明されているため、勉強になると思う。

以上。

参考

そもそもnpmからわからない
homebrewはnvmをサポートしていない
以下、該当箇所抜粋。
Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.
nvmの使い方