Salesforce 開発者のための WSL2 環境構築

:recycle: <b>最終更新日： 2023/02/06</b>

こんにちは。この記事はSalesforce 開発者向けブログ投稿キャンペーンへのエントリー記事です。
テーマは `[4] Salesforce 開発を効率化する便利なツールやサービス` です。

> :pencil: [Salesforce 開発者向けブログ投稿キャンペーン 第4弾](http://sfdc.co/DEV-BLG-DEC)

# はじめに

少し前からですが、Windows Insider Program に参加していなくても、WSL2 を使えるようになっています。個人的に Insider Program に参加して、Salesforce 用の環境構築案を [以前エントリしていた](https://qiita.com/takahito0508/items/2f14426e94834885bb8b) のですが、改めて 2020年12月時点での最新版を残したいと思います。

# WSL2 に乗り換えを検討したい理由 ベスト 3

独断と偏見で決めました。

### 【1 位】開発環境構築が早い

- 各種ツールのインストール・アンインストールがコマンドラインで済みます。
- Windows のインストーラーの挙動から解放されます。
- 「なんか動きがおかしくなったからイチからやり直したい」が楽になります。

### 【2 位】Linux コマンドが使える

- Mac で使ってるコマンドが Windows でもそのまま使えます。
- 「ツールがエラーで動かないのですが :cry: 」「あ、ここは `rm` じゃなくて `Remove-Item` に変えてみて :wink: 」などのあるあるから解放されます。

### 【3 位】sfdx autocomplete が使える

- zsh にすることで sfdx コマンドのオートコンプリートが使えるようになります。
- 地味に開発効率が上がります。
- [以前のエントリ](https://qiita.com/takahito0508/items/1ed87981715785b9a46d) へのアンサーになります。

# 手順

## WSL2 を使うための事前準備

公式のガイドにお任せします。

:::note info
[手動インストールの手順](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#manual-installation-steps)
- 手順 1: Linux 用 Windows サブシステムを有効にする
- 手順 2: WSL 2 に更新する
- 手順 3: 仮想マシンの機能を有効にする
- 手順 4: Linux カーネル更新プログラム パッケージをダウンロードする
- 手順 5: WSL 2 を既定のバージョンとして設定する
- 手順 6: 選択した Linux ディストリビューションをインストールする
- Windows ターミナルをインストールする (省略可能)
:::

ここまでが大変ですが、ここまで完了していればいざやり直ししたくなるたびに 簡単に初期状態に戻すことができます。

> [Windows 10のWSL環境を初期化してクリーンな状態に戻す](https://www.atmarkit.co.jp/ait/articles/1807/06/news028.html)

## ユーザ名とパスワードを設定する

好きな文字列が使えます。こちらも公式のガイドにお任せ（手抜き）。

> [新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する](https://docs.microsoft.com/ja-jp/windows/wsl/user-support)

## 各種ツールのインストール

Windows ターミナルから wsl を起動します。

```sh
# wsl を起動
wsl

# 最新化
sudo apt update

(パスワードを求められたら、先ほど決めたパスワードを入力)
```

## zsh

Mac 同様、zsh を使いましょう。

```sh
# インストール
echo Y | sudo apt install zsh

(パスワードを求められたら、先ほど決めたパスワードを入力)

# ログインシェルを zsh に変更
chsh -s $(which zsh)

(パスワードを求められたら、先ほど決めたパスワードを入力)
```

wsl を再起動し、表示が変わることを確認します

```sh
# 再起動
exit
wsl

# 表示された指示に従う > Quit and do nothing.
q
```

## prezto 

[以前のエントリ](https://qiita.com/takahito0508/items/cf820e49b63aea11cd52) のように、ターミナルをかっこよくします。

```sh
git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done
```

定義ファイルで `powerlevel10k` を指定します。

```sh
# エディタを開く
vi ~/.zpreztorc

# INSERT モードに変更
i
```

```sh:.zpreztorc
(省略)
# zstyle ':prezto:module:prompt' theme 'sorin'
zstyle ':prezto:module:prompt' theme 'powerlevel10k'
(省略)
```

```sh
# INSERT モード終了
(Esc キー 押下)

# 保存して閉じる
:wq
```

wsl を再起動し、表示が変わることを確認します

```sh
# 再起動
exit
wsl

(表示された指示に従って、好みの見た目にする)
```

:::note info
ターミナルの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/bf58aeb3-dc2b-2ab4-e852-aa4973ff1781.png)
:::

:::note info
文字化けしている場合はフォントをインストールします。

- [MesloLGS NF Regular.ttf](https://github.com/romkatv/dotfiles-public/raw/master/.local/share/fonts/NerdFonts/MesloLGS%20NF%20Regular.ttf)
- [MesloLGS NF Bold.ttf](https://github.com/romkatv/dotfiles-public/raw/master/.local/share/fonts/NerdFonts/MesloLGS%20NF%20Bold.ttf)
- [MesloLGS NF Italic.ttf](https://github.com/romkatv/dotfiles-public/raw/master/.local/share/fonts/NerdFonts/MesloLGS%20NF%20Italic.ttf)
:::

## /etc/resolv.conf

WSL側のネットワークを設定します。

```sh
# エディタを開く
sudo vi /etc/resolv.conf

(パスワードを求められたら、先ほど決めたパスワードを入力)

# INSERT モードに変更
i
```

```sh:/etc/resolv.conf
nameserver 8.8.8.8
```

```sh
# INSERT モード終了
(Esc キー 押下)

# 保存して閉じる
:wq
```

## /etc/wsl.conf

`resolv.conf` を永続化します。

```sh
# エディタを開く
sudo vi /etc/wsl.conf

(パスワードを求められたら、先ほど決めたパスワードを入力)

# INSERT モードに変更
i
```

```sh:/etc/wsl.conf
[network]
generateResolvConf = false
```

```sh
# INSERT モード終了
(Esc キー 押下)

# 保存して閉じる
:wq
```

## Node.js

nvm を使って Node.js 環境をセットアップします。

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

# 環境変数を設定
echo '' >> ~/.zshrc
echo '# nvm' >> ~/.zshrc
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm' >> ~/.zshrc
echo '[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion' >> ~/.zshrc

# 再起動
exit
wsl

# LTS のバージョンをインストール
nvm install --lts
nvm use --lts

# バージョンを確認
node -v  # v18.14.0
npm -v   # 9.3.1
```

## Yarn

基本的に npm ではなく yarn を使います。

```sh
# インストール
npm install -g yarn

# 再起動
exit
wsl

# バージョンを確認
yarn -v  # 1.22.19
```

## Java

Apex Language Server のために JDK 11 をインストールします。

```sh
# インストール
echo Y | sudo apt install default-jdk

(パスワードを求められたら、先ほど決めたパスワードを入力)

# バージョンを確認
java --version  # openjdk version "11.0.17" 2022-10-18
```

## Salesforce CLI

npm 経由でインストールします。

:::note info
`stable`バージョンを確認してインストールします。
[Salesforce CLI Release Notes](https://github.com/forcedotcom/cli/blob/main/releasenotes/sfdx/README.md
)
:::

```sh
# ここだけ yarn ではなく npm
npm install -g sfdx-cli@7.186.2

# plugins
echo y | sfdx plugins:install @salesforce/sfdx-scanner
echo y | sfdx plugins:install heat-sfdx-cli

# バージョン確認
sfdx plugins --core
```

## VS Code

VS Code 拡張機能をインストールします。

- [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
- [Salesforce Extension Pack (Expanded)](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-expanded)
- [Codey Midnight](https://marketplace.visualstudio.com/items?itemName=salesforce.codey-midnight)
- [Codey's in bed by 10](https://marketplace.visualstudio.com/items?itemName=salesforce.codey-s-in-bed-by-10) 

`settings.json` は複数存在するので、上書きに注意してください。

```sh
code .

(Ctrl キー + ,)
```

```json:settings.json
{
  (省略)
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 14,
  "salesforcedx-vscode-apex.java.home": "/usr/lib/jvm/java-11-openjdk-amd64",
  (省略)
}
```

# さいごに

Windows で開発しているかたのご参考になれば幸いです。がんばっていきましょう。

# Acknowledgements

- 公式など
    - [Windows 10 用 Windows Subsystem for Linux のインストール ガイド](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)
    - [Windows 10のWSL環境を初期化してクリーンな状態に戻す](https://www.atmarkit.co.jp/ait/articles/1807/06/news028.html)
    - [新しい Linux ディストリビューションのユーザー アカウントとパスワードを作成する](https://docs.microsoft.com/ja-jp/windows/wsl/user-support)
- 以前のエントリ
    - [WSL 2 デビューするときの初期設定](https://qiita.com/takahito0508/items/2f14426e94834885bb8b)
    - [Salesforce CLI のオートコンプリートを Windows 端末で試してみた](https://qiita.com/takahito0508/items/1ed87981715785b9a46d) 
    - [zsh + prezto + powerlevel10k で VS Code のターミナルをかっこよくする](https://qiita.com/takahito0508/items/cf820e49b63aea11cd52)