Windows10でWSLを利用したLinuxの開発環境構築 

# はじめに

web系の開発はmacが定番だったりしてました。
しかし、マイクロソフトのCEOがナデラさんに代わり、マイクロソフトの方針ががらりと変わりました。
Windows10になって、WSLが標準で搭載されるようになり、個人的にはこれからは開発はWindowsで行うようになってくるかと思っています。
なので、環境設定の仕方をまとめてみました。

## Mac vs Windows

Windowsで開発することのメリット

- PCの値段が安い。
- PCの選択肢が多い。
- 2in1マシンを利用すればタッチパネルとマウスが同時に利用できる。
- WSLを利用することにより開発環境と普段の環境を完全に分離できる。

デメリット

- Macのほうが情報が多い。
- iOS(iPhone)アプリをネイティブで作成できない。

とうわけで、WSLを利用した環境設定の方法を記述していきます。

ちなみに、WSLと他の比較

- Windowsネイティブとは、anacondaやcygwinなどlinux用のコマンドをexeに変えたもの。
- VMはVirtualBoxなど

||WSL|Windowsネイティブ|VM|
|---|---|---|---|
|メモリ効率|〇|〇|×|
|情報|△|×|〇|
|速度|〇|〇|〇|
|環境|〇|×|〇|

- VMはメモリを固定して利用するため、一度に複数起動するのは難しいです。
- 情報はlinux用が多いです。Windowsネイティブは.exeとかパスが\とか何かと読み替えないといけません。
- 速度的にはどれもほぼ同じで特に問題はありません。
- Windowsネイティブは環境が破壊されます。下手するとWindowsが起動できなくなる可能性もあります。

# Windows Subsystem for Linuxの有効化

突然ですが、検索ボックス使ってますか？

ここです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/b5bb8651-7d09-0dc2-3915-286d9422ff99.png)

入力するといろいろ検索してくれます。
通常EdgeでBingの検索結果が表示されるだけなので、使えないって思っている人が多いと思うのですが、PCの内部の検索する場合はここから行うと速い場合が多いです。

というわけでここに「windowsの機能」ぐらいまで入力してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/0ae306e7-57fa-9e74-d29b-093cc9db1aad.png)

そうすると、「Windowsの機能の有効化または無効化」と出てくるので、それをクリックしてください。

※ 通常は、コントロールパネルから目的の機能までのパスをなんとなくでもいいので覚えていないと探せません。
※ その下にある「検索候補」から下の虫メガネアイコンのついてる個所はクリックすると、EdgeでBingで検索を行います。多分望むものは出てこないでしょう。
※ アプリの起動も、同様にすると速い場合が多いです。

以下のダイアログが表示されるので、スクロールさせて、「Windows Subsystem for Linux」のチェックを付けて、「OK」をクリックしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/918dbe62-c626-77c0-401d-78feb3064989.png)

# Microsoft StoreからUbuntuのインストール

Microsoft Storeも同様に、検索ボックスに「store」と入力すると起動が速いです。
タスクバーにピン止めされている人はそこから行きましょう。
※ 個人的にはMicrosoft Storeは起動頻度が低いのでピン止めは外して利用しています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/3fc33723-6aaf-c015-514a-b87cc6d0b85e.png)

検索欄に、「ubuntu 18」と入力すると、「Ubuntu 18.04」と出るので、それをクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/aa6e3eb3-8c8e-b4b8-b37a-1601aea039c3.png)

入手をクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/93732b70-73dc-a924-83a1-8806db86cddb.png)

しばらくすると右下に以下のお知らせがでるので、「起動」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/477c1747-0ce9-b2ab-ba85-9cc08ecbe8a9.png)

起動後、「Installing, this may take a few minutes...」がしばらく続きます。

その後、ユーザー名とパスワードを入力してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/f5433df6-682b-7e39-9adc-9ac0d0b03b38.png)

インストール完了です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/38676/0ed963f6-804a-de62-2b02-3a2d00e59f34.png)

# 環境設定

まずはパッケージを最新に更新します。
パスワードを聞かれるので、先ほど設定したパスワードをいれてください。

```sh
sudo apt-get update
```

これでWindowsでもLinuxとほぼ同等なことができます。


## nodejsインストール

最近は、nodejsベースのツールが増えてきましたのでnodejsをインストールします。
バージョンアップが激しいので、nvmを利用します。

```sh
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
```

nvmインストール後、.bashrcが書き換わっているため、読み直します。

```sh
source ~/.bashrc
```

nodeの最新バージョン(v10)をインストールします。

```sh
nvm install v10
```

初回インストールしたものがデフォルトで利用できるため、これからはv10がすぐに利用できるようになります。

※ その他のバージョンを利用したいときは、各々インストールし、aliasを設定しましょう。

## pythonのインストール

python3はインストールされていますが、パッケージマネージャpipがインストールされていないので、インストールします。

```sh
sudo apt-get install -y python3-pip
```

# その他

これくらいインストールしてあれば、あとは必要なものをどんどんいれていけばよいです。

もし、環境構築を失敗した場合は、「プログラムの追加と削除」でubuntuを検索して、アンインストールしちゃいましょう。

ubuntu系は、ubuntu16とubuntu18と無印ubuntuがあるので、それぞれで環境を使い分けてもよいかと思います。
たくさんインストールして同時に動かしても、VMと違ってさほどメモリを圧迫することもありません。

# まとめ

Windows10便利なのでもっと活用しましょう！！