そうiPhoneならね。ってネタ今の新卒には通じないんだろうなー。

別にvscodeでなくても出先で開発はできるんだよなぁと思いつつ、最近vscodeに追加されたvscode server使って出先から開発してみようと思います。

厳密に言うとinsidersにはあったんですが、個人的にセキュリティに直結してそうな機能をinsidersで使いたくなかったというのもあって触れてきませんでした。
まあ現時点ではプレビュー版ではあるのですが、安定板の機能ではあるので大丈夫だろうと考えていきたいと思います。

vscode serverとはなんぞや

2022年11月のver 1.74で紹介されたRemote-tunnel機能のことです。
7月時点でprivate previewとして公開されていた機能で、ざっくり言うと設定したマシンに出先からアクセスできる機能です。

類似のOSSやクラウドサービスとは何が違うのか

従来、出先からコーディングできるツールとしてCoderやcloud9, Cloud Shell editorなどがありますが、それらとの違いはローカルの環境を手軽に引き継げる点です。

cloud9などのサービスは非常に有用なものなのですが、どうしても性能や入力反映のラグなどが気になるところではありました。
そのため、確かに手元の環境を無視して同一の環境を触り続けることができるという大きなメリットがありつつも、自宅に高性能PCを置いている環境では、なぜ手元の環境よりも低性能な環境でコードを書かねばならぬのかといった悩みが生じがちでした。

Remote-tunnelの利点は、これを解決できることです。
例えば、ビルドが重いのでローカルで開発が半ば必須となるようなアプリケーションの開発を出社日の朝から行っている際に、

「このビルドが通ったらここを修正してテスト流してgit pushするぞ」

といった場面でどうしても時間が足りず泣く泣く出社し、返ってきたときには進捗が頭から飛んでいる、なんてケースがあったとします。
タブレットからリモデしてなんとか実行することはできなくもないですが、色々と使いづらくあまり快適とは言えません。

Remote-tunnelがあれば、数クリックで出先からその環境に触れる準備を整えることができ、電車の座席に座りながらタブレットからコマンドを実行してgit pushなんてことができます。

実際にやってみる

ウィンドウ左下のユーザーアイコンをクリックし、Githubアカウントにサインインしてリモートトンネルアクセスを有効にします…をクリックします。

すると、プレビュー機能であることを通知するポップアップが立ち上がるので、これを了承します。
了承するとウィンドウ右下に有効になった旨の通知が表示されるので、ブラウザーリンクをクリップボードにコピーするをクリックします。

コピーしたリンクをSlackなどで操作先の端末に共有し、操作先の端末からそのリンクを踏みます。

リンクを踏むとGithubアカウントへのログインを要求されるのでログインします。

以上、終わりです。操作先の端末にインストールされているvscodeで操作したいなどの要件があればまた話は変わりますが、タブレットで自宅環境を利用してコードを書きたいなどであればこれ以上のことを実施する必要はありません。

ちなみに↑の画像はPCで開いた画面ですが、タブレットでも実行できました。
環境は出低スペ高コスパタブレットの代名詞、kindle fire HD 10 Plusです。自宅で眠ってたので引っ張り出しました。
ラグは無視できない程度にありましたが、実用上問題が生じるレベルではありませんでした。普通に利用できます。

WSL環境の場合の注意点

これまでの操作をWSLにいるvscodeで実行した場合、期待した結果とは異なる結果が引き起こされます。
期待すべき結果はWSL環境にアクセスできることですが、実際はWindwsのユーザー直下が開くことになります。

これを回避するには、wsl側にcli版vscodeを持ってくる必要があります。

こちらから圧縮されたファイルを取得し、wsl側で解凍します。
解凍するとcodeファイルが出てくるので、明示的にそれを指定する形で以下のコマンドを実行しましょう。

./code tunnel

するとvscode serverを立ち上げる旨とライセンス承認を求められるので問題なければyesと回答しましょう。
そしてgithubへのloginを求められるので、画面の案内に沿って進めます。
ログインが終われば、端末名を求められるので適当に答えます。

> ./code tunnel
*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
✔ Do you accept the terms in the License Agreement (Y/n)? · yes
To grant access to the server, please log into https://github.com/login/device and use code XXXX-XXXX
✔ What would you like to call this machine? · hogehoge

終わるとvscode serverが立ち上がります。

共有用のリンクが発行されるので、そちらをクライアント側で開きましょう。