Windows に WSL を使って Node 環境を構築する

# はじめに
みなさんこんにちは。

今回、Windows 端末に Node 環境を構築する機会がありましたので忘備録も兼ねてまとめておきたいと思います。

普段は Mac で開発をしているエンジニアですが、Windows で同様の環境を作るにあたって、色々ハマったとこもあり、ググって調べながら構築しましたので、その際やったことについてシェアできればと思います。

デフォルトで Windows に搭載されているコマンドプロンプトでも良いのですが、Windows 10 から WSL (Windows Subsysytem for Linux)という Windows 上で Linux 環境を利用することができるようになりましたのでこちらを使いたいと思います。(筆者が Windows コマンドに慣れていない…。そういう点においても Linux に慣れている人にとってとっつきやすいです。)


# 環境
- Windows10 マシン
- WSL (Windows Subsystem for Linux)


# 手順
以下に手順を示します。

## WSL をインストールする
まず、WSL をインストールしないと始まりませんので、まずこちらをやっていきます。

### 機能の有効化
Windows 側で Windows Subsystem for Linux を有効化します。
![https___qiita-image-store.s3.amazonaws.com_0_53168_727b8502-e1c7-b71d-847d-79cdf4aa6dad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/1e15f3b1-b21c-2097-9a0e-96682ab022e1.png)
OK → インストール開始

![https___qiita-image-store.s3.amazonaws.com_0_53168_7cfd6f5c-cc93-7659-13c9-217beb6e51fa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/4e851caa-9260-f562-9afb-6ed2849263f2.png)
「今すぐ再起動」で再起動します。


## ubuntu をインストールする
次に、ubuntu をインストールします。

### 1. ubuntu のインストール
ubuntu はストアから入手します。
Microsoft Store (右上)を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/6cda60d8-b4fc-884e-04f9-2bbbc5d834be.png)

### 2. ubuntu を検索
右上の検索ボックスで ubuntu と入力するといくつか種類がサジェストされると思います。
ここでは一番上の無印のものを使用します。
![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/b78106c6-a144-ee3e-9021-da33dbe1613a.png)

### 3. 入手します
青い入手ボタンを押下してダウンロードしましょう。
(すでに 私の端末には ubuntu 無印がインストールされていたので、参考までに 20.04 LTS を記しています。)
![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/a24f2562-3b18-4c19-106b-1db3d7129ae8.png)

### 4. 起動
ダウンロードが完了するとメニューのリストに表示されると思います。
ダウンロードした ubuntu を押下しましょう。
![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/cbbde15f-517a-2911-c635-230a8378bf2c.png)

### 5. インストール
起動すると、インストールが始まります。
![image (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/864e0f53-5ec1-fa34-4e5d-7076ed313657.png)

ここでユーザー名とパスワードの設定が求められるので適宜入力します。
下記の例では、適当にそれぞれ user01 としてます。
![image (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223429/119b4743-2dcb-ae0f-fb0d-050b07485d6b.png)


完了すると設定したユーザーでログインしている状態になっていると思います。
これで ubuntu のインストールはおわりです！


## パッケージをアップデートする
Linux のディストーションを update します。Windows はこの更新を自動的に実行しないので定期的に更新します。
下記の update コマンドを実行しましょう。少し時間がかかるのでしばし待ちます。

```Bash
$ sudo apt update
$ sudo apt upgrade
```
Do you want to continue? と聞かれる場合があると思いますが、問題なければ "Y" で大丈夫です。


## Node.js をインストールする
ようやく本題である Node.js をインストールする時が来ました！
Node.js のインストール方法はいくつかあるのですが、今回は Microsoft 公式ドキュメントに沿ってみたいと思います。

公式ドキュメント
https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2

1端末で複数の Node.js のバージョンを使用する場合を考慮して、バージョンマネージャーである nvm を使います。

### 1. nvm のインストール
下記コマンドを実行しましょう。すぐ終わります。

```Bash
# 下記 curl コマンドを使うため curl コマンドをインストール
$ sudo apt-get install curl

# nvm のインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
```

　
`$ nvm --version` でインストールされているかバージョンをチェックします。
もしコマンドが見つからないなどのエラーが出たら、一度 ubuntu を再起動してみてください。

```Bash
$ nvm --version
0.35.2
```

### 2. Node.js のインストール
Node.js の安定版(LTS 版)をインストールするには、

```Bash
# 安定版のインストール
$ nvm install --lts
```
とします。
現時点の LTS バージョンは何なのかは公式サイトで確認できます。
https://nodejs.org/ja/

```Bash
$ nvm install --lts
Installing latest LTS version.
Downloading and installing node v12.18.0...
Downloading https://nodejs.org/dist/v12.18.0/node-v12.18.0-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.18.0 (npm v6.14.4)
Creating default alias: default -> lts/* (-> v12.18.0)
```
　
きちんと LTS バージョンがインストールされているか確認してみましょう。
`$ node -v` と入力して、バージョンが表示されていれば無事インストールされています。
2020年6月6日の時点の LTS バージョンは v12.18.0 でした。

```Bash
$ node -v
v12.18.0
```

ちなみに、インストールされていて使用可能な Node のバージョンの一覧を見たい場合は、`$ nvm ls` で確認できます。
下記の場合だと、上記で LTS バージョン(12.18.0)をインストールしたので、そのバージョンが表示されていますね。

```Bash
$ nvm ls
->     v12.18.0
default -> lts/* (-> v12.18.0)
node -> stable (-> v12.18.0) (default)
stable -> 12.18 (-> v12.18.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.18.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.21.0 (-> N/A)
lts/erbium -> v12.18.0
```

#### バージョンを指定してインストール
次に、LTS 版ではなく、固定のバージョンを使用しているプロジェクトもあると思いますので、バージョンを指定したインストール方法も記載しておきます。
コマンドは簡単で、インストールしたいバージョンを指定するだけです。

```Bash:command
$ nvm install v14.4.0
```

```Bash
$ nvm install v14.4.0
Downloading and installing node v14.4.0...
Downloading https://nodejs.org/dist/v14.4.0/node-v14.4.0-linux-x64.tar.xz...
################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.4.0 (npm v6.14.5)
```
はい！簡単ですね！
もう一度 `$ nvm ls` で確認してみましょう。

```Bash
$ nvm ls
       v12.18.0
->      v14.4.0
default -> lts/* (-> v12.18.0)
node -> stable (-> v14.4.0) (default)
stable -> 14.4 (-> v14.4.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.18.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.21.0 (-> N/A)
lts/erbium -> v12.18.0
```
`->      v14.4.0`
というバージョンが増えています！これは 2020/6/6 時点での最新バージョンです。

以上で、node.js のインストールの終了です！
これでめでたく WSL 環境で Node.js が使うことができました！


# 参考記事
https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2
https://qiita.com/matarillo/items/61a9ead4bfe2868a0b86
https://qiita.com/Aruneko/items/c79810b0b015bebf30bb
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea