月額定額プランのご案内ログイン
Web開発
フロントエンド初学者は必見!Nodeの環境構築はこれで決まり!絶対にNode の環境が構築できる!
1 min
フロントエンド初学者は必見!Nodeの環境構築はこれで決まり!絶対にNode の環境が構築できる!

はいどうも!はむさんです!

今回は、フロントエンド初学者のための環境構築として、nodenv のインストール方法について学ぼう!というのをやっていきます。

YouTubeに動画をあげていますので宜しければご覧ください!(高評価と購読ボタンもお願いします!!!)


さて、Node については、Node の公式サイトに行けば、インストールパッケージが用意されているので、それをインストールしてしまえば、事足りるんじゃないか、という意見もあるかもしれませんが、実はそんなことはないですね。

Node は、かれこれ 10 年以上も開発が進められているんですが、現在の最新のバージョンは、LTS だと 16 、最新版だと 17 なんですね、えらいスピードでバージョンが上がっていくんですよね。 なので、過去に Node で作ったソフトウェアを Node のバージョンをあげて動かしてみようとしたら、動かなくなっちゃった、というようなことは、まぁ多々あります。 なので、Node のバージョンを上げる時は、必ず、このバージョンではしっかりと動いていたという証拠を残しておくというのが定石となっています。

なので、通常は、製品それぞれにおいて、この Node のバージョンでは動いていましたよ、みたいな感じでですね、製品を開発する際に使用する Node のバージョンはこのバージョンだよっていう情報をしっかりと残すんですよね。

で、じゃあ、具体的に、どうやって残すのかというと、プロジェクトの中に、.node-versionというファイルを作ってそこにバージョンを書いてあげるというのがその情報の残し方になります。 こうしておけば、製品の数が、数十、あるいは、数百と、増えていっても、.node-version の内容から自動的に Node のバージョンが切り替わってくれるので、バージョンの違いをプログラマが意識する必要がなくなるんですよね。

今回はそれを実現するツールとして、nodenv という素晴らしいツールがありますので、このツールの導入方法について紹介します。

https://github.com/nodenv/nodenv

こちらが nodenv の公式ページになります。 Homebrew on macOS で検索してみてください。 Homebrew on macOS というセクションが見つかります。ここにインストール方法が記載されています。 brew install nodenv というコマンドでインストールしてください。とあります。

% brew install nodenv
zsh: command not found: brew

実行すると、このようにエラーになっちゃいますね。 brew コマンドがないからこうなってしまいます。 「おい、ないんかい!」ってことで、 brew でググってみましょう。 これ、mac には入ってないんですよね、このコマンド。

https://brew.sh/index_ja

というページが見つかるかと思います。

macOS(またはLinux)用パッケージマネージャー と書いてありますが、要は、いろんな便利なパッケージ、ソフトウェアをコマンドラインでインストールすることができる便利なツールだと思ってください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

というコマンドが掲載されています。これをコピーして、先程のターミナルに貼り付けてあげてください。

==> Checking for `sudo` access (which may request your password).
Password:

パスワードが聞かれます。この brew コマンドを install するために、権限が必要になるからですね。

==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort

次、Xcode Command Line Tools がインストールされます。と表示されました。これも必要なので、続けるには RETURNを押してください。 RETURN を押します。で、このXcode Command Line Tools ですが、これは Apple が公式に公開している 便利ツールです。 で、これ、時間かかります。僕のマシンだと 15 分くらいかかります。なので、お茶でも飲んで休憩しましょう。

==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics data has been sent yet (or will be during this `install` run).

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations

==> Next steps:
- Run `brew help` to get started
- Further documentation:
    https://docs.brew.sh

こんな感じでインストールが成功するかと思います。

https://brew.sh/index_ja

では、brew が本当に使えるのかを検証しましょう。

% brew install wget

では、 wgetコマンドを使ってみましょう。

% wget https://brew.sh/index_ja
--2021-11-07 14:17:09--  https://brew.sh/index_ja
Resolving brew.sh (brew.sh)... 185.199.109.153, 185.199.111.153, 185.199.110.153, ...
Connecting to brew.sh (brew.sh)|185.199.109.153|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 22607 (22K) [text/html]
Saving to: ‘index_ja’

index_ja                         100%[=========================================================>]  22.08K  --.-KB/s    in 0s

2021-11-07 14:17:09 (58.6 MB/s) - ‘index_ja’ saved [22607/22607]

index_ja というファイルがダウンロードできました。 中身を見てみると、今観ていた brew のホームページの html が index_ja というファイルで取得できました。 では、この brew を使って、 nodenv をインストールしていきましょう。

https://github.com/nodenv/nodenv#homebrew-on-macos

nodenv のページに戻ってきました。 brew という新たな武器が手に入ったので、これで nodenv インストールしていきたいと思います。

1. Install nodenv.

$ brew install nodenv

を実行します。 1 分くらいでしょうか。無事にインストールできたかと思います。

2. Set up nodenv in your shell.

$ eval "$(nodenv init -)"
Append the above line to your shell's rc/profile file and restart your shell.

For shell-specific instructions to set up nodenv shell integration, run nodenv init.

という箇所をやっていきます。

zsh を使っている場合と、bash を使っている場合が大半だと思いますが、zsh が macOS のデフォルトになっているのでzshの説明をします。 ~/.zshrc というファイルがあればこのファイル内のスクリプトが実行されるんですね。

% echo "echo hello" >> ~/.zshrc

という感じで、 echo というコマンドで hello という文字列を出力するという命令を.zshrc に追加してみました。

