vscode.dev(!)

2021年10月20日 by Chris Dias, @chrisdias

2019年に.devトップレベルドメインが開設されたとき、私たちはvscode.devを取得し、すぐに私たちのウェブサイトcode.visualstudio.comを指すように設定しました（私のようなボストン出身者なら、「pahked it（駐車した）」と言うでしょう）。.devドメインを購入する多くの人々と同じように、私たちはそれを何に使うつもりなのか全く考えていませんでした。そして、それが10年以上にわたるミッションの達成に繋がるとは、まったく予想していませんでした。

ブラウザーにVS Codeを

そして今日に至ります。今、https://vscode.devにアクセスすると、ブラウザーで完全に動作する軽量版のVS Codeが表示されます。ローカルマシン上のフォルダーを開いて、コーディングを始めましょう。

インストールは不要です。

vscode.devの利用開始により、私たちはついに、ブラウザーで完全にサーバーレスで実行できる開発ツールを構築するという当初のビジョンを実現し始めました。詳しい経緯については、Erich Gamma氏によるVS Code Dayの講演「VS Code An Overnight Success…10 Years in the Making」をご覧ください。

では、VS Code for the Webで何ができるのでしょうか？実はかなりのことができます…

クラウドツールによるローカル開発

File System Access APIをサポートする最新のブラウザー（現在はEdgeとChrome）では、Webページが（ユーザーの許可を得て）ローカルファイルシステムにアクセスできます。このローカルマシンへのシンプルなゲートウェイにより、VS Code for the Webをインストール不要のローカル開発ツールとして使用するための興味深いシナリオがいくつか開かれます。例えば、

• ローカルファイルの表示と編集。Markdownで素早くメモを取り（プレビューも！）。完全版のVS Codeをインストールできない制限されたマシン上でも、vscode.devを使ってローカルファイルを表示・編集できるかもしれません。
• ブラウザーツールと組み合わせて、クライアントサイドのHTML、JavaScript、CSSアプリケーションを構築し、デバッグする。
• Chromebookのような低スペックのマシンでコードを編集する。これらのマシンではVS Codeを（簡単には）インストールできません。
• iPadで開発する。ファイルのアップロード/ダウンロード（ファイルアプリを使ってクラウドに保存も可能）や、内蔵のGitHub Repositories拡張機能を使ってリモートリポジトリを開くことができます。

そして、お使いのブラウザーがローカルファイルシステムAPIをサポートしていない場合でも、ブラウザーを介してファイルをアップロード・ダウンロードすることで個々のファイルを開くことができます。

より軽量なエクスペリエンス

VS Code for the Webは完全にブラウザー内で実行されるため、デスクトップアプリでできることと比較すると、いくつかの体験は当然ながら制約されます。例えば、ターミナルやデバッガーは利用できません。これは、ブラウザーのサンドボックス内でRustやGoのアプリケーションをコンパイル、実行、デバッグすることができないため、理にかなっています（ただし、PyodideやWebコンテナーのような新しい技術がいつかこれを変えるかもしれません）。

もう少し微妙なのは、コードの編集、ナビゲーション、ブラウジングの体験です。デスクトップではこれらは通常、ファイルシステム、ランタイム、計算環境を前提とする言語サービスやコンパイラによって提供されます。ブラウザーでは、これらの体験は*完全にブラウザー内で実行される*言語サービス（ファイルシステムなし、ランタイムなし）によって提供され、ソースコードのトークン化とシンタックスハイライト、補完、および多くの単一ファイル操作を提供します。

その結果、ブラウザー内での体験は一般的に次のカテゴリに分類されます。

Good: ほとんどのプログラミング言語で、vscode.devはコードのシンタックスハイライト、テキストベースの補完、そして対応する括弧のペアの色付けを提供します。Tree-sitterの構文木を使用することで、C/C++、C#、Java、PHP、Rust、Goなどの人気のある言語に対して、アウトライン/シンボルへ移動やシンボル検索などの追加の体験を提供できます。

Better: TypeScript、JavaScript、およびPythonの体験は、すべてブラウザーでネイティブに実行される言語サービスによって提供されます。これらのプログラミング言語では、「Good」の体験に加えて、豊富な単一ファイル補完、セマンティックハイライト、構文エラーなどが得られます。

Best: JSON、HTML、CSS、LESSなどの多くの「Web系」言語では、vscode.devでのコーディング体験はデスクトップとほぼ同じです（Markdownプレビューも含む！）。

拡張機能

テーマ、キーマップ、スニペットなど、ほとんどのUIカスタマイズ拡張機能はvscode.devで動作し、設定の同期を通じてブラウザー、デスクトップ、GitHub Codespaces間で設定をローミングすることもできます。

OS固有のモジュールを使用するNode.jsコードを実行する拡張機能や、ローカルの実行可能ファイルを呼び出す拡張機能は、検索結果には表示されますが、利用不可であることが明確に示されます。

とはいえ、ブラウザーで動作するように更新された拡張機能は増え続けており、日々さらに多くの拡張機能が登場しています。

