Visual Studio Code for the Web（vscode.dev）を使ってみた

この記事の内容

Visual Studio Code がブラウザ上で動作する「vscode.dev」が公開されました
URL にアクセスするだけでインストール不要で VS Code が使えます
GitHub のリモートリポジトリをそのまま開いて編集・コミットが可能です
拡張機能も Web 対応のものは利用できます
デバッグやコード実行には対応していませんが、編集用途としては十分な機能があります

vscode.dev とは

Visual Studio Code がブラウザ上で実行できるようになりました。アクセスするための URL は以下のとおりです。

この URL にアクセスするだけで、VS Code がブラウザ上でそのまま動作します。もともと VS Code はそのような技術基盤を持っていたため、比較的すぐに実現できたのだと思われます。

基本的な操作

フォルダーを開く

vscode.dev ではローカルのフォルダーを開くことができます。実際に試してみると、フォルダーを普通に開けることが確認できました。

ファイルの編集と保存

ファイルの変更・保存も問題なく動作します。普通のデスクトップ版と同様の感覚で編集できます。

検索

ファイル内検索や横断検索も普通に使えます。

リモートリポジトリの操作

vscode.dev の大きな特徴のひとつが、GitHub のリモートリポジトリをそのまま開けることです。GitHub へのサインインを求められますが、サインインするだけで自分のリポジトリ一覧がすぐに表示され、選んで開くことができます。

ファイルの変更差分も表示され、コミット操作もブラウザ上から直接実行できます。ローカルに VS Code をインストールしていなくても、リポジトリの閲覧・編集・コミットが完結します。

拡張機能のサポート

拡張機能についても、Web に対応したものであればインストールして使用できます。一度インストールすると、次回アクセス時にもインストール済みの状態で利用できます。

ただし、すべての拡張機能が Web に対応しているわけではなく、非対応のものも存在します。拡張機能の Web 対応は今後も進んでいくことが期待されます。

できないこと

現時点では以下の操作には対応していません。

コードの実行
デバッグ

あくまでも編集ツールとしての位置付けですが、ソースコードの閲覧・編集・コミットといった用途には十分対応しています。

どんな場面で役立つか

vscode.dev が特に便利なのは、次のような状況です。

複数の PC を使う環境：良いエディターがインストールされていない PC でも、ブラウザさえあればすぐに VS Code が使えます
インストール権限がない環境：セキュリティポリシー等でソフトウェアをインストールできない場合でも利用可能です
手軽にリポジトリを確認したいとき：GitHub のリポジトリを素早く開いて中身を確認・編集するのに非常に便利です

リモートワーク環境が整っている場合は自分の PC で通常の VS Code を使えばよいですが、今後の進化次第では「ローカルの VS Code は不要」という時代が来る可能性も感じられます。デバッグやコード実行にも対応できるようになれば、さらに活用の幅が広がりそうです。

まとめ

vscode.dev は URL にアクセスするだけで Visual Studio Code をブラウザ上で使えるサービスです。インストール不要で、GitHub リポジトリのクローン・編集・コミットまで一通りの作業がブラウザ上で完結します。拡張機能も Web 対応のものは利用でき、今後さらに対応が進むことが期待されます。現時点ではデバッグやコード実行には非対応ですが、編集用途としては非常に完成度が高く、環境を選ばないエディターとして大変便利なツールです。