Node.js の再インストールと Sass, Gulp の導入をしてみた

注意事項

下記の内容は、私が試してみた内容にすぎません。内容の正確性を保証するものではありませんので、試す場合は自己責任でお願いします。

正確な情報等は、各ソフトウェアの公式サイト、ドキュメント等でご確認ください。

はじめに

今回は、フロントエンドの学習を進める上で Sass や gulp について学習した方が良い のではと考えたので、環境構築をしていきたいと思います。

学習した方が良いと考えたのは、 こちらのロードマップ で HTML / CSS / JavaScript のあとに学習するよう記載があったからです。 あと、個人の考えとしても Sass やタスクランナーはフロントエンド開発で避けて 通れないのではと考えているのもあります。使えた方が便利そうですし使ってみたいなと も思います。

というわけで、環境構築していきます。

現在の環境

Sass や gulp をインストールする手段として、 npm というパッケージマネージャーを 利用する方法があります。 npm は Node.js をインストールすると一緒にインストール されます。

私の PC では、既に Node.js がインストールされているので、このまま Sass と gulp を インストールしてもいいのですが、将来プロジェクト毎に開発環境が変わったりした時に Node.js を毎回アンインストール/インストールを繰り返すのは大変ですし手間が掛かると 思います。

そこで、 Node.js をバージョン管理できるソフトウェアがあるようなので、インストール して使っていきたいと思います。ちなみに現在の環境は下記のとおりです。

OS      : Windows 8.1
Node.js : 10.13.0
npm     : 6.4.1

作業の流れ

おおまかな作業の流れとしては、下記の通りです。

・ 現在インストールされている Node.js やパッケージの確認。
・ アンインストーラーで Node.js の削除
・ Node.js のバージョン管理ツールをインストール
・ Node.js のインストール
・ gulp のインストール
・ Sass のインストール

1. インストールされている Node.js, npm のバージョン確認

まずは、現状確認の為にインストールされている Node.js, npm のバージョン確認を 行いたいと思います。

node -v
v10.13.0

npm -v
6.4.1

2. npm でグローバルインストールしたパッケージを確認

ついでに、自分で過去グローバルインストールしたパッケージが思い出せなかったので、 下記コマンドを打って確認します。

npm list --depth=0 -g
C:\Users\username\AppData\Roaming\npm
`-- eslint@5.12.0

・・・たしか、 ESLint という便利な物があるらしいと Web かなんかで見て試しにインス トールしたことがあったような？そんなことを思い出しました。 ESLint 以外は特に入っ ていないようです。

3. アンインストーラーで Node.js を削除

今回、 Node.js のバージョン管理ソフトには nvm-windows を使用します。

nvm-windows のインストール手順によると、既に Node.js がインストールされている場合 はアンインストールするように指示があったので、まずは既存の Node.js を削除します。

Windows 版の Node.js にはアンインストーラーがあるので、他のソフトと同じように 「プログラムと機能」から削除しました。あと、しなくても大丈夫かなと思いましたが Windows の再起動を念の為しておきました。

4. プログラムフォルダから Node.js が削除されているか確認

アンインストールが終了したら、プログラムフォルダに Node.js 関連のフォルダが残って いないか確認します。確認箇所は下記のフォルダです。

C:\Program Files\nodejs

確認したところ、フォルダは残っていませんでしたので次の手順へ。

5. npm の入っているフォルダがまだ残っているので削除

npm のフォルダも探して、残っていたら削除します。

C:\Users\username\AppData\Roaming\npm
C:\Users\username\AppData\Roaming\npm-cache

ばっちり（？）上記の隠しフォルダが残っていたので、削除しました。これでインストール 出来る状態になりました。

6. nvm-windows のインストール

こちらのページ から nvm-setup.zip の最新版をダウンロード。解凍して出来たフォルダに入っている インストーラを実行しインストールします。

インストーラーを実行中に nvm と Node.js のインストール先について指定できるよう でしたが、自分はデフォルトのままでインストールしました。

下記のコマンドを「Windows PowerShell」または「cmd」で実行して、インストール出来 ているか確認します。

nvm version
1.1.7

無事 nvm-windows をインストール出来ました。

7. Node.js のインストール

今回は、 Node.js の最新版をインストールします。開発に必要になったら順次追加で インストールしていきたいと思います。

下記コマンドで最新版がインストールされます。
nvm install latest

インストールされている Node.js の一覧
nvm list
12.11.1

使用する Node.js を指定する。
nvm use 12.11.1

Node.js のバージョン確認
node -v
v12.11.1

npm のバージョン確認
npm -v
6.11.3

8. gulp のインストール

npm を使えるようになったので、次にタスクランナーの gulp をインストールします。 今回は試しに「ローカルインストール」してみたいと思います。

プロジェクトの設定情報が記述されたpackage.jsonファイルを生成
npm init -y

Gulp のコマンドラインユーティリティー。これはグローバルインストール。
npm install --global gulp-cli

Gulp 本体をローカルインストール
npm install -D gulp

バージョン確認
gulp -v
CLI version: 2.2.0
Local version: 4.0.2

Sass を扱う場合は下記もインストール
npm install -D gulp-sass

9. Sass のインストール

次は、CSS 拡張メタ言語 の Sass をインストール・・・しようと思ったら、上記の手順 までで既に gulp 経由で Sass が使える状態のようです。

作業後の環境

nvm-windows : 1.1.7
Node.js     : v12.11.1
npm         : 6.11.3
gulp        : 4.0.2
gulp-sass   : 4.0.2

おわりに

以上で、 gulp を使って開発できる環境が整いました。これから JavaScript の チュートリアル学習の合間に Sass の学習もしていきたいと思います。（両立出来るか不安 です。）

最後までご覧頂きありがとうございました。