MacOSで"npx create-vue"を使うための方法

本記事の内容

1. npx/npm/nvmとは何で、どんな関係か
2. nvmのインストール
3. 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の使い方