スマホからVS Code風エディタでPC操作する（Windows編）

限界開発のとき、スマホからPC上の開発環境へアクセスできると便利です。

ここでは Tailscale と code-server を使って、Windowsマシン上のVS Code環境をスマホから操作できるようにする手順をまとめます。

1. Tailscaleのセットアップ

まずはスマホとPCを同じ仮想ネットワーク上に置きます。

これで、どちらの端末からも互いにアクセスできるようになります。

Windows Subsystem for Linux を使って，軽量なUbuntu環境を用意します．

Microsoft StoreなどでUbuntuをインストールしましょう．

インストール後、Ubuntuを起動し、初期設定を済ませます．

続いて、VS Codeをブラウザ経由で動かすための code-server(https://github.com/coder/code-server) をWSLにインストールします。

sudo apt update
sudo apt install -y curl
curl -fsSL https://code-server.dev/install.sh | sh

WSL起動時に code-server が自動的に立ち上がるようにします。

sudo systemctl enable --now code-server@$USER

一度WSLを再起動してから、設定ファイルを開きます。

vi /root/.config/code-server/config.yaml

以下のように編集します：

bind-addr: 0.0.0.0:8080
auth: password
password: XXXXXXXXXXXXXX
cert: false

パスワード部分（`XXXXXXXXXXXXXX`）は任意のものを設定してください。

Windows側でTCPポート8080の受信を許可します。

（コントロールパネル → Windows Defender ファイアウォール → 詳細設定 → 受信の規則から設定）

1. スマホで Tailscale に接続

2. TailscaleアプリでPCのIPアドレス（`100.xxx.xxx.xxx`の形式）を確認

3. スマホのブラウザで以下にアクセス：

http://100.xxx.xxx.xxx:8080

ログイン画面が表示されたら，先ほど設定したパスワードを入力します．

VS Code風のUIが開ばOKです．

Cドライブ内のファイルにアクセスしたい場合は，WSL経由で次のパスを利用します．

WSLをお使いの方にはおなじみですね．

/mnt/c/

これで、スマホから自分のPC上の開発環境にアクセスできるようになりました．

スマホからもiPadからも簡単にPCのコードをGUIで扱えます．