cluster のスクリプトを WSL 上の Vim で編集する

# cluster のスクリプトを WSL 上の Vim で編集する
この記事は [クラスター Advent Calendar 2023](https://qiita.com/advent-calendar/2023/cluster) の9日目の記事です

クラスター株式会社でサーバーサイドのエンジニアをしている chouge です

この記事では WSL 上の Vim で cluster のスクリプトを編集する方法を紹介します

# 結論
次のコマンドを書いたバッチファイルを適当な場所に配置して、js ファイルを開く際の規定の方法として設定する

```
wsl.exe -- vim $(wslpath %1)
```

# 概要
cluster では、自分でアップロードした Scriptable Item がついたクラフトアイテムはクラフト中にスクリプトを編集できます
「エディタで開く」ボタンを押すことでエディタが開きます

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/2507cdc6-cae9-c7ae-ebe4-a1369cea6e6d.png)


ところで、皆さんは普段どのエディタをお使いでしょうか?
自分は **Vim(Neovim)** を使っています

![vim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/34c95e54-9db8-d218-90c4-b19841314fd5.png)

自分が使いやすいように設定を弄ったりプラグインを入れたりしてカスタマイズしています

Windows で開発する際は WSL 上で行っており、カスタマイズした Vim もその上に置いています
そうなると当然 cluster のスクリプトもその Vim で編集したくなってきますね!

しかし、普通は「エディタで開く」ボタンを押すとメモ帳や VSCode が開きます
WSL 上の Vim でスクリプトを開くためにはひと手間必要です

この記事では「エディタで開く」ボタンを押すと WSL 上の Vim が起動し、そこでスクリプトを編集できるようになる方法を紹介します

# 「エディタで開く」で開かれるエディタの設定
cluster から開くエディタを設定する方法は Cluster Creators Guide に載っています

https://creator.cluster.mu/2023/10/06/editor_script/

記事に従って設定すれば「エディタで開く」を押すと VSCode が開くようになります

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/3468bd21-4bc3-d5b6-bdd1-85e8e89414b6.png)

「エディタで開く」を押すと VSCode が開くのは js ファイルの既定の開き方として VSCode が設定されているためです

ファイルの種類ごとの規定の開き方の設定は、Windows の設定から アプリ > 規定のアプリ > ファイルの種類で規定値を選択する にあります

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/9d323a57-2e7f-0ed4-7dfd-56cc17c85a27.png)

また、VSCode で開かれているファイルのパスを見ると js の一時ファイルが開かれています

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/927a908c-1b50-21fa-714c-0c6935b1926f.png)

「エディタで開く」をクリックすると、この一時ファイルを js ファイルの既定の開き方で開こうとして VSCode が開かれています

これらのことから、 js ファイルの規定の開き方を変更して WSL 上の Vim を開くようにすれば良さそうです

# WSL 上の Vim を Windows から開く方法
WSL 上の Vim はあくまで WSL 側にあり Windows 側に入っているわけではありません
そのため VSCode などのように Windows から直接開くことができず、ファイルの既定の開き方として設定することもできません

そこでバッチファイルを使って開くことを考えます

次のようなバッチファイルを作ってダブルクリックなどで実行すると WSL が開きます

```bat:OpenWSL.bat
wsl.exe
```

`wsl.exe` は引数で WSL 内で実行したいコマンドを記述できます
Vim を開きたい場合は次のようにすればよいです

```bat
wsl.exe -- vim
```

# Windows 上の cluster のスクリプトを WSL から開く
スクリプトの js の一時ファイルは Windows 側にあります
WSL から Windows 側のファイルへのアクセスは `/mnt` ディレクトリ下から可能です

```bash
$ ls /mnt
c  d  g  wsl  wslg
```

以下では Windows でのユーザー名を `hogehoge` とします

先ほど VSCode で開いたファイルは `C:\Users\hogehoge\AppData\Local\Temp\Cluster, Inc_\cluster` にありました

Windows でのパスと WSL でのパスはフォーマットが違います
WSL 上では `/mnt/c/Users/hogehoge/AppData/Local/Temp/Cluster,\ Inc_/cluster` でアクセスできます

次のようにして WSL からファイルにアクセスできます

```bash
$ cat /mnt/c/Users/hogehoge/AppData/Local/Temp/Cluster,\ Inc_/cluster/20231207T224148.js
const editor = "Vim";
```

Windows でのパスから WSL でのパスへのフォーマットの変換は `wslpath` コマンドで行えます
```bash
$ wslpath "C:\Users\hogehoge\AppData\Local\Temp\Cluster, Inc_\cluster"
/mnt/c/Users/hogehoge/AppData/Local/Temp/Cluster, Inc_/cluster
```

つまり `C:\Users\hogehoge\AppData\Local\Temp\Cluster, Inc_\cluster` 下のファイルは以下のようにして WSL からアクセスできます

```bash
$ cat $(wslpath "C:\Users\hogehoge\AppData\Local\Temp\Cluster, Inc_\cluster\20231207T224148.js")
const editor = "Vim";
```

# バッチファイルの作成
従って、Windows から WSL 上の Vim で Windows 上のファイルを開くためのコマンドは以下のようになります

```bat:OpenVimOnWSL.bat
wsl.exe -- vim $(wslpath %1)
```

`%1` はコマンドライン引数を受け取って使うためのものです
Windows でファイルを開くとき、開くためのアプリを実行する際の引数としてファイルのパスが渡されます
この渡されたパスを `wslpath` コマンドで WSL のパスに変換することで WSL 上の vim から開いています

このコマンドを書いたバッチファイルを Windows 上の適当な場所に置きます
画像ではファイル名を `OpenVimOnWSL.bat` としています

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/136a39a2-a81d-f3be-4c9d-593460fb2436.png)

このバッチファイルを使って Windows 上のファイルを開くと WSL 上の Vim で編集できます

編集したいファイルを右クリックして　プログラムから開く > 別のプログラムを選択 をクリックします

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/313935d4-aa4c-b9cc-84ff-bb5b717c6501.png)

下にスクロールして PC でアプリを選択する をクリックします

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/ab2e8727-e6f8-69fd-1743-67b13b7b28f4.png)

エクスプローラーが開くので先ほど作成したバッチファイルを選択すると、WSL が起動して Vim でファイルを開くことができます

# 規定の開き方として設定
後は作成したバッチファイルを js ファイルの規定の開き方として設定するだけです

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/1470f5f4-938e-fcdc-1970-fd70d272fc1b.png)

これで「エディタで開く」ボタンをクリックするとWSLが起動し、Vimでスクリプトを編集できるようになりました

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522256/9596fdc4-5409-1f98-5593-3c6f67e0eaa7.png)

# 最後に
使い慣れた開発環境を取り入れることで、効率的に楽しく開発を行うことができるようになります
好きなエディタを使ってスクリプトでの開発を加速させていきましょう!

本記事は以上です
[クラスター Advent Calendar 2023](https://qiita.com/advent-calendar/2023/cluster) の次の記事は @monac さんの「なにか」です!