注: 拡張機能の作成者で、ご自身の拡張機能をブラウザーで利用できるようにしたい場合（私たちはそれを望んでいます！）、Web Extensions作成ガイドをご確認ください。

例えば、Luna Paint - Image Editor拡張機能を使うと、VS Code内で直接ラスター画像を編集できます。この拡張機能は、レイヤーやブレンドツールなどの豊富なデザインツールをVS Codeにもたらし、もちろん画像をローカルディスクに保存することもできます。

GitHub Issue Notebooks拡張機能は、GitHubのIssueにNotebook体験をもたらします。これにより、クエリ、その結果、そしてクエリの目的を説明するMarkdownさえも、1つのエディターにまとめてインターリーブさせることができます。

GitHub

VS Codeの多くの拡張機能は、GitHubに保存されているソースコードと連携して動作します。例えば、CodeTour拡張機能ではコードベースのガイド付きウォークスルーを作成でき、WikiLens拡張機能はVS Codeとリポジトリを強力なメモ取りツール（双方向リンク付き）に変えます。GitHubのコードに簡単にアクセスできるように、VS Code for the WebにはGitHub Repositories、Codespaces、Pull Request拡張機能が組み込まれています。簡単な編集やPRのレビューを行い、Continue onでローカルクローンに移行したり、より強力な言語体験が必要な場合や、コミットをマージする前に変更をビルド、実行、テストする必要がある場合は、さらに良い選択肢としてGitHub Codespaceに移行できます。

おや、これはgithub.devにそっくりですね。これらは違うものなのでしょうか？同じもの？なぜ2つも？

良い質問です！github.devは、GitHubに深く統合されたVS Code for the Webのカスタマイズ版です。ログインは自動で行われ、URL形式はgithub.comの/organization/repoモデルに従っているため、.comを.devに変更するだけでリポジトリを編集できます。また、GitHubのライトテーマとダークテーマに合わせてカスタマイズされています。

GitHub上のリポジトリに加えて、VS Code for the WebはAzure Repos（Azure DevOpsの一部）もサポートしています。両方で作業できるように、VS Code for the Webはvscode.dev/githubとvscode.dev/azurereposの2つのルートをサポートしています。しかし、これを覚える必要はありません。単に持っているURLの前に「vscode.dev」を付けるだけです。

例えば、https://github.com/microsoft/vscodeを「https://vscode.dev/github.com/Microsoft/vscode」に変更します。

Azure Reposでも同様です。https://dev.azure.com/…を「https://vscode.dev/dev.azure.com /…」に変更します。

現在、Azure Reposのサポートはリポジトリの読み取り専用のプレビューモードですが、できるだけ早く完全な読み書き機能を提供できるよう鋭意作業中です。

GitHubやAzure DevOpsを利用していない場合でも、デスクトップ版と同様に、拡張機能を通じて他のリポジトリホスティングサービスのサポートを追加できます。これらの拡張機能は、前述の通り、ブラウザーで完全に実行されることをサポートする必要があります。

URLといえば…

デスクトップ版と同様に、VS Code for the Webは、ほぼすべてのバックエンド、言語、サービスをサポートする豊富な拡張機能のエコシステムを通じてカスタマイズできます。デスクトップ版と異なるのは、ユニークなvscode.devのURL（前述のvscode.dev/githubやvscode.dev/azurereposなど）を通じて、事前にインストールされた拡張機能を持つカスタマイズされた体験を簡単に提供できる点です。

例えば、https://vscode.dev/theme/sdras.night-owlにアクセスしてみてください。

ここでは、@sarah_edoによる人気のカラーテーマNight Owlを「ライブ」で体験できます。気に入るかどうかを確認するためだけに、ダウンロードとインストールのプロセスを経る必要はありません。インストール不要です！テーマの作者であれば、README.mdにバッジを作成して、ユーザーがMarketplaceから直接テーマを試せるようにすることもできます（詳細はVS Code for the Webユーザーガイドで学べます）。

このURLを使って、お気に入りのテーマを友達と自由に共有してください。個人的には、@wesbosのCobalt2テーマの大ファンです。https://vscode.dev/theme/wesbos.theme-cobalt2をチェックしてみてください。注意：theme URLは、完全に宣言型（コードなし）のテーマでのみ機能します。

ご覧のとおり、vscode.devのURLは、私たちが新しく軽量な体験を提供するための強力な方法です。別の例として、Live Shareのゲストセッションもhttps://vscode.dev/liveshareというURLを通じてブラウザーで利用可能になります。sessionIdが拡張機能に渡され、シームレスな参加体験を実現します。

vscode.devのURLがもたらす可能性は無限であり、今後数ヶ月のうちに皆さんと共有したいアイデアがたくさんあります。

次に向かう先は？

VS Codeをブラウザーに提供することは、この製品の当初のビジョンの実現です。それはまた、全く新しいビジョンの始まりでもあります。ブラウザーとインターネット接続さえあれば誰でも利用できる一時的なエディターは、私たちが真にどこからでも何でも編集できる未来の基盤となります。

今後の展開にご期待ください… 😉

ハッピーコーディング、

Chris

追伸：見逃した方のために、私たちのVS Code for the Webのライブストリームを視聴できます。