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](https://www.vuemastery.com/dashboard)※課金要、一部無料

勉強しているコースのチャプター２にて、Vueプロジェクトの作成（[参照](https://www.vuemastery.com/courses/real-world-vue-3-composition-api/create-vue-creating-the-project)）があり、`npx create-vue`を使ってVueプロジェクトを作成することになった。

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

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

# 調査結果概要
- npxはそもそもパッケージではないためhomebrewでインストールできない
- npx/npm/nvmの関係
- nvmのインストール方法

# 調査の詳細
## npxはそもそもパッケージではないのでhomebrewでインストールできない
npxはパッケージだと思い、homebrewでインストールできるだろうと次を試した。
```bash
brew install npx
```

ここで、エラーが発生。

```bash
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の作成
```bash
touch ~/ .zshrc
```
- .bashrcの作成
```bash
touch ~/.bashrc
```
- xcodeコマンドツールのインストール
```bash
xcode-select --install
```
- [このGithubのサイト](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)でコマンドを確認してインストール。私が確認した時は次のコマンドだった。
```
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"コマンドで![uploading...0]()
Vueプロジェクトを作成する。
```
npx create-vue real-world-vue
```
npxコマンドが機能したことを確認！
![スクリーンショット 2024-02-01 19.41.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3136613/64dc1d1a-f9a0-a6db-88e8-5c8c963b570c.png)


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

以上。

# 参考
- [そもそもnpmからわからない](https://zenn.dev/antez/articles/a9d9d12178b7b2)
- [homebrewはnvmをサポートしていない](https://github.com/nvm-sh/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の使い方](https://nodejs.keicode.com/nodejs/how-to-use-nvm.php)