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 に移行するか、Remote - Tunnels を使用して VS Code の全機能を利用することをお勧めします。さらに、デスクトップ版 VS Code では、ブラウザーに制限されない完全なキーボード ショートカットのセットを使用できます。
切り替える準備ができたら、数クリックで完全な VS Code 体験に「アップグレード」できます。
歯車アイコンを選択し、[Switch to Insiders Version...] (Insiders 版に切り替える...) を選択するか、直接 https://insiders.vscode.dev にアクセスすることで、Web 版 VS Code の Stable 版と Insiders 版を切り替えることもできます。
プロジェクトを開く
https://vscode.dev にアクセスすることで、新しいローカル ファイルやプロジェクトを作成したり、既存のローカル プロジェクトで作業したり、GitHub や Azure Repos (Azure DevOps の一部) など、他の場所でホストされているソース コード リポジトリにアクセスしたりできます。
デスクトップ版 VS Code 環境と同じように、コマンド パレット (F1) から [File] (ファイル) > [New File] (新規ファイル) を使用して、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...] (GitHub リポジトリ: リポジトリを開く...) コマンドでリポジトリを開くことができます。
また、Chrome や Edge 用の vscode.dev 拡張機能をインストールすることで、ブラウザーの検索バー (オムニボックスとも呼ばれます) から vscode.dev で GitHub リポジトリを開くこともできます。code と入力してオムニボックスを有効にし、続けてリポジトリ名を入力します。候補はブラウザーの検索履歴によって表示されるため、目的のリポジトリが表示されない場合は、<owner>/<repo> の完全修飾名 (例: microsoft/vscode) を入力して開くこともできます。
すでに 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 構造 | ドキュメント |
|---|---|---|
| GitHub | /github/<org>/<repo> |
詳細は上記を参照 |
| Azure Repos | /azurerepos/<org>/<project>/<repo> |
詳細は上記を参照 |
| Visual Studio Live Share | /editor/liveshare/<sessionId> |
詳細は下記を参照 |
| Visual Studio Marketplace | /editor/marketplace/<marketplacePublisher>/<extensionId>/<extensionVersion> |
この拡張機能を編集するためのルートの例 |
| Power Pages | /power/pages |
Power Pages のドキュメント |
| プロファイル | /editor/profile/github/<GUID> |
プロファイルのドキュメント |
| テーマ | /editor/theme/<extensionId> |
詳細は下記を参照 |
| MakeCode | /edu/makecode |
MakeCode のドキュメント |
| 教育向け VS Code | /edu |
教育向け VS Code のランディング ページ |
| Azure Machine Learning (AML) | /+ms-toolsai.vscode-ai-remote-web |
AML のドキュメント |
一部の URL は特定の形式で入力する必要があります (たとえば、vscode.dev/editor/liveshare はアクティブな Live Share セッションが必要です)。特定のアクセス方法と使用情報については、各サービスのドキュメントを確認してください。
これらの URL の一部については、以下でさらに詳しく説明します。
テーマ
https://vscode.dev/editor/theme/<extensionId> という URL スキーマを通じて、Web 版 VS Code でカラー テーマを共有し、体験できます。
たとえば、https://vscode.dev/editor/theme/sdras.night-owl にアクセスすると、ダウンロードとインストールのプロセスを経ずに Night Owl テーマを体験できます。
注: カラー テーマの URL スキーマは、完全に宣言的 (コードなし) なテーマで機能します。
拡張機能は複数のテーマを定義できます。/editor/theme/<extensionId>/<themeName> というスキーマを使用できます。themeName が指定されていない場合、Web 版 VS Code は最初のテーマを使用します。
テーマの作成者は、以下のバッジを拡張機能の readme に追加することで、ユーザーが Web 版 VS Code でテーマを簡単に試せるようにできます (<extensionId> をテーマ拡張機能の一意の識別子に置き換えてください)。
[](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 Codespace を作成する権限が必要です)。これを行うには、コマンド パレット (F1) から利用できる [Continue Working On...] (作業を続ける...) コマンドを使用するか、ステータス バーのリモート インジケーターをクリックします。
作業の保存と共有
Web でローカル ファイルを操作している場合、自動保存が有効になっていれば、作業は自動的に保存されます。デスクトップ版 VS Code で作業する場合と同様に、手動で保存することもできます (例: [File] (ファイル) > [Save] (保存))。
リモート リポジトリで作業している場合、作業はコミットするまでブラウザーのローカル ストレージに保存されます。GitHub Repositories を使用してリポジトリやプルリクエストを開いた場合は、ソース管理ビューで変更をプッシュして、新しい作業を永続化できます。
また、[Continue Working On] (作業を続ける) を介して、他の環境で作業を続けることもできます。
コミットされていない変更がある状態で初めて [Continue Working On] (作業を続ける) を使用すると、[Cloud Changes] (クラウド変更) を使用して、選択した開発環境に編集内容を取り込むオプションが表示されます。これは VS Code サービスを使用して保留中の変更を保存します。これについては、GitHub Repositories のドキュメントでさらに詳しく説明されています。
Remote Tunnels を使用して独自のコンピュート インスタンスを利用する
Remote - Tunnels 拡張機能を使用して、Web 版 VS Code で別のマシンに対して開発を行うことができます。
Remote - Tunnels 拡張機能を使用すると、デスクトップ PC や仮想マシン (VM) などのリモート マシンに、安全なトンネルを介して接続できます。その後、SSH を必要とせずに、どこからでもそのマシンに安全に接続できます。これにより、vscode.dev に「独自のコンピュートを持ち込む」ことができ、ブラウザーでコードを実行するなどの追加のシナリオが可能になります。
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 などの一般的な言語に対して、アウトライン/シンボルへ移動やシンボル検索などの追加の体験を提供できます。
- Better: TypeScript、JavaScript、Python の体験は、すべてブラウザーでネイティブに実行される言語サービスによって提供されます。これらのプログラミング言語では、「Good」の体験に加えて、豊富な単一ファイルの補完、セマンティック ハイライト、構文エラーなどが得られます。
- Best: JSON、HTML、CSS、LESS などの多くの「Web」関連言語では、vscode.dev でのコーディング体験はデスクトップとほぼ同じです (Markdown プレビューを含む！)。
現在のファイルの言語サポートのレベルは、ステータス バーの言語ステータス インジケーターで確認できます。
制限
Web 版 VS Code は完全にブラウザー内で実行されるため、デスクトップ アプリでできることと比較すると、一部の体験は当然ながら制約されます。たとえば、ターミナルとデバッガーは利用できません。これは、ブラウザーのサンドボックス内で Rust や Go のアプリケーションをコンパイル、実行、デバッグできないことを考えると理にかなっています。
拡張機能
ブラウザーで実行できるのは、拡張機能のサブセットのみです。拡張機能ビューを使用して Web に拡張機能をインストールでき、インストールできない拡張機能には警告アイコンと [Learn Why] (理由を見る) リンクが表示されます。今後、より多くの拡張機能が有効になることが期待されます。
拡張機能をインストールすると、それはブラウザーのローカル ストレージに保存されます。設定の同期を有効にすることで、異なるブラウザーやデスクトップを含む VS Code インスタンス間で拡張機能が同期されるようにすることができます。
拡張機能パックにブラウザーのサンドボックスで実行されない拡張機能が含まれている場合、パックに含まれる拡張機能を確認するオプション付きの情報メッセージが表示されます。
拡張機能がブラウザーのサンドボックスで実行される場合、それらはより制限されます。ほとんどのテーマ、スニペット、または文法など、純粋に宣言的な拡張機能は、変更なしで実行でき、拡張機能の作成者による変更なしで Web 版 VS Code で利用できます。コードを実行する拡張機能は、ブラウザーのサンドボックスでの実行をサポートするように更新する必要があります。ブラウザーで拡張機能をサポートするために必要なことについては、Web 拡張機能作成者向けガイドで詳しく読むことができます。
また、一部のサポートのみでブラウザーで実行される拡張機能もあります。良い例は、単一ファイルまたは現在開いているファイルにサポートを制限する言語拡張機能です。
File System API
現在の Edge と Chrome は、Web ページがローカル ファイル システムにアクセスできるようにする File System API をサポートしています。お使いのブラウザーが 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) がわかったら、彼らのリリースノートのブラウザーのバージョンセクションを確認できます。
Firefox と Safari では、Web ビューの表示が異なったり、予期しない動作をすることがあります。VS Code の GitHub リポジトリで、Safari ラベルや Firefox ラベルなどの特定のブラウザーに関連する問題を追跡するために、issue クエリを表示できます。
Web 版 VS Code を使用するブラウザー体験を向上させるために、追加の手順を踏むことができます。詳細については、追加のブラウザー設定セクションを確認してください。
モバイル サポート
モバイル デバイスで Web 版 VS Code を使用できますが、画面が小さい場合は特定の制限がある場合があります。
キーボードショートカット
特定のキーボード ショートカットは、Web では動作が異なる場合があります。
| 問題 | 理由 |
|---|---|
| Firefox では、⇧⌘P (Windows, Linux Ctrl+Shift+P) でコマンド パレットは起動しません。 | ⇧⌘P (Windows, Linux Ctrl+Shift+P) は Firefox で予約されています。 回避策として、F1 を使用してコマンド パレットを起動してください。 |
| Web では、新規ファイルを作成するための ⌘N (Windows, Linux Ctrl+N) は機能しません。 | ⌘N (Windows, Linux Ctrl+N) は代わりに新しいウィンドウを開きます。 回避策として、Ctrl+Alt+N (Cmd+Alt+N on macOS) を使用できます。 |
| Web では、エディターを閉じるための ⌘W (Windows Ctrl+F4, Linux Ctrl+W) は機能しません。 | ⌘W (Windows Ctrl+F4, Linux Ctrl+W) はブラウザーで現在のタブを閉じます。 回避策として、Ctrl+Shift+Alt+N (Cmd+Shift+Alt+N on macOS) を使用できます。 |
| ⇧⌘B (Windows, Linux Ctrl+Shift+B) は、ブラウザーのお気に入りバーを切り替えません。 | Web 版 VS Code はこれを上書きし、コマンド パレットの「ビルド」メニューにリダイレクトします。 |
| Alt+Left と Alt+Right はエディター内を移動するはずですが、誤ってタブ履歴のナビゲーションをトリガーする可能性があります。 | フォーカスがエディターの外にある場合、これらのショートカットは代わりにタブ履歴のナビゲーションをトリガーします。 |
追加のブラウザー設定
ブラウザーで VS Code を使用する際に、追加のブラウザー設定手順があります。
新しいタブとウィンドウを開く
Web 版 VS Code で作業中に新しいタブやウィンドウを開く必要がある場合があります。VS Code はクリップボードから読み取る際に、クリップボードへのアクセス許可を求めることがあります。お使いのブラウザーに応じて、クリップボードへのアクセスを許可したり、ポップアップ ウィンドウを許可したりする方法が異なります。
- Chrome, Edge, Firefox: ブラウザーの設定で「サイトの権限」を検索するか、アドレス バーの右側にある次のオプションを探してください。
- Safari: Safari ブラウザーで、[環境設定...] > [Web サイト] > [ポップアップウインドウ] に移動し、アクセスしているドメイン (例:
vscode.dev) を選択して、ドロップダウンから [許可] を選択します。