WSL (Windows Subsystem for Linux) で JetBrains Toolbox App / WebStorm を使う

## やりたいこと
* WSL (Windows Subsystem for Linux) に WebStorm をインストールする。
* WebStorm のインストールは JetBrains Toolbox App を使う。
* WebStorm で日本語入力をする。
* Windows 側の Chrome で JavaScript を実行/デバッグする。

## バージョン
* Windows: 10.0.17763.475 (エディション: Pro, バージョン: 1809)
* Ubuntu: 18.04
* JetBrains Toolbox: 1.14.5179
* WebStorm: 2019.1.1
* VcXsrv: 1.20.1.4

## お断り

### 問題点（解決していないもの）

* VcXserv  
  Multiple windows モードと WebStorm の相性が悪いように見える。  
  WebStorm ですべてのエディタを閉じたあと、何かファイルを開くと、WebStorm が最背面に移動したり、逆に、Always on Top の状態になったり。Fullscreen のほうがいいかもしれません。
* Windows の Microsoft IME が、突然、英語配列になることがあります。`Windows + Space` で戻ります。

## WSL をインストール
詳細は割愛します。

1. `コントロール パネル` > `プログラムと機能` > `Windows の機能の有効化または無効化`
`Windows Subsystem for Linux` にチェックを入れる。

2. 再起動する。

3. Microsoft Store で `Ubuntu` を検索し、インストールする。

4. ファイルシステムを `WslFs` にアップグレードする。（お好みで）

    ```
    wslconfig /upgrade Ubuntu
    ```

5. umask を 0022 にする。（お好みで）
以下を `.profile` に追加する。

    ```shell
    umask 0022
    ```

6. sources.list を日本のサイトに変更する。（お好みで）

    ```shell
    sudo sed -i".back" -e 's,//archive.ubuntu.com,//ftp.jaist.ac.jp/pub/Linux,g' /etc/apt/sources.list
    sudo apt update
    ```

7. パッケージを最新化する。

    ```shell
    sudo apt update
    sudo apt upgrade -y
    ```


## VcXserv をインストール
インストーラーのダウンロードとインストールは割愛します。

### VcXserv の HiDPI 設定
Windows の表示スケールが 100% ではない場合（例: 125%）は、そのままでは文字の表示がボケてしまうので、以下の設定を行ったほうが良いです。

