Windows10でnpmを使えるようにする

TailwindCSS」を使いたいと思ったのですが、npmを使用するのが良さそうなので、npmを使えるようにしたいと思います。

どうやら、「Node.js」をインストールすれば一緒に使えるようになるようです。

Node.jsのインストーラを取得

下記よりダウンロードします。
https://nodejs.org/en/download/

画面キャプチャ引用元:https://nodejs.org/en/download/

ポップアップが表示されるので、「ファイルを保存」をクリックします。

Node.jsをインストール

先ほどダウンロードした「node-vXX.XX.X-x64.msi」(Xはバージョンを表しています)を実行(ダブルクリック)します。

画面キャプチャ引用元:node.jsインストーラ

①「Next」をクリック

画面キャプチャ引用元:node.jsインストーラ

②「I accept・・・」にチェックし、「Next」をクリック

画面キャプチャ引用元:node.jsインストーラ

③インストールするフォルダを指定し、「Next」をクリック
※インストールするフォルダは基本的に変更する必要はありません

画面キャプチャ引用元:node.jsインストーラ

⑤「Next」をクリック
※不要なものは外してもOKです

画面キャプチャ引用元:node.jsインストーラ

⑥「Next」をクリック
※【要注意】「Python2」と「VisualStudioBuildTools」が後程インストールする必要あり?いくつかのnpmモジュールのコンパイルに失敗しそう…。npmが正常に動作しない場合は、ここをインストールします。(Python3は入ってるから、VisualStudioBuildToolsだけでOKなのかな…?判明した際は追記します→下記に追記)

早速「Tailwind CSS」のインストールでエラーになったので対処

上の画像のコメントで自分でインストールするなら・・・という下記URLを参考に「Visual Studio Community」をインストールしました。上の画像のチェックを入れてNode.js自体やり直そうかと思ったのですが、pythonのインストールはおそらく不要だろうということで、自分でインストールしました。
https://github.com/nodejs/node-gyp#on-windows

下記の「Visual Studio Community」をダウンロード・インストールしました。「https://github.com/nodejs/node-gyp#on-windows」にはバージョン2017とありましたが、2019で問題ありませんでした。
https://visualstudio.microsoft.com/ja/free-developer-offers/

次に、コマンドプロンプトを再起動し、「npm config set msvs_version 2017」と入力しEnter、「npm config set msvs_version 2019」と入力しEnterを押しました。
※「npm config set msvs_version 2017」はいらないと思いますが、やってしまったので念のため記載

これでエラーは改善されました。また、Python3でも問題ないようです。


画面キャプチャ引用元:node.jsインストーラ

⑦「Install」をクリック

⑧「Finish」をクリック※キャプチャは省略

以上でインストール完了です。

Node.js・npmがインストールされているか確認

①Windowsキー(旗マーク)+Rをクリックします。ファイル名を指定して実行が開きます。

画面キャプチャ引用元:Windows10

②「cmd」と入力し、「OK」をクリックします。コマンドプロンプトが開きます。

画面キャプチャ引用元:Windows10 コマンドプロンプト

③「node –version」と入力し「Enter」を押すと、node.jsのバージョンが表示されます。「npm –version」と入力し「Enter」を押すとnpmのバージョンが表示されます。どちらもバージョンが表示されればインストールできています。