% echo $SHELL
/bin/zsh

次に、restart your shell というメッセージの通り、シェルを再起動させてみたいと思います。 これは、shell は、zsh、bash 色々ありますが、環境変数 SHELL にデフォルトのログインシェルが設定されているはずですので、ちょろっと中身をみつつ、普段使っているシェルが入っているなと確認できたら、exec $SHELL を実行してみましょう。

% exec $SHELL
hello

すると、hello を表示されました。先程追記した echo の命令が実行されているということが分かります。 このように、shell が起動した時に行って欲しい命令を.zshrcには書くことができるんですね。 で、この仕組を使って、先程のマニュアルにも書かれていた、eval "$(nodenv init -)" を追加してあげましょう。ということですね。

Close your Terminal window and open a new one so your changes take effect.

とありますが、これはやらずに、 exec $SHELL を実行してあげましょう。これならマウスを動かく必要は無く、世界最速です!

4. Verify that nodenv is properly set up using this nodenv-doctor script:

に進みます。

$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
Checking for `nodenv' in PATH: /usr/local/bin/nodenv
Checking for nodenv shims in PATH: OK
Checking `nodenv install' support: /usr/local/bin/nodenv-install (node-build 4.9.61)
Counting installed Node versions: none
  There aren't any Node versions installed under `/Users/ham/.nodenv/versions'.
  You can install Node versions like so: nodenv install 2.2.4
Auditing installed plugins: OK

このコマンドでは何をやっているのかというと、 nodenv が正しくインストールされているかどうかを検証しているんですね。 基本的には OK と表示されれば、OK なんですが、今回のように新規で nodenv をインストールした場合は、このような結果になるかと思います。

Counting installed Node versions: none
  There aren't any Node versions installed under `/Users/ham/.nodenv/versions'.

で、Node が一切インストールされていません。という内容が表示されています。 Node のインストールはこれから行うことですので、この結果は妥当と言えまので、これは問題ではないです。

5. That's it! Installing nodenv includes node-build, so now you're ready to install some other Node versions using nodenv install.

次、「これで以上です」ということですね。 nodenv installというコマンドでインストールをするための準備が整いました。ということを言っています。

では、 node のインストールやっていきましょう!

% nodenv install --help
Usage: nodenv install [-f|-s] [-kpv] <version>
       nodenv install [-f|-s] [-kpv] <definition-file>
       nodenv install -l|--list
       nodenv install --version

  -l/--list          List all available versions
  -f/--force         Install even if the version appears to be installed already
  -s/--skip-existing Skip if the version appears to be installed already

  node-build options:

  -c/--compile       Force compilation even if a matching binary exists
  -k/--keep          Keep source tree in $NODENV_BUILD_ROOT after installation
                     (defaults to $NODENV_ROOT/sources)
  -p/--patch         Apply a patch from stdin before building
  -v/--verbose       Verbose mode: print compilation status to stdout
  --version          Show version of node-build

For detailed information on installing Node versions with
node-build, including a list of environment variables for adjusting
compilation, see: https://github.com/nodenv/node-build#usage

help をみてみましょう。

% nodenv install -l

を実行して Node のバージョンの一覧を表示させてみましょう。

% nodenv install 16.12.0

3 秒くらいでインストールができました。 今の状態だと、まだ nodeの補完は効きません。

% exec $SHELL

なので、新たに shell を再起動します。 これで、補完も効くようになりました。

% nodenv global 16.12.0

で global、つまり、どこにいても利用できる Node のバージョンを設定します。

% node --version
v16.12.0

バージョンの確認をしてみましょう。先程インストールしたバージョンが表示されていれば成功です! では、これだけだと、nodenv の凄さは伝わらないと思うので、もう少し nodenv と一緒に遊んでみましょう。

% mkdir ~/tmp
% mkdir ~/tmp/project-a
% mkdir ~/tmp/project-b

project-a では 16.12.0 の Node を設定してみます。

% cd ~/tmp/project-a
% nodenv local 16.12.0
% node --version
v16.12.0
% cat .node-version
16.12.0

このように v16.12.0 が表示されました。ここまでは何も凄いところはないです。

% cd ~/tmp/project-b
% node --version
% nodenv install 12.22.7
% node --version
v16.12.0
% nodenv local 12.22.7
% cat .node-version
12.22.7
% node --version
v12.22.7

このように、バージョンを切り替えることができます。めっちゃ簡単です。 じゃあ、 project-a の方のバージョンはどうなってしまうのか? 確認してみましょう。

% cd ../project-a
% node --version
v16.12.0

このように、ディレクトリを移動するだけで、プロジェクトにとっての然るべき Node のバージョンが自動的に採用されるところが確認できました。 なので、一度、.node-version というファイル上に、プロジェクトで使用する Node のバージョンを設定しておけば、何も考えなくても、適切な Node のバージョンが採用されるという素晴らしいツールであるということがお分かりいただけたかと思います。とても便利なツールなので、是非、これからも使ってもらえたらいいなと思います。

この記事が良かった!と思ってもらえたら嬉しいです!シェアもしてもらえるともっと嬉しいです!

はむさん


Tags

#web-development#js#javascript#node#nodenv

Related Posts

macOS でログインシェルを zsh から bash に切り替える方法
macOS でログインシェルを zsh から bash に切り替える方法
1 min
React JavaScript Firebase WebRTC
Courses - コース
ReactとFirebase とWebRTCで P2P ビデオ会議システムを開発しよう!
1 min

クイックリンク

月額定額プランのご案内講師紹介受講生様の声よくあるご質問メルマガ

SNS