f:id:Saki-Htr:20210811214438p:plain

はじめに

フィヨルドブートキャンプの、JavaScriptの環境設定をするプラクティスで、

終了条件
1. nvmをインストールする。
2. nvmを使ってNode.jsの最新版をインストールし、デフォルトで利用するNodejsのバージョンとして設定する。

という課題があった。
そこで、

JavaScriptを書くのに、なぜJavaScriptではなく、Node.jsというものをインストールするのか？
そもそもnvmとは何か？
nvmをfishシェルで使うにはどうすればいいか？

という疑問に直面したので、今回の記事で、

nvmとNode.jsとは何か
fishシェル環境下でnvmを使う手順
nvmで最新のNode.jsをインストールする手順

についてまとめた。

用語解説

そもそもJavaScript とは

JavaScript(以下、JSと記載)はブラウザ上で動くために開発されたプログラミング言語。ブラウザ上で、ページに動きを追加するのがメインのお仕事
- クライアントサイド：クライアント側のWEBブラウザ、および「WEBブラウザで動作する処理」のこと。JSはこっちで動く
- サーバーサイド：サーバーから構築されたコンピュータ、およびそれらでおこなわれる処理のこと

Node.jsとは?

サーバーサイドのJavaScript
本来クライアントサイドで動くJSを、サーバサイドで動けるようにしたものが、Node.js。Node.jsによって、PHPのようにサーバーサイドで動く。勿論コードはJSで書く。
サーバーサイドJavaScriptは、Node.js以外にも有るが、これが一番メジャー。(ネットで他の種類を探したが、出てこなかったので「サーバーサイドJSといえばNode.js」と認識することにした)

nvmとは?

Node.jsのバージョン管理ツール

nvmをインストールする前に、気になったこと

以前railsの環境構築で、node.jsをインストールしないとrails sすることができず、当時、Node.jsを、nodebrew(Node.jsのバージョン管理ツール)を使ってインストールした記憶がある。 MacにNode.jsをインストール - QiitaやNode.jsを見ながらインストールした思い出。
そういえばこの時、Node.jsをインストールする方法がもう一つあり、それがnvmだった。nodebrewとの違いも気になったので、調べた。

nvmとnodebrewの違いは？

nvm
- GitHub:nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions
- Node Version Manager
nodebrew
- GitHub:hokaccha/nodebrew: Node.js version manager
- Node.js version manager
それぞれのGitHubを見ると、nvmはNode Version Managerで、nodebrewはNode.js version managerとある

→新たな疑問：NodeとNode.jsの違いは？同じものなのか？

NodeとNode.jsの違いは？

ネットを検索しているとNode.jsの情報ばかり出てくるので、同じものを指すと判断した。
おそらく、Node.jsを実行するときのコマンドが、nodeなので、それを受けてNodeと呼ぶことがあるのだと思う。

→よって、nvmもnodebrewも、Node.jsのバージョン管理ツールと判断した。

fishシェル環境下でnvmを使う手順

環境

macOS BigSur 11.5
nvm 0.38.0
Fisher 4.3.0
Node.js v16.6.0

nvmをインストールする

公式のGitHub:nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versionsのとおりにインストールした。

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

Homebrew installation is not supported.

とあったので、Homebrewと使ってインストールはしなかった。

nvmはfishをサポートしていない

nvmのGithubを見ると、fishシェルをサポートしていないとあり、fishシェル環境下で使える方法をいくつか紹介している。

