はじめに
フィヨルドブートキャンプの、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と記載)はブラウザ上で動くために開発されたプログラミング言語。ブラウザ上で、ページに動きを追加するのがメインのお仕事
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
- 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)
- 念のため、
v16.6.0が最新の安定版か公式のページをチェックする。
推奨版はv17.17.4、最新版はv16.6.0とあるが、最新の安定版はv16.6.0なので、無事に最新安定版をインストールできていることになる。
最新版を、デフォルトで利用するnode.jsのバージョンとして設定する
nvm helpを確認すると、
Example: nvm alias default node Always default to the latest available node version on a shell
とあるので、同様に実行する。
$ nvm alias default node default -> node (-> v16.6.0) #=> デフォルトが最新版になっている! hattorisaki@SakinoMac ~/jsbook> nvm ls v16.6.0 default -> node (-> 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) # nodeコマンドでも最新版になってるか確認 $ node -v v16.6.0 #=>最新版になっている!
参考記事
- 用語の理解
- fishシェル環境下でnvmをインストール
nvmのGitHub:nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versionsfish-nvmのGitHub:FabioAntunes/fish-nvm: nvm wrapper for fish-shellFisherのGitHub:jorgebucaran/fisher: A plugin manager for Fish.- fish 環境にnvm + fish-nvmを導入した時のメモ | DevelopersIO
- fishでnvmを使う | しろうまの放牧日記
- nvmを使ってNode.jsをインストール
