vscode.dev(!)

2021年10月20日 Chris Dias, @chrisdias

2019年に.devトップレベルドメインが開放されたとき、私たちはvscode.devを取得し、すぐにそれを「pahked it（駐車した）」のです。私たちのウェブサイトcode.visualstudio.comを指すように設定しました（ボストン地域出身の方であれば、「pahked it」と言うでしょう）。.devドメインを購入する多くの人々と同じように、私たちはそれを何に使うか全く見当がつきませんでした。そして、それが10年以上かけて遂行してきたミッションの実現となるとは、全く予想していませんでした。

VS Codeをブラウザへ

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

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

vscode.devが利用可能になったことで、私たちはついに、ブラウザで完全にサーバーレスで実行できる開発ツールを構築するという当初のビジョンを実現し始めます。詳細な歴史については、Erich GammaのVS Code Dayの講演 「VS Code Overnight Success…10 Years in the Making（VS Code、一夜にして成功…10年の道のり）」 をご覧ください。

さて、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で開発します。ファイルをアップロード/ダウンロードしたり（Filesアプリを使用してクラウドに保存することも可能）、組み込みのGitHub Repositories拡張機能を使用してリモートリポジトリを開いたりできます。

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

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

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

もう少しニュアンスが異なるのは、コード編集、ナビゲーション、およびブラウジングのエクスペリエンスです。デスクトップでは、これらは通常、ファイルシステム、ランタイム、およびコンピューティング環境を期待する言語サービスとコンパイラーによって強化されています。ブラウザでは、これらのエクスペリエンスは、ソースコードのトークン化と構文のカラーライズ、補完、および多くのシングルファイル操作を提供する、（ファイルシステムなし、ランタイムなし）ブラウザ内で完全に実行される言語サービスによって強化されています。

その結果、ブラウザでは、エクスペリエンスは一般的に次のカテゴリに分類されます。

良い点: ほとんどのプログラミング言語で、vscode.devはコード構文のカラーライズ、テキストベースの補完、および括弧ペアのカラーライズを提供します。Tree-sitter構文ツリーを使用することで、C/C++、C#、Java、PHP、Rust、Goなどの人気のある言語に対して、追加のエクスペリエンス（アウトライン/シンボルへ移動やシンボル検索など）を提供できます。

より良い点: TypeScript、JavaScript、およびPythonのエクスペリエンスはすべて、ブラウザでネイティブに実行される言語サービスによって強化されています。これらのプログラミング言語を使用すると、「良い点」のエクスペリエンスに加えて、リッチなシングルファイル補完、セマンティックハイライト、構文エラーなどが得られます。

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

拡張機能

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

Node.jsコードを実行し、OS固有のモジュールを使用するか、ローカル実行可能ファイルをシェルで実行する拡張機能は、検索結果に表示されますが、利用不可として明確にマークされています。

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

注意: 拡張機能の作成者で、ブラウザで拡張機能を利用できるようにしたい場合は（私たちはそう願っています！）、Web Extensions作成ガイドをご覧ください。

たとえば、Luna Paint - Image Editor拡張機能を使用すると、VS Codeでラスター画像を直接編集できます。この拡張機能は、リッチなデザインツール（たとえば、レイヤーおよびブレンドツール）をVS Codeにもたらし、もちろん、画像をローカルディスクに保存できます。

GitHub Issue Notebooks拡張機能は、NotebookエクスペリエンスをGitHub Issuesにもたらします。それにより、クエリ、結果、さらにはクエリの目的を説明するMarkdownを、単一のエディターにまとめて記述できます。

GitHub

VS Codeの多くの拡張機能は、GitHubに保存されているソースコードで動作します。たとえば、CodeTour拡張機能を使用すると、コードベースのガイド付きウォークスルーを作成でき、WikiLens拡張機能は、VS Codeとリポジトリを強力なメモ取りツール（双方向リンク付き）に変えます。GitHubでコードに簡単にアクセスできるように、VS Code for the Webには、GitHub Repositories、Codespaces、およびPull Request拡張機能が組み込まれています。コミットをマージする前に、簡単な編集、PRのレビュー、「続行」してローカルクローンに移動したり、さらに優れた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 を参照してみてください。

ここでは、人気のNight Owlカラーテーマを、@sarah_edoが「ライブ」で体験できます。ダウンロードとインストールプロセスを経る必要はなく、気に入るかどうかを確認するためだけです。インストールは不要です！テーマ作成者の場合は、マーケットプレイスから直接テーマを試用できるように、README.mdにバッジを作成することもできます（詳細については、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のライブストリームをご覧いただけます。