Note: nvm does not support Fish either (see #303). Alternatives exist, which are neither supported nor developed by us:
- bass allows you to use utilities written for Bash in fish shell
- fast-nvm-fish only works with version numbers (not aliases) but doesn't significantly slow your shell startup
- plugin-nvm plugin for Oh My Fish, which makes nvm and its completions available in fish shell
- fnm - fisherman-based version manager for fish
- fish-nvm - Wrapper around nvm for fish, delays sourcing nvm until it's actually used.

(nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versionsより)
私はこの中で、fish-nvmを使うことにした。

Fisherをインストールする

なぜFisherをインストールするのか

fish-nvmのGitHubのInstallを見ると、

Fisherを使った手順
oh-my-fishを使った手順
fundleを使った手順

が紹介されている。
(FabioAntunes/fish-nvm: nvm wrapper for fish-shellより)

動作報告の多かったFisherを使うことにした。

Fisherとは

フレンドリーな対話型シェル「Fish」のプラグインマネージャ
コマンドラインから関数、補完、バインディング、スニペットを管理できる。シェルの機能を拡張したり、プロンプトの見た目を変えたり、異なるシステム間で繰り返し使える設定を簡単に作成できる。

Fisherのインストール手順

# そもそもインストールしていないか確認
$ fisher
fish: Unknown command: fisher #=>インストールしてない

# 公式GitHubの通りにインストール
$ curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher

fisher install version 4.3.0

Fetching https://codeload.github.com/jorgebucaran/fisher/tar.gz/HEAD
Installing jorgebucaran/fisher
           /Users/<ユーザー名>/.config/fish/functions/fisher.fish
           /Users/<ユーザー名>/.config/fish/completions/fisher.fish
Installed 1 plugin/s

# バージョン確認
$ fisher -v
fisher, version 4.3.0  #=> インストール成功!

fish-nvmのインストール

先程インストールしたFisherを使ってfish-nvmをインストール。公式GitHub(FabioAntunes/fish-nvm: nvm wrapper for fish-shell)の通りに実行。

$ fisher install FabioAntunes/fish-nvm edc/bass

fisher install version 4.3.0
Fetching https://codeload.github.com/FabioAntunes/fish-nvm/tar.gz/HEAD
Fetching https://codeload.github.com/edc/bass/tar.gz/HEAD
Installing FabioAntunes/fish-nvm
           /Users/<ユーザー名>/.config/fish/functions/__nvm_run.fish
           /Users/<ユーザー名>/.config/fish/functions/node.fish
           /Users/<ユーザー名>//.config/fish/functions/npm.fish
           /Users/<ユーザー名>//.config/fish/functions/npx.fish
           /Users/<ユーザー名>//.config/fish/functions/nvm.fish
           /Users/<ユーザー名>//.config/fish/functions/nvm_alias_command.fish
           /Users/<ユーザー名>//.config/fish/functions/nvm_alias_function.fish
           /Users/<ユーザー名>/.config/fish/functions/yarn.fish
           /Users/<ユーザー名>//.config/fish/completions/nvm.fish
Installing edc/bass
           /Users/<ユーザー名>//.config/fish/functions/__bass.py
           /Users/<ユーザー名>//.config/fish/functions/bass.fish
Installed 2 plugin/s

# バージョン確認
$ nvm -v
0.38.0 #=> インストール成功！

nvmの使い方

nvmで最新のNode.jsをインストールする手順

nvm --helpを見ると、以下の記述がある。

 nvm install [<version>]                     Download and install a <version>. Uses .nvmrc if available and version is omitted.
   The following optional arguments, if provided, must appear directly after `nvm install`:
    --latest-npm                              After installing, attempt to upgrade to the latest working npm on the given node version

最新の安定版をインストール

$ nvm install stable --latest-npm
Downloading and installing node v16.6.0...
Downloading https://nodejs.org/dist/v16.6.0/node-v16.6.0-darwin-x64.tar.xz...
########################################################################################################################### 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v16.6.0 (npm v7.19.1)
Creating default alias: default -> stable (-> v16.6.0)

インストールできたか確認。

# インストールされているNode.jsの一覧を出力
$ nvm ls
->      v16.6.0
default -> stable (-> v16.6.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.6.0) (default)
stable -> 16.6 (-> v16.6.0) (default)
lts/* -> lts/fermium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.4 (-> N/A)
lts/fermium -> v14.17.4 (-> N/A)