> 参考：[Windows Subsystem for Linux + X Windowを1.024倍くらい使いこなすための方法](https://qiita.com/nishemon/items/bb3aca972404f68bfcd6)

#### 手順

1. フォルダ `C:\Program Files\VcXsrv` を開く
2. `xlaunch.exe` のプロパティを変更する
    1. `互換性` タブ > `高 DPI 設定の変更`
    2. `高い DPI スケールの動作を上書きします` にチェックする
    3. `拡大縮小の実行元:` を `システム (拡張)` に設定する
3. `vcxsrv.exe` のプロパティを変更する
    1. `互換性` タブ > `高 DPI 設定の変更`
    2. `高い DPI スケールの動作を上書きします` にチェックする
    3. `拡大縮小の実行元:` を `アプリケーション` に設定する

`拡大縮小の実行元:` の設定がそれぞれ異なりますので注意してください。

* `xlaunch.exe` => `システム (拡張)`
* `vcxsrv.exe` => `アプリケーション`

#### 設定変更後の画面ショット

<img alt='xlaunch.exeのプロパティ' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/48352b46-254c-dac4-79dd-53f8f0b58035.png'>

<img alt='vcxsrv.exeのプロパティ' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/9db27ff9-28c6-2fb5-2a86-12716fd04b0e.png'>

### VcXsrv の自動起動

1. 構成ファイルを作成する

    1. スタートメニューの `XLaunch` を実行する

    2. `Display setting`

        <img alt='Display settings.png' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/d1d7de2c-dd40-71c0-342e-fb885fb07ad1.png'>

    3. `Client startup`

        <img alt='Client startup.png' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/e7dbac3e-1cdd-2fb0-31c4-7cb2549b7698.png'>

    4. `Extra settings`

        <img alt='Extra settings.png' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/61976c94-d35a-6587-4e6c-70311a4bdd4a.png'>

    5. `Save configuration`

        `Save configuration` ボタンをクリックする。

        <img alt='Finish configuration' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/1ef4fa57-3746-5dfa-e0b9-f4ae892c2765.png'>

        適当な場所（ここでは `ドキュメント`）に保存する。

        <img alt='Save configuration' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/8b27aa58-f7f5-b3f4-62f0-a1439bf9cb09.png'>

    6. `Finish configuration`

        `完了` ボタンをクリックする。

        <img alt='Finish configuration' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/1ef4fa57-3746-5dfa-e0b9-f4ae892c2765.png'>

2. スタートアップフォルダに XLaunch のショートカットを作成する

    1. `C:\Program Files\VcXsrv` フォルダの `xlaunch.exe` を右クリックし「コピー」する。

        <img alt='コピー' width=90% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/ae424179-dde8-9958-ca47-c2e63fbe6c99.png'>

    2. コマンド プロンプトで `start shell:startup` を実行してスタートアップフォルダを開く

        <img alt='スタートアップフォルダを開く' width=90% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/2c5c5ece-d4d5-b2fb-ed95-65932db63384.png'>

    3. スタートアップフォルダで「ショートカットの貼り付け」する

        <img alt='ショートカットの貼り付け' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/88a924dd-942f-8a84-ff51-79a998f6195e.png'>

3. ショートカットにパラメータを追加する

    1. 先ほど作成したショートカットのプロパティを表示する

    2. `リンク先(T):` に、先ほど保存した構成ファイルのフルパスを指定する。

        もとからある文字列に `-run` 以降を追加します。
        `"C:\Program Files\VcXsrv\xlaunch.exe" -run C:\Users\q1701\Documents\config.xlaunch`

    #### 補足
    * `q1701` の部分はユーザー名なので、自分のユーザー名に置き換えてください。
    * OneDrive で「重要なフォルダを保護する」の設定をしていると、「ドキュメント」フォルダは以下のようなパスになっていると思います。

        `C:\Users\q1701\OneDrive\ドキュメント`

    <img alt='xlaunch.exe - ショートカットのプロパティ' width=70% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/3d161e30-13b2-e1e6-b264-d826ecfac341.png'>

4. サインアウト、サインインしなおす。
    タスクバーに VcXsrv のアイコンが表示されればOKです。


## デスクトップ環境をインストール
WebStorm などの個別のアプリを立ち上げるだけなら `x11-apps` パッケージだけで十分ですが、JetBrains Toolbox App を使いたい場合は、`x11-apps` だけではウィンドウが表示されないため使用できません。

そこで、最低限のデスクトップ環境をインストールします。
（ただし、最低限といっても500MB近くダウンロードされますので、`ubuntu-desktop` 等をフルインストールしてもよいかもしれません・・・。）

```shell
sudo apt install -y xfce4-session
```

```shell
# .profile に入れておく
export DISPLAY=:0.0
```

## 日本語化
日本語が不要なひとは、このセクションは飛ばしてOKです。ただし「タイムゾーン」の設定はしたほうがよいかもしれません。

### 日本語フォントをインストール
```shell
sudo apt install -y fonts-ipafont fonts-noto-cjk fonts-noto-cjk-extra
```
### Windows 10 のフォントを参照するように設定（お好みで）
#### ~/.config/fontconfig/conf.d/01-Windows-Fonts.conf
2行目の `<dir></dir>` は、ユーザーごとにインストールしたフォントの格納場所です。
そのようなフォントがなければ、設定しなくても問題ありません。
ユーザー名（`q1701`）の部分は適宜変更してください。

```xml
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/mnt/c/Windows/Fonts</dir>
  <dir>/mnt/c/Users/q1701/AppData/Local/Microsoft/Windows/Fonts</dir>
</fontconfig>
```

設定を反映させます。

```shell
fc-cache -v
# 駄目だったら
fc-cache -frv
```

> 参考：[WSL上のXサーバで、Windows 10にインストールされているフォントを利用する](https://www.atmarkit.co.jp/ait/articles/1812/27/news033.html)


### 言語をインストール
```shell
sudo apt install -y language-pack-ja
sudo update-locale LANG=ja_JP.UTF-8
exit
# いったんbashを抜けて入りなおす
```

### タイムゾーンを `Asia/Tokyo` に切り替える
```shell
sudo sh -c 'echo Asia/Tokyo > /etc/timezone'
sudo dpkg-reconfigure --frontend noninteractive tzdata
```

> 参考：[Visual Studio Code for Linux を WSL 上の Ubuntu 18.04 LTS にインストールする](https://tech.xeres.jp/2018/08/01/installing-vscode-for-linux-in-wsl-ubuntu-18.04-lts/)

### manページ（お好みで）
```shell
sudo apt install -y manpages-ja manpages-ja-dev
```

## 日本語入力

### 参考URLの数々（神々の記事）
* [Visual Studio Code for Linux を WSL 上の Ubuntu 18.04 LTS にインストールする](https://tech.xeres.jp/2018/08/01/installing-vscode-for-linux-in-wsl-ubuntu-18.04-lts/)
* [FcitxのプレエディットをIntelliJでもインライン表示できるようにする](https://qiita.com/Huruikagi/items/4651696a0b9bba00c992)
* [fcitxで作るWSL日本語開発環境](https://qiita.com/dozo/items/97ac6c80f4cd13b84558)

その他ネット上の多数のサイトをググりました。

### .profile
以下を `.profile` に追加します。（神々のお言葉なので、詳細は分かりません・・・

```shell
# fcitx-mozc
export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS="@im=fcitx"
export DefaultIMModule=fcitx
# 半角/全角キーの暴走を防止
xset -r 49
```

> 参考：[Visual Studio Code for Linux を WSL 上の Ubuntu 18.04 LTS にインストールする](https://tech.xeres.jp/2018/08/01/installing-vscode-for-linux-in-wsl-ubuntu-18.04-lts/)

### fcitx-mozc をインストール
```shell
sudo apt install -y fcitx-mozc
```

### fcitx を設定
#### 設定を行うために fcitx を起動する（起動していないと設定できないため）

```shell
fcitx-autostart
# I/O warningが出るが、無視してよい。Enter を押せばプロンプトに戻る。
```

#### 設定GUIを起動

`LANG=C` により英語モードで起動しているのは、この後の説明文で画面項目名を英語で記載するためです。設定行為自体は、日本語のままでも構いません。

```shell
LANG=C fcitx-config-gtk3
```

#### Input Method タブ
* `+` をクリックして、`Mozc` を追加する。（すでに追加されているかもしれません。）

#### Global Config タブ
* `Hotkey > Trigger Input Method` に `Zenkakuhankaku` を追加する。（これもすでに設定済みかもしれません。）

    この設定により `半角/全角` キーで mozc を On/Off できるようになります。なお、追加しなくても、デフォルトで `Ctrl+Space` により On/Off 可能です。

#### Appearance
* `Status Panel Hide Mode` の初期値は `Hide when tray icon is available` ですが、`Auto` や `Show` にすれば、mozc の設定がしやすいかもしれません。（パネルが表示されるので）

#### Addon タブ
* `Advanced` をチェックする。
* `Fcitx IM Frontend` を選択して `Configure` をクリックする。
* `Use On The Spot Style for XIM (Cannot change during running)` をチェックする。

    この設定があってよかったです。素晴らしい情報に感謝です。
    > 参考：[FcitxのプレエディットをIntelliJでもインライン表示できるようにする](https://qiita.com/Huruikagi/items/4651696a0b9bba00c992)

### fcitx が自動起動されるように設定する

.profile に以下を記載する。

```shell
(fcitx-autostart > /dev/null 2>&1 &)
```

> 参考：[fcitxで作るWSL日本語開発環境](https://qiita.com/dozo/items/97ac6c80f4cd13b84558)

（参考サイトにあったif文は省いてしまいましたが、大丈夫かな？ 様子見です。）

### 日本語入力の設定に関して補足

ググると以下の設定をしていることが多かったですが、省いています。
何か不具合が発生したら思い出したいと思います。

####追記(2019/5/11)
`dbus` を使う場合は下記 `machine-id` の設定が必須でした。
当記事の通りでは不要ですが、`xfce4-panel` もインストールした場合、必要となりました。 

```shell
sudo sh -c "dbus-uuidgen > /var/lib/dbus/machine-id"
```


日本語化しない場合、もしかしたらキーボードがUS配列になっているかもしれません。
以下で直せるはずです。

```shell
setxkbmap -layout jp
```


## JetBrains Toobox App をインストール
ようやく JetBrains Toolbox Apps のインストールを行います。
JetBrains Toolbox App は AppImage という謎技術を使用しており、AppImage は FUSE（謎） を必要としますが、WSL では FUSE を使用できないそうです。（WSL 2 では FUSE が使用できるようになるとのこと。）

実行した場合のエラー

```shell-session
$ ./jetbrains-toolbox
fuse: device not found, try 'modprobe fuse' first

Cannot mount AppImage, please check your FUSE setup.
You might still be able to extract the contents of this AppImage
if you run it with the --appimage-extract option.
See https://github.com/AppImage/AppImageKit/wiki/FUSE
for more information
open dir error: No such file or directory
```

代替策として、エラーメッセージにも記載されている通り、`--appimage-extract` を指定することで、手動で展開して使用します。

### 依存パッケージをインストール
前述の手順で `fcitx-mozc` を入れた場合、これらはすでに入っているかもしれません。
少なくとも `xfce4-session` だけではこれらは入りませんでしたので、備忘のため手順に記しておきます。

```shell
# libGL.so.1, libXi.so.6
sudo apt install -y libgl1-mesa-glx libxi6
```

### tar.gz をダウンロード
JetBrais Toolbox App のパッケージを `C:\Users\q1701\Downloads` にダウンロードしておきます。（くどいようですが `q1701` の部分はユーザー名です。）
もちろん、Linux向けの .tar.gz 形式をダウンロードしてください。
なおここまでの設定で、WSL で firefox が使えるようになっているはずなので、それでも良いです。（`sudo apt install firefox`）

### tar.gz を展開
Windows の `C:\Users\q1701\Downloads` は WSLからは `/mnt/c/Users/q1701/Downloads` としてアクセスできるので、直接展開します。
バージョン 1.14.5179 の部分は適宜読み替えてください。
説明のため、ホームディレクトリに展開するようにしています。

```shell
cd
tar xvf /mnt/c/Users/q1701/Downloads/jetbrains-toolbox-1.14.5179.tar.gz
# => jetbrains-toolbox-1.14.5179 ディレクトリが作成される
```

### AppImage を展開
```shell
# 上記の続き
cd ~/jetbrains-toolbox-1.14.5179
./jetbrains-toolbox --appimage-extract
# => squashfs-root ディレクトリが作成される
```

### JetBrains Toolbox App を実行
引き続き、tar.gz をホームディレクトリに展開した前提で記載します。

```shell
# 環境変数 APPDIR に squashfs ディレクトリを指定し、AppRun を実行する
APPDIR=~/jetbrains-toolbox-1.14.5179/squashfs-root ~/jetbrains-toolbox-1.14.5179/squashfs-root/AppRun
```

初回は起動せずプロンプトに戻ってしまう（謎）ので、再実行してください。

```shell
APPDIR=~/jetbrains-toolbox-1.14.5179/squashfs-root ~/jetbrains-toolbox-1.14.5179/squashfs-root/AppRun
```

ここまでの設定が正しければ、画面右側に JetBrains Toolbox App のウィンドウが表示されるはずです。

<img alt='JETBRAINS USER AGREEMENT' width=80% src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/ed49688d-dc5b-0ae9-ae64-0ac7b480d973.png'>

通常の Linux GUI 環境であれば、tar.gz を展開して出てきた jetbrains-toolbox を初回実行して、Toolbox 自体の初期設定を済ませた後にいったん終了すると、自動的に所定の場所にインストールされていて、再ログインすることでインジケーター領域に常駐します。その後、tar.gz を展開して出てきた jetbrains-toolbox は削除してかまいません。
しかし、今回はそうはいきませんので、毎回、同じ手順で起動が必要です。
Toolbox 自体の Update があった場合の動作も、今のところ不明です。
ちょっと不便ですが、これ以上は通常のデスクトップ環境を利用するしかないように思います。

**毎回の起動コマンド（フルパスなのでこのまま実行してOK）**

```shell
APPDIR=~/jetbrains-toolbox-1.14.5179/squashfs-root ~/jetbrains-toolbox-1.14.5179/squashfs-root/AppRun
```


## Windows 側に Chrome をインストール
詳細は割愛します。
この後の作業で使用するので、必要に応じてインストールしてください。
なお、WSL 上で Chrome が使えればよいのですが、`--no-sandbox` や `sudo` を用いてもさっぱり使えませんでした。（coreダンプ、画面がすぐ消える、・・・）
回避策としては、XLaunch を `One large window` または `One window without titlebar` を選択して立ち上げて、`google-chrome --no-sandbox` として起動すれば使えるようです。実際に起動してみると分かりますが、不便なので今回は採用しません。


> 参考：[【WSL】にFirefox&Google-Chromeをインストールする方法！](https://nakomii.hatenablog.com/entry/wsl_ubuntu)


## WebStorm をインストール
Toolbox からインストールします。
`Install` をボタンをクリック。
<img alt='Install WebStorm' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/ea658371-5bec-7998-2f25-a8990f1fb6b9.png'>


## WebStorm を起動
Toolbox から起動します。
アイコンをクリック。
<img alt='Run WebStorm' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/9dde6fe0-9e25-8512-ac74-5f8d329f8cb7.png'>


## WebStorm を設定
Welcome 画面で `Configure` > `Settings` を選択する。

<img alt='Settings' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/dfb3efd4-7ff8-2c01-4f3f-8a87f776ed3a.png'>

### Appearance
せっかくなので UI フォントに Windows の Yu Gothic UI を選択してみました。
設定しなくても日本語が表示されますが、フォールバックされた明朝体になります。（WebStorm 自体は英語です。入力した文字やログの内容という意味です。）

<img alt='Appearance' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/b7d0f6a3-697c-e55e-dbce-b39fed6ad9f8.png'>

### Color Scheme Font
あくまで設定例です。

<img alt='Color Scheme Font' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/d21748a4-01db-910a-04ac-491c677bc641.png'>

### Windows側のChromeを実行するように設定

![ss003 - Settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/a0f76c7b-5bfb-d9bb-1ad2-65e2f8096fdc.png)

設定箇所が3か所あり分かりづらいです。画面の都合でまず2か所説明します。

* 画面上部のブラウザ一覧に <img alt='Add' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/ae9b2aef-1351-244c-62bb-c7b8e3188512.png'> ボタンをクリックして1行追加し、以下の通り設定します。Name と Path はマウスでクリックすると編集できます。

| Name             | Family | Path                                                            |
|------------------|--------|-----------------------------------------------------------------|
| Chrome (Windows) | Chrome | /mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe |

* 画面下部の `Default Browser:` を `Custome path` に変更し、パスを設定します。

    Custom path: `/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe`

次に、追加した `Chrome (Windows)` を選択した状態で <img alt='Edit' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/1a135747-526b-45c0-c410-b744d232c6bc.png'> ボタンをクリックして `Chrome Settings` 画面を表示します。

<img alt='Chrome Settings' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/02bf206b-9892-5844-0631-85bbf7e5625a.png'>

* `Command line options: ` を以下の通り設定します。
    `--user-data-dir=C:\Users\q1701\temp\chrome-user-data`

    繰り返しになりますが、`q1701` は Windows のユーザー名です。適宜置き換えてください。
    Windows 形式で記載します。このフォルダは自動的に作成されます。
    このフォルダには「[カスタムChromeユーザーデータ（謎）](https://pleiades.io/help/webstorm/using-jetbrains-chrome-extension.html)」が格納されるそうです。


## 動作確認用に React.js のプロジェクトを作成（お好みで）
これまでの設定が正しいことを確認するため、適当なプロジェクトを作成します。
あくまで確認用なので、適当なプロジェクトを用意できる人は、この通りでなくても問題ありません。

### anyenv（お好みで）
Node.js をバージョン管理する nodenv を管理するツールです。

<details><summary>サンプル手順</summary><div>

#### クローン
```shell
git clone https://github.com/anyenv/anyenv ~/.anyenv
```

#### .bashrc に設定を追加

Ubuntu 標準の .bashrc の場合、`★` をつけた `case` 文より上のほうが無難です。
WebStorm などをデスクトップのランチャーから実行した場合、読み込まれないためです。
ただし今回は WSL の話なので、関係ないかもしれません。

```shell
# ~/.bashrc: executed by bash(1) for non-login shells.
# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
# for examples

# anyenv
export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"

# ★このcase文より下は、「対話シェル以外」だと実行されない。
# If not running interactively, don't do anything
case $- in
    *i*) ;;
      *) return;;
esac
# (後略)
#
```

#### 初回実行
初回のみプロンプト [y/N] となるので、`y` と回答してください。

```shell
exec $SHELL -l
anyenv install --init
# Manifest directory doesn't exist: /home/q1701/.config/anyenv/anyenv-install
# Do you want to checkout ? [y/N]: y
```


</div></details>

### nodenv（お好みで）
Node.js をバージョン管理するツールです。

<details><summary>サンプル手順</summary><div>

#### nodenv をインストール

```shell
anyenv install nodenv
exec $SHELL -l
```

</div></details>

### Node.js（お好みで）

<details><summary>サンプル手順</summary><div>

#### node

```shell
nodenv install --list   # インストール可能なバージョンの一覧を表示
nodenv install 10.15.3  # 最新版を入れる
nodenv versions         # インストールされたバージョンの一覧を表示
nodenv global 10.15.3   # 使用するバージョンを選択
```

#### yarn

```shell
npm -g install yarn
nodenv rehash
```

#### jetbrains-npm proxy
これを入れておくと、nodenv を WebStorm で使うときに、パッケージマネージャ（npm / yarn）を自動で探してくれる素敵なプログラム。
（Settings でフルパスを指定するなら、不要です。）

```shell
mkdir -p "$(nodenv root)/lib/node_modules"
git clone https://github.com/nodenv/jetbrains-npm "$(nodenv root)"/lib/node_modules/npm
```

</div></details>

### create-react-app（お好みで）

React.js の環境構築ツールです。
これを使ってサンプルプロジェクト `hello-world` を作成します。

<details><summary>サンプル手順</summary><div>

といっても今回は何もいじらないので1行ですが。

```shell
npx create-react-app hello-world --typescript
```

カレントディレクトリに `hello-world` ディレクトリが作成されます。

</div></details>


## WebStorm でサンプルプロジェクトを実行

1. Welcome 画面で Open を選択

    <img alt='Welcome to WebStorm' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/c9e20d65-c7ac-7338-eefb-8e9d71090671.png'>

2. Open File or Project ダイアログで、先ほど作成したプロジェクトを選択

    <img alt='Open File or Project' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/0a1f286d-558c-fc21-44c3-cec00b040de1.png'>

3. `hello-world` をオープンした状態

    <img alt='hello-world' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/0610a157-07e2-a884-8033-0aac4a9b5eb5.png'>

4. プロジェクトのスキャン（インデックス化）が完了するまで待つ

5. `package.json` を開くと `start` の左に <img alt='Run' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/317d7cc5-0a97-72c1-6432-5eef0dc39a97.png'> マークがあるので、クリックして `Run 'start'` を実行する

    <img alt="Run 'start'" src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/e5166dca-7ac1-315b-2abf-1349942d3c5e.png'>

6. Windows 側の Web ブラウザが立ち上がり、サンプルアプリケーションが実行される

    分かりづらいですが、これは先ほど行った WebStorm の Web Browsers の設定ではなく、Windows のデフォルトブラウザが普通に立ち上がるようです。
デフォルトブラウザが Edge であれば、Edge が立ち上がります。これが WSL 上で動く Node.js の仕様によるものなのかどうか、詳細は分かりませんでした。
    <img alt='React App - Google Chrome' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/a0a9b905-f7d0-263a-7f2c-541f5337e8b9.png'>

7. コードを編集してみる（日本語入力とホットリロードの確認）

    日本語を入力しているところ。
    候補ウィンドウは左下に表示されてしまいますが、入力中の文字はインラインで表示されます。

    <img alt='編集中の画面' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/46ff4b2d-f12e-46df-c584-f0c6a99ed417.png'>

    編集を完了したところ。`Ctrl+S` で保存。

    <img alt='編集完了' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/b4531799-9a4a-845b-680f-68b930b6714d.png'>

    表示が更新されました。

    <img alt='リロード' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/2e19ce8d-4087-0d91-7c03-4606d58541a5.png'>


## デバッグ実行

1. 普通に `Run 'start'` しておく

    先ほどと同様に、サーバーが `http://localhost:3000/` で起動され、Web ブラウザが立ち上がります。
    自動で実行される Web ブラウザは、閉じてしまって構いません。

2. デバッグ用の構成を追加

    1. 右上のツールバーから `Edit Configurations` を選択
    <img alt='Edit Configurations' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/e0abb8fe-cf0e-c771-8bf3-ae67a7a38672.png'>

    2. 左上の `+` から `JavaScript Debug` を選択して追加
    <img alt='Add New Configuration' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/a6400ca6-9c3d-0e27-b67d-709ad4eb0dff.png'>

    3. 以下のように構成

        構成内容：
        - Name: `hello-world`
        - URL: `http://localhost:3000/`
        - Browser: `Chrome (Windows)` ※先ほど追加した設定の名前です
        - [x] Ensure breakpoints are detected when loading scripts（お好みで）

    <img alt='JavaScript Debug' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/76f8c392-6261-2d41-8fc4-8ae2a6305341.png'>

3. デバッグ実行

    1. ブレークポイントを追加（`return` の行）
    2. 右上のツールバーから `Debug 'hello-world' を選択
    <img alt='Breakpoint and Debug' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/7cf77a8e-8b97-3a40-64ec-5a87adc919f1.png'>

    3. ブレークポイントで止まりました

        あまり詳しくないので、これくらいの操作で十分なのか自信はありませんが、ひとまず動きました。
    <img alt='Pause' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/738608da-bc78-4adb-5605-87a84059e292.png'>
    <img alt='Pause' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27531/035f5c64-f20e-6769-e3ca-103465bb4021.png'>


## 気になること/雑記

### `--user-data-dir` について (1)

「[カスタムChromeユーザーデータ（謎）](https://pleiades.io/help/webstorm/using-jetbrains-chrome-extension.html)」ではなく、普段使用している Chrome を立ち上げることもできます。
その場合は Chrome の `Command line options:` を以下のように設定します。

`--user-data-dir="C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\User Data" --profile-directory="<プロファイルフォルダ>"`

* 拡張機能 `JetBrains IDE Support` をインストールしておく必要があるかもしれません。
* ほぼ確実に空白を含むので、二重引用符（`"`）で囲んでください。間違えるとその場所にフォルダが作成されてしまいます。
* Chrome で複数の「ユーザー」を作成していない場合は `--profile-directory` は省略可能です。
* フォルダは、Chrome に `chrome://version/` と入力して、`プロフィール パス` の値を確認してください。
* よく分からない場合は、前述の手順の通り、適当な専用のフォルダを指定したほうがよいでしょう。

### `--user-data-dir` について (2)

「[カスタムChromeユーザーデータ（謎）](https://pleiades.io/help/webstorm/using-jetbrains-chrome-extension.html)」には、拡張機能がインストールされていません。まっさらです。
そのため、例えば `React Developer Tools` のような拡張が必要な場合は、デバッグ時に起動された Chrome にインストールしてください。（初回のみでよさそうです。）

### WebStorm の起動方法 (1)

毎回、JetBrains Toolbox App を起動してから WebStorm を起動するのは面倒です。
Ubuntu 標準の `.profile` の場合、`~/bin` と `~/.local/bin` が存在する場合、自動的にそれらが `PATH` に追加されます。
その状態で JetBrains Toolbox App を起動すると、自動的にシェルスクリプト `webstorm` が作成され、コマンドラインから起動できるようになります。
もし作成されない場合は、Toobox 右上の六角ナットアイコンから `Toolbox App Settings` を表示し、`Generate shell scripts` が On になっているかを確認してください。（デフォルトは Off だったかもしれません。いつでも On にでき、シェルスクリプトが作成されます。）
なお `~/bin` と `~/.local/bin` の両方が存在する場合は `~/bin` に作成されるようです。

### WebStorm の起動方法 (2)

前述の (1) でシェルスクリプトを作成しておけば、Windows から以下のコマンドで起動できました。

```
ubuntu -c "bash -l -c webstorm"
```

### WSL の初期化

いろいろやっていると環境がおかしくなるかもしれません。
初期化したい場合は以下のコマンドで可能です。

**即時実行されるので注意！ 戻せません。**

```
wslconfig /u Ubuntu
```

もう一度 Microsoft Store からインストールしてください。

---

**以上です。**