Webstorm + WSLでnode.jsやyarnを使う

# まえがき

普段 **React** や **Vue** を触るなら、Windows上にnode.jsを入れて動かせば十分ですが、
実環境で動作テストしたいとか、Linux上にある何かしらのライブラリを叩きたいときには不便です。

Ubuntu内にIDEをインストールしてXServとかで飛ばすのもナシではないですが、
WSL上でGUIを動かすと重かったりなんとなくイマイチな感じです。

ということで、Windows上でのWebstormにWSLを繋いで環境構築を行ってみました。
基本的にはかなり簡単ですが、yarnだけコケがちなので注意です。

# 前提

以下の環境があることが前提です。

* WebStorm (Windows上)
* WSL2が動作する環境 (今回はUbuntu 20.04を使用)

# WSL環境へのnode.jsのインストール

とりあえずWSL上にnode.jsが入っていないことには始まりません。

[パッケージマネージャを利用した Node.js のインストール | Node.js](https://nodejs.org/ja/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages)
にあるように、Ubuntuでは公式のバイナリがNodeSourceによって提供されているため、こちらを使いました。

```shell
curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
```

インストールが終わったら、ついでにyarnも入れます。
[Installation | Yarn - Package Manager](https://yarnpkg.com/getting-started/install#about-global-installs)

```shell
sudo npm install -g yarn
```

# WebStormの初期設定

ここからはWebStormの設定を行っていきます。

## Node.js interpreter

WebStormを開き、プロジェクトの作成を行います。
`Node.js`をするとインタプリタの設定が出てくるので、プルダウンを押して`Add`をクリック。
下図のように、`Add WSL...`が出てくるのでそれを選択。
![スクリーンショット 2021-02-08 212110.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/066cfc39-46c1-f2d9-244c-18c645635d56.png)
ディストリビューションやNode.jsの場所を聞かれます。
自動で認識してくれるので特に何もしなくても簡単に設定できます。
![スクリーンショット 2021-02-08 212226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/2e467367-864d-67ec-3373-c3368444b9bb.png)

## Package Manager (npmの場合)

次はパッケージマネージャの設定です。
WSL上のnode.jsが選択されたタイミングで、パッケージマネージャのパスも自動で変更されます。
**npmを使用する場合はこのままプロジェクトを作成してOKです。**

## [Optional]Package Manager (yarnの場合)

パッケージマネージャのリストの中には、yarnも存在しています。
![スクリーンショット 2021-02-08 213310.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/88be063c-0010-0e0b-f308-a80dd74bcd58.png)
しかし、そのままプロジェクトを作成しようとすると…？　(◞‸◟)ﾃﾞｭﾝ…

```
Error: Cannot find module '/usr/share/yarn/bin/yarn.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
Done
```

これは`npm install -g yarn`でyarnをインストールしたため、
WebStormにおいてのWSLの初期設定になっている`/usr/share/yarn`に実体がないことが原因です。
(このパスの指定って、Webstormくんが走査してくれるわけじゃなくて決め打ちなんですね…)

`/usr/lib/node_modules/yarn`が正しいパスになります。
Package managerのプルダウンから`Select...`を押して手動でパスを指定してやります。
![スクリーンショット 2021-02-08 214158.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/379ab8b3-c59f-0d23-d492-f89f4ce1d8f8.png)

## Terminalの設定

**Node interpreter**および**Package Manager**が適切に設定出来たら、
テスト用にプロジェクトを作成して起動してみましょう。
きちんと動いていればinitが走り、package.jsonが自動的に生成されるはずです。

しかしTerminalをいざ開いてみると、こちらはcmd.exeのままになってしまっています。
これだと実用性がないので、WSLのターミナルをきちんと表示できるように設定しましょう。

まず最初にコマンドプロンプトを開いて、WSLのデフォルトのディストリビューションを確認。
今回使用するディストリビューションが **(規定)** になっていればOKです。

```
C:\Users\hoge>wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-20.04 (既定)
```

確認ができたら、実際にWebStorm側の設定を行います。
左上の`File`→`Settings...`を開きます。
Settingsのウィンドウが出たら、`Tools`→`Terminal`を選択。
**Shell path**をcmd.exeから`wsl.exe`に変更します。
![スクリーンショット 2021-02-08 220330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/b854af18-e837-d84e-0dac-39d5ce2d6de4.png)

OKを押して設定画面を閉じ、下のTerminalを×で消して開きなおして
きちんとLinuxのターミナルが表示されていれば成功です。
フォントの設定を変えることで、このようにPowerlineの表示も可能です。
![スクリーンショット 2021-02-08 220608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/44b0542c-26fa-1b57-df19-b0efc4a54ed9.png)

## 動作確認

以上でWebStormでWSLを走らせるための最低限の設定は終了です。
実際の動作確認として、作った仮のプロジェクト内でReactを試しに動かしてみましょう。

```shell
# package.jsonがconflictするので一度削除する
$ rm package.json

# カレントディレクトリにReactのサンプルプロジェクトを作成
$ npx create-react-app .

# 実行
$ npm start
```

こんな感じでメッセージが表示されれば起動完了です。
WSL2は仮想マシンとして動いているので、`localhost`ではなく、IPを指定して繋ぎましょう。
起動後に**On Your Network:**として表示されているのがWSLのIPです。

```
Compiled successfully!

You can now view untitled4 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xx.x.xxx:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
```

ブラウザから接続し、ちゃんと接続できればOKです。お疲れさまでした。
![スクリーンショット 2021-02-08 222342.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1093008/d8d5aff0-ad53-54c6-25f1-59d96c958e79.png)

# おわりに

WebStorm側がかなりWSLに寄り添ってくれているため、簡単に環境構築を行うことができました。
ただしYarnのパスがうまく認識してくれない例もあるので、エラーが出てしまった場合は
注意深くエラーメッセージを読んで原因を特定する必要があります。

使い始めなのでまだ見えていない部分もありますが、何かあったら追記していく予定です。
デバッグ周りの機能やCPUプロファイリングなども時間があったらまた記事にしようと思います。