Web 版 Visual Studio Code

Web 版 Visual Studio Code は、ブラウザー内で完全に動作する、インストール不要の無料の Microsoft Visual Studio Code エクスペリエンスを提供します。これにより、ソースコード リポジトリを迅速かつ安全に閲覧し、軽量なコード変更を行うことができます。開始するには、ブラウザーで https://vscode.dev にアクセスしてください。

Web 版 VS Code には、閲覧や編集時の検索や構文ハイライト、コードベースでの作業や簡単な編集を行うための拡張機能のサポートなど、おなじみの VS Code デスクトップ版の機能が数多く含まれています。GitHub や Azure Repos などのソース管理プロバイダーからリポジトリ、フォーク、プルリクエストを開くことに加えて、ローカル マシンに保存されているコードを操作することもできます。

Web 版 VS Code は完全に Web ブラウザー内で実行されるため、デスクトップ版と比較していくつかの制限事項があります。詳細については、以下を参照してください。

以下のビデオでは、Web 版 Visual Studio Code の概要を簡単に説明しています。

VS Code デスクトップ版との関係

Web 版 VS Code は、ファイルやリポジトリのナビゲーション、および軽量なコード変更のコミットを行うためのブラウザーベースのエクスペリエンスを提供します。ただし、コードの実行、ビルド、デバッグを行うためにランタイムへのアクセスが必要な場合、ターミナルなどのプラットフォーム機能を使用したい場合、または Web でサポートされていない拡張機能を実行したい場合は、作業をデスクトップ アプリケーションや GitHub Codespaces に移行するか、VS Code の全機能を利用できる Remote - Tunnels を使用することをお勧めします。また、VS Code デスクトップ版では、ブラウザーによって制限されない、完全なキーボード ショートカットのセットを使用できます。

切り替える準備ができたら、数クリックで完全な VS Code エクスペリエンスへ「アップグレード」することができます。

Web 版 VS Code の Stable（安定）版と Insiders 版を切り替えるには、歯車アイコンを選択して Switch to Insiders Version...（Insiders バージョンに切り替える...） を選択するか、直接 https://insiders.vscode.dev にアクセスします。

プロジェクトを開く

https://vscode.dev にアクセスすることで、新しいローカル ファイルやプロジェクトを作成したり、既存のローカル プロジェクトで作業したり、GitHub や Azure Repos（Azure DevOps の一部）など、他の場所にホストされているソースコード リポジトリにアクセスしたりできます。

VS Code デスクトップ環境と同じように、コマンド パレット（F1）から ファイル > 新規ファイル を使用して、Web 上で新しいローカル ファイルを作成できます。

GitHub リポジトリ

https://vscode.dev/github/<organization>/<repo> というスキーマに従って、URL から直接 Web 版 VS Code で GitHub リポジトリを開くことができます。たとえば、VS Code リポジトリの場合、https://vscode.dev/github/microsoft/vscode のようになります。

このエクスペリエンスは、カスタムの vscode.dev/github URL で提供され、GitHub Repositories 拡張機能（より広範な Remote Repositories 拡張機能の一部）によって動作します。

GitHub Repositories を使用すると、コードをローカル マシンにプルすることなく、エディター内からリモートでリポジトリを閲覧および編集できます。拡張機能の詳細と動作については、GitHub Repositories ガイドを参照してください。

注意: GitHub Repositories 拡張機能は、VS Code デスクトップ版でも動作し、高速なリポジトリの閲覧と編集を可能にします。拡張機能がインストールされたら、GitHub Repositories: Open Repository... コマンドを使用してリポジトリを開くことができます。

Chrome および Edge 用の vscode.dev 拡張機能をインストールすることで、ブラウザーの検索バー（別名オムニボックス）から vscode.dev で GitHub リポジトリを開くこともできます。インストール後、code と入力してオムニボックスを有効にし、その後にリポジトリ名を入力します。候補はブラウザーの閲覧履歴から自動入力されるため、目的のリポジトリが表示されない場合は、microsoft/vscode のように完全修飾の <owner>/<repo> 名を入力して開くこともできます。

すでに https://vscode.dev で Web 版 VS Code を開いている場合は、代わりに Remote Repositories 拡張機能のコマンドを使用して別のリポジトリに移動できます。ステータス バーの左下にあるリモート インジケーターを選択すると、Open Remote Repository...（リモート リポジトリを開く...） コマンドが表示されます。

Azure Repos

Web 版 VS Code では、GitHub リポジトリと同様に Azure Repos を開くことができます。

https://vscode.dev/azurerepos/<organization>/<project>/<repo> というスキーマの URL にアクセスすると、リポジトリ内のファイルの読み取り、検索、および Azure Repos への変更のコミットを行うことができます。変更のフェッチ、プル、同期、およびブランチの表示も可能です。

Azure Repos の URL の先頭に vscode.dev を追加することで、Azure Repos の任意のリポジトリ、ブランチ、またはタグを Web 版 VS Code で開くことができます。

あるいは、Azure DevOps のリポジトリまたはプルリクエストの画面でピリオド（.）キーを押すことで、Web 版 VS Code で開くことができます。

その他のカスタム URL

デスクトップ版と同様に、ほぼすべてのバックエンド、言語、サービスをサポートする豊富な拡張機能のエコシステムを通じて、Web 版 VS Code をカスタマイズできます。vscode.dev には、一般的なエクスペリエンスへのショートカットを提供する URL が含まれています。

すでにいくつかの URL（vscode.dev/github および vscode.dev/azurerepos）を紹介しました。以下は、より詳細な一覧です。

一部の URL は特定の入力方法が必要であることに注意してください（たとえば、vscode.dev/editor/liveshare にはアクティブな Live Share セッションが必要です）。特定のアクセス情報や使用方法については、各サービスのドキュメントを確認してください。

これらのいくつかの URL の詳細については、以下を参照してください。

テーマ

次の URL スキーマを使用して、Web 版 VS Code で配色テーマを共有し、体験することができます: https://vscode.dev/editor/theme/<extensionId>

たとえば、https://vscode.dev/editor/theme/sdras.night-owl にアクセスすると、ダウンロードやインストールのプロセスを経ることなく、Night Owl テーマを体験できます。

注意: 配色テーマの URL スキーマは、完全に宣言的な（コードを含まない）テーマに対してのみ機能します。

拡張機能は複数のテーマを定義できます。その場合は /editor/theme/<extensionId>/<themeName> というスキーマを使用できます。themeName が指定されていない場合、Web 版 VS Code は最初のテーマを適用します。

テーマの作成者は、拡張機能の README に以下のバッジを追加することで、ユーザーが Web 版 VS Code でテーマを簡単に試せるようにすることができます（<extensionId> は、お使いのテーマ拡張機能の固有の識別子に置き換えてください）。

[![Preview in vscode.dev](https://img.shields.io/badge/preview%20in-vscode.dev-blue)](https://vscode.dev/editor/theme/<extensionId>)

Visual Studio Live Share

Live Share のゲスト セッションは、https://vscode.dev/editor/liveshare URL を使用してブラウザーから利用できます。sessionId が拡張機能に渡されるため、シームレスに参加することができます。

別の環境で作業を続行する

場合によっては、コードを実行できる別の環境にアクセスしたいこともあるでしょう。ローカル ファイル システムと、完全な言語・開発ツールをサポートする開発環境でのリポジトリ作業に切り替えることができます。

GitHub Repositories 拡張機能を使用すると、リポジトリをローカルに複製したり、デスクトップで再度開いたり、現在のリポジトリの GitHub Codespace を作成したりすることが簡単にできます（GitHub Codespaces 拡張機能がインストールされており、GitHub Codespaces を作成する権限がある場合）。これを行うには、コマンド パレット（F1）から Continue Working On...（作業の続行...） コマンドを使用するか、ステータス バーのリモート インジケーターをクリックします。

作業の保存と共有

Web 上でローカル ファイルを操作している場合、自動保存（Auto Save）が有効になっていれば作業は自動的に保存されます。デスクトップ版の VS Code で作業する場合と同様に、手動で保存することもできます（例: ファイル > 保存）。

リモート リポジトリで作業している場合、変更をコミットするまで、作業内容はブラウザーのローカル ストレージに保存されます。GitHub Repositories を使用してリポジトリまたはプルリクエストを開いている場合は、「ソース管理」ビューで変更をプッシュして、新しい作業内容を永続化できます。

また、作業の続行（Continue Working On）を介して、他の環境で作業を続けることもできます。

未コミットの変更がある状態で初めて 作業の続行（Continue Working On） を使用する場合、VS Code のサービスを利用して保留中の変更を保存する Cloud Changes（クラウドの変更） を使用して、選択した開発環境に編集内容を持ち込むオプションが表示されます。詳細については、GitHub Repositories のドキュメントに記載されています。

Remote Tunnels を使用して独自のコンピューティング インスタンスを使用する

Remote - Tunnels 拡張機能を使用して、Web 版 VS Code で別のマシンを対象に開発を行うことができます。

Remote - Tunnels 拡張機能を使用すると、セキュアなトンネルを介して、デスクトップ PC や仮想マシン（VM）などのリモート マシンに接続できます。これにより、SSH を必要とせずに、どこからでもそのマシンに安全に接続できます。これにより、独自のコンピューティング環境を vscode.dev に持ち込み（「bring your own compute」）、ブラウザー内でコードを実行するなどの追加のシナリオが可能になります。

Remote - Tunnels の詳細については、そのドキュメントを参照してください。

安全な探索

Web 版 VS Code は完全に Web ブラウザーのサンドボックス内で実行されるため、非常に制限された実行環境になります。

リモート リポジトリからコードにアクセスする場合、Web エディターはリポジトリを「クローン」するのではなく、ブラウザーから直接サービスの API を呼び出してコードを読み込みます。これにより、信頼できないリポジトリをクローンする際の攻撃対象領域がさらに減少します。

ローカル ファイルを操作する場合、Web 版 VS Code はブラウザーのファイル システム アクセス API を介してファイルを読み込みます。これにより、ブラウザーがアクセスできる範囲が制限されます。

どこでも実行

GitHub Codespaces と同様に、Web 版 VS Code は iPad などのタブレット上でも動作します。

言語サポート

Web 上での言語サポート（コードの編集、ナビゲーション、閲覧など）は、やや複雑です。デスクトップ版のエクスペリエンスは、通常、ファイル システム、ランタイム、およびコンピューティング環境を必要とする言語サービスやコンパイラーによって強化されています。ブラウザーでは、これらのエクスペエンスはブラウザー内で実行される言語サービスによって提供され、ソースコードのトークン化、構文の配色、補完、および多くの単一ファイル操作を提供します。

一般的に、エクスペリエンスは以下のカテゴリに分類されます。

• Good（良好）: ほとんどのプログラミング言語において、Web 版 VS Code はコードの構文配色、テキストベースの補完、ブラケット ペアの配色を提供します。anycode 拡張機能を介して Tree-sitter 構文ツリーを使用することで、C/C++、C#, Java、PHP、Rust、Go などの一般的な言語に対して、アウトライン/シンボルへの移動（Outline/Go to Symbol）やシンボル検索（Symbol Search）などの追加のエクスペリエンスを提供できます。
• Better（より良好）: TypeScript、JavaScript、Python のエクスペリエンスは、すべてブラウザーでネイティブに動作する言語サービスによって提供されています。これらのプログラミング言語では、「Good」のエクスペリエンスに加えて、豊富な単一ファイル補完、セマンティック ハイライト、構文エラーの表示などを利用できます。
• Best（最適）: JSON、HTML、CSS、LESS などの多くの「Web 向け」言語については、vscode.dev でのコーディング エクスペリエンスはデスクトップ版とほぼ同じです（Markdown のプレビューも含まれます！）。

ステータス バーにある「言語ステータス インジケーター」を通じて、現在のファイルの言語サポートのレベルを確認できます。

制限事項

Web 版 VS Code は完全にブラウザー内で実行されるため、デスクトップ アプリで実行できることと比較して、いくつかのエクスペリエンスは必然的に制限されます。たとえば、ブラウザーのサンドボックス内では Rust や Go のアプリケーションをコンパイル、実行、デバッグすることはできないため、ターミナルやデバッガーは利用できません。

拡張機能

一部の拡張機能のみがブラウザーで動作します。「拡張機能」ビューを使用して Web 上で拡張機能をインストールできますが、インストールできない拡張機能には警告アイコンと Learn Why（理由を調べる） リンクが表示されます。今後、より多くの拡張機能が利用可能になる予定です。

拡張機能をインストールすると、ブラウザーのローカル ストレージに保存されます。設定の同期（Settings Sync）を有効にすることで、異なるブラウザーやデスクトップ版を含む、複数の VS Code インスタンス間で拡張機能が確実に同期されるようにすることができます。

拡張機能パック（Extension Pack）にブラウザーのサンドボックスで動作しない拡張機能が含まれている場合、情報メッセージが表示され、パックに含まれる拡張機能を確認するオプションが提供されます。

拡張機能がブラウザーのサンドボックスで実行される場合、それらはより制限されます。ほとんどのテーマ、スニペット、文法など、純粋に宣言的な拡張機能は、変更なしで実行でき、拡張機能の作成者による修正を必要とせずに Web 版 VS Code で利用できます。コードを実行する拡張機能は、ブラウザーのサンドボックスでの実行をサポートするように更新する必要があります。ブラウザーでの拡張機能のサポートに関する詳細については、Web 拡張機能作成者向けガイドを参照してください。

ブラウザーで一部のみサポートされて動作する拡張機能もあります。好例としては、サポートを単一ファイルまたは現在開いているファイルのみに制限している言語拡張機能が挙げられます。

ファイル システム API

現在、Edge と Chrome は File System API をサポートしており、Web ページからローカルのファイル システムにアクセスできます。お使いのブラウザーが File System API をサポートしていない場合、ローカルのフォルダーを開くことはできませんが、代わりにファイルを開くことができます。

ブラウザサポート

Web 版 VS Code は、Chrome、Edge、Firefox、Safari の最新バージョンで使用できます。各ブラウザーの古いバージョンでは動作しない可能性があり、最新バージョンでのサポートのみを保証します。

ヒント: 互換性のあるブラウザーのバージョンを確認する 1 つの方法は、VS Code のテストに現在使用されている Playwright のバージョンを確認し、それがサポートしているブラウザーのバージョンを確認することです。現在使用されている Playwright のバージョンは、VS Code リポジトリの package.json ファイルの devDependencies/@playwright/test で確認できます。Playwright のバージョン（例: 1.37）がわかったら、彼らのリリース ノートの Browser Versions（ブラウザーのバージョン） セクションを確認できます。

Firefox や Safari では、Webview の表示が異なったり、予期しない動作が発生したりすることがあります。VS Code の GitHub リポジトリで問題クエリを表示して、特定のブラウザーに関連する問題を追跡できます。たとえば、Safari ラベル や Firefox ラベル などがあります。

Web 版 VS Code を使用する際、ブラウザーのエクスペリエンスを向上させるために追加の手順を実行できます。詳細については、追加のブラウザー設定セクションを参照してください。

モバイル サポート

モバイル デバイスでも Web 版 VS Code を使用できますが、画面が小さいといくつかの制限が生じる場合があります。

キーボードショートカット

一部のキーボード ショートカットは、Web 上で動作が異なる場合もあります。

追加のブラウザー設定

ブラウザーで VS Code を使用して作業する場合に、実行できる追加のブラウザー設定手順があります。

新しいタブとウィンドウを開く

場合によっては、Web 版 VS Code での作業中に新しいタブやウィンドウを開く必要があることがあります。VS Code は、クリップボードからの読み取り時にアクセス許可を求める場合があります。お使いのブラウザーによって、クリップボードへのアクセスを許可したり、ポップアップ ウィンドウを許可したりする方法が異なります。

• Chrome、Edge、Firefox: ブラウザーの設定で「サイトの権限」を検索するか、アドレス バーの右側にある次のオプションを探します。

• Safari: Safari ブラウザーで、環境設定... > Webサイト > ポップアップウインドウ > アクセスしているドメイン（例: vscode.dev）に移動し、ドロップダウンから 許可 を選択します。