トップ > しっかりめの記事 > gulp導入の覚え書き（前編）- Node.jsのインストールまで

gulp導入の覚え書き（前編）- Node.jsのインストールまで

しっかりめの記事 JavaScript gulp

gulpを使おうとなった時に以前行った手順は記憶の彼方なので、これまでのメモをまとめました。
（特にNode.jsまでは一度入れてしまえば中々入れ直すこともないと思うので忘れてしまいます）

☆長くなるので前・後編に分けました。後編はこちら。

大まかな流れ

以下に沿って進めます。

1. homebrewをインストール  
　↓  
2. anyenvをインストール  
　↓  
3. nodenvをインストール  
　↓  
4. Node.js（npm）をインストール  ・・・前編ここまで
　↓  
5. gulpをインストール

1. homebrewをインストールする

homebrewとは

App Storeで扱っていない、開発をするためのソフトウェアをインストールする際に依存関係を管理してくれるツールです。

一言でいうと、macOSのパッケージ管理ツールです。
以前調べました（記事）。

「homebrew＝自家醸造＝ユーザー自らがビルドする」でしたね！

日本語のhomebrew公式ページの
「これをmacOSのターミナルまたはLinuxのシェルプロンプトに貼り付けて下さい。」という部分を、コピペでコマンドラインで実行します。

これでbrewコマンドが使えるようになります。

【参考】homebrewについて

【簡単】MacにHomebrewをインストールする方法と基本的な使い方｜新卒エンジニアの開発日記

2. anyenvをインストールする

anyenvとは

pyenvやrbenv、phpenv、nodenvなど「〜env」と名のついた、プログラミング言語のバージョン管理ツールを一元管理するツールです。
各環境（仮想環境とか、プロジェクト）ごとに各言語のどのバージョンを使っているかを管理してくれます（と解釈しました）。

anyenvのメリットです。

  • 現在のバージョンを何に設定しているか、どのバージョンが入ってるかまとめて確認できる
  • 〜env系を簡単にインストールできる
  • 新しいプログラミング言語を追加しても.bash_profileや.zprofileなど（bashやzshといったシェルの設定ファイル。パスを通す時に記述する）に書き込まずに（汚さなくて）済む
  • VM （VirtualMaschine）での開発でプロジェクトを切り替えるとき、いちいち VM を立ち上げ直す手間がない
  • プロジェクトごとにバージョンを切り替えて開発できる

VMのことなど、一部まだよくわかっていないですが、便利ということは分かりました。

anyenvのインストール方法は2つあります。 ※以下シェルがzshの書き方です。

方法1：brewコマンドを使う

brew install anyenv
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l

2行目は anyenv init - を実行する処理を echo と >> を使って .zshrc に記述します。

3行目でシェルを再起動させます。

シェルを再起動させる簡単な方法 - Qiita

exec $SHELL -l とは以下の意味だそうです。

環境変数 $SHELL をログインシェルから起動させることを exec するという意味となり、ターミナルが再起動できるようになります。

まだ理解するには早かったみたいです...。

方法2：gitコマンドを使う

GitHubにあるリポジトリをクローンしてインストールします。

git clone https://github.com/riywo/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l

GitHubに説明がありました（英語です）。

GitHub - anyenv/anyenv: All in one for **env

【参考】anyenvについて

anyenv + macOS環境構築 - Qiita

3. nodenvをインストール する

anyenvをインストールして使えるようになったanyenvコマンドから「〜env」をインストールできるようになります。

nodenvとは

プロジェクトごとにNode.jsのバージョンを自動で切り替えてくれるツールです。

コマンドラインでnodenvをインストールします。

anyenv install nodenv

exec $SHELL -l

以降のNode.jsのインストール手順もこちらに書かれています！

Node.jsのバージョンを自動で切り替えられるnodenvが超便利 - Qiita

コマンドの使い方が丁寧に書かれています！

anyenvとnodenvでNode.jsのバージョン管理をしよう！ - to-R Media

4. Node.js（npm）をインストール する

npmはNode.jsをインストールすると、もれなくインストールされます。

まずグローバルでNode.jsのインストール、バージョンの設定をします。

グローバルでNode.jsをインストールする

Node.jsはバージョンを指定してインストールします。必要なバージョンをグローバルでインストールして、全体、各プロジェクトでバージョン指定を行って使います。

インストールできるバージョンの確認

ndenv install --list

バージョンがずらっと出てくるので、安定した最新のバージョンを選びます。
新規プロジェクトの場合は最新のものでOKです。
数字だけのもののうち、一番数が大きいものが最新です。

☆ここではv13.5.0をインストールしてみます。

インストール

nodenv install 13.5.0

グローバルでNode.jsのバージョン指定をする

インストールしただけでは使えないのでバージョンの指定をします。グローバルのバージョンがデフォルトになります。

グローバルでのNode.jsのバージョン指定

nodenv global 13.5.0

プロジェクト（ローカル）ごとにNode.jsのバージョン指定をする

バージョン指定をするファイルは .node-versionです。.node-versionファイルは直接作成する方法と、コマンドで作成する方法があります。

.node-versionファイルの中身

13.5.0

ローカルのNode.jsのバージョン指定

nodenv local 13.5.0

上記のコマンドで.node-versionファイルが作られます。
プロジェクト内に .node-versionファイルがない状態、すなわちバージョンを指定しない場合はグローバルで指定されているバージョンが使われます。

インストールしただけでは使えない、バージョン指定が必要ということなので、グローバルかプロジェクト、どちらかでバージョン指定が必要であることがわかりました。

バージョンの確認

node -v

または

node --version

ちなみにanyenvでは「〜env」ごとにインストールされている言語のバージョン（ここではNode.js）のリストと、指定されているバージョンが分かります。

anyenv versions

続きは後編で

後編ではgulpのインストールとnpmの使い方についてまとめます！