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 エクスペリエンスに「アップグレード」することができます。
また、歯車アイコンを選択してSwitch to Insiders Version...をクリックするか、https://insiders.vscode.devに直接移動することで、Web 版 VS Code の Stable 版と Insiders 版を切り替えることができます。
プロジェクトを開く
https://vscode.devにアクセスすると、新しいローカルファイルまたはプロジェクトを作成したり、既存のローカルプロジェクトで作業したり、GitHub や Azure Repos (Azure DevOps の一部) など、他の場所にホストされているソースコードリポジトリにアクセスしたりできます。
VS Code デスクトップ環境と同じように、コマンドパレット (F1) からファイル > 新しいファイルを使用して、Web で新しいローカルファイルを作成できます。
GitHub リポジトリ
以下のスキーマに従って、URL から直接 Web 版 VS Code で GitHub リポジトリを開くことができます: https://vscode.dev/github/<organization>/<repo>。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 と入力してオムニボックスをアクティブにし、その後にリポジトリ名を入力します。サジェストはブラウザーの検索履歴によって入力されるため、目的のリポジトリが表示されない場合は、完全修飾された <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 を付加することで、Web 版 VS Code で Azure Repos の任意のリポジトリ、ブランチ、またはタグを開くことができます。
または、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 for Education | /edu |
VS Code for Education のランディングページ |
| Azure Machine Learning (AML) | /+ms-toolsai.vscode-ai-remote-web |
AML のドキュメント |
一部の URL は特定の形式で入力する必要があることに注意してください（たとえば、vscode.dev/editor/liveshare はアクティブな Live Share セッションを必要とします）。特定のアクセスと使用情報については、各サービスのドキュメントを参照してください。
これらの URL の一部については、以下に詳細情報があります。
テーマ
URL スキーマ https://vscode.dev/editor/theme/<extensionId> を介して、Web 版 VS Code でカラーテーマを共有し、体験できます。
たとえば、https://vscode.dev/editor/theme/sdras.night-owl にアクセスすると、ダウンロードとインストールプロセスを経ずにNight Owl テーマを体験できます。
注: カラーテーマ URL スキーマは、完全に宣言的なテーマ (コードなし) で機能します。
拡張機能は複数のテーマを定義できます。スキーマ /editor/theme/<extensionId>/<themeName> を使用できます。themeName が指定されていない場合、Web 版 VS Code は最初のテーマを使用します。
テーマの作者は、ユーザーが Web 版 VS Code でテーマを簡単に試せるように、以下のバッジを拡張機能の README に追加できます（<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 で作業するのと同様に、手動で保存することもできます (例: ファイル > 保存)。
リモートリポジトリで作業している場合、作業はコミットするまでブラウザーのローカルストレージに保存されます。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 に独自のコンピューティングをもたらし、ブラウザーでコードを実行するなどの追加シナリオを有効にできます。
Remote - Tunnels については、そのドキュメントで詳しく学ぶことができます。
安全な探索
Web 版 VS Code は、Web ブラウザーのサンドボックス内で完全に動作し、非常に制限された実行環境を提供します。
リモートリポジトリからコードにアクセスする場合、Web エディターはリポジトリを「クローン」するのではなく、ブラウザーからサービスの API を直接呼び出すことでコードをロードします。これにより、信頼できないリポジトリをクローンする際の攻撃対象領域がさらに縮小されます。
ローカルファイルで作業する場合、Web 版 VS Code はブラウザーのファイルシステムアクセス API を介してそれらをロードし、ブラウザーがアクセスできる範囲を制限します。
どこでも実行
GitHub Codespaces と同様に、Web 版 VS Code は iPad のようなタブレットで実行できます。
言語サポート
Web での言語サポートは、コード編集、ナビゲーション、閲覧を含め、もう少しニュアンスがあります。デスクトップ版のエクスペリエンスは通常、ファイルシステム、ランタイム、コンピューティング環境を必要とする言語サービスとコンパイラーによって提供されます。ブラウザーでは、これらのエクスペリエンスは、ソースコードのトークン化、構文のカラー化、補完、および多くの単一ファイル操作を提供するブラウザーで動作する言語サービスによって提供されます。
一般に、エクスペリエンスは以下のカテゴリに分類されます。
- 良好: ほとんどのプログラミング言語では、Web 版 VS Code はコード構文のカラー化、テキストベースの補完、括弧ペアのカラー化を提供します。Tree-sitter 構文ツリーをanycode 拡張機能を通じて使用することで、C/C++、C#、Java、PHP、Rust、Go などの人気のある言語向けに、アウトライン/シンボルへ移動やシンボル検索のような追加のエクスペリエンスを提供できます。
- より良好: TypeScript、JavaScript、Python のエクスペリエンスはすべて、ブラウザーでネイティブに実行される言語サービスによって提供されます。これらのプログラミング言語では、「良好」なエクスペリエンスに加えて、豊富な単一ファイル補完、セマンティックハイライト、構文エラーなどが得られます。
- 最も良好: JSON、HTML、CSS、LESS などの多くの「Web 系」言語では、vscode.dev でのコーディングエクスペリエンスはデスクトップ版とほぼ同じです (Markdown プレビューを含む！)。
現在のファイルの言語サポートレベルは、ステータスバーの言語ステータスインジケーターで確認できます。
制限
Web 版 VS Code は完全にブラウザー内で動作するため、デスクトップアプリでできることと比較すると、いくつかのエクスペリエンスは必然的に制限されます。たとえば、ターミナルやデバッガーは利用できません。これは、ブラウザーサンドボックス内で Rust や Go アプリケーションをコンパイル、実行、デバッグできないことを考えると理にかなっています。
拡張機能
ブラウザーで実行できる拡張機能は一部のみです。Web では拡張機能ビューを使用して拡張機能をインストールでき、インストールできない拡張機能には警告アイコンと理由を学ぶリンクが表示されます。今後、より多くの拡張機能が有効になると予想されます。
拡張機能をインストールすると、ブラウザーのローカルストレージに保存されます。設定同期を有効にすることで、異なるブラウザーやデスクトップを含む VS Code インスタンス間で拡張機能が同期されていることを確認できます。
拡張機能パックにブラウザーサンドボックスで実行できない拡張機能が含まれている場合、パックに含まれる拡張機能を表示するオプション付きの情報メッセージが表示されます。
拡張機能がブラウザーのサンドボックスで実行される場合、より制限されます。ほとんどのテーマ、スニペット、文法など、純粋に宣言的な拡張機能は、拡張機能の作者による変更なしに、Web 版 VS Code で変更せずに実行できます。コードを実行する拡張機能は、ブラウザーサンドボックスでの実行をサポートするために更新する必要があります。ブラウザーでの拡張機能のサポートに関わることについては、Web 拡張機能作成者ガイドで詳しく読むことができます。
部分的なサポートのみでブラウザーで実行される拡張機能もあります。良い例は、サポートを単一のファイルまたは現在開いているファイルに制限する言語拡張機能です。
ファイルシステム API
Edge と Chrome は現在、File System API をサポートしており、Web ページがローカルファイルシステムにアクセスすることを可能にしています。お使いのブラウザーが File System API をサポートしていない場合、ローカルでフォルダーを開くことはできませんが、代わりにファイルを開くことはできます。
ブラウザーのサポート
Web 版 VS Code は、Chrome、Edge、Firefox、Safari の最新バージョンで使用できます。各ブラウザーの古いバージョンは動作しない可能性があります。最新バージョンのみサポートを保証します。
ヒント: 互換性のあるブラウザーバージョンを確認する一つの方法は、VS Code のテストに現在使用されているPlaywrightのバージョンを確認し、そのサポートされているブラウザーバージョンを確認することです。現在使用されている Playwright のバージョンは、VS Code リポジトリのpackage.jsonファイルの
devDependencies/@playwright/testで見つけることができます。Playwright のバージョンがわかったら、たとえば1.37の場合、彼らのリリースノートのBrowser Versionsセクションを確認できます。
Webview は Firefox や Safari で異なる表示になったり、予期しない動作をしたりする場合があります。特定のブラウザーに関連する問題を追跡するには、VS Code GitHub リポジトリでSafari ラベルやFirefox ラベルなどの issue クエリを表示できます。
ブラウザーで VS Code を使用する際に、ブラウザーの動作を改善するための追加の設定手順があります。追加のブラウザー設定セクションを参照して、詳細を確認してください。
モバイルサポート
モバイルデバイスで Web 版 VS Code を使用できますが、画面が小さい場合は特定の制限がある場合があります。
キーボードショートカット
特定のキーボードショートカットも、Web で動作が異なる場合があります。
| 問題 | 理由 |
|---|---|
| ⇧⌘P (Windows, Linux Ctrl+Shift+P) が Firefox でコマンドパレットを起動しません。 | ⇧⌘P (Windows, Linux Ctrl+Shift+P) は Firefox で予約されています。 回避策として、F1 を使用してコマンドパレットを起動してください。 |
| 新しいファイル用の⌘N (Windows, Linux Ctrl+N) が Web で動作しません。 | ⌘N (Windows, Linux Ctrl+N) は代わりに新しいウィンドウを開きます。 回避策として、Ctrl+Alt+N (macOS では Cmd+Alt+N) を使用できます。 |
| エディターを閉じるための⌘W (Windows Ctrl+F4, Linux Ctrl+W) が Web で動作しません。 | ⌘W (Windows Ctrl+F4, Linux Ctrl+W) はブラウザーで現在のタブを閉じます。 回避策として、Ctrl+Shift+Alt+N (macOS では Cmd+Shift+Alt+N) を使用できます。 |
| ⇧⌘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）に移動し、ドロップダウンから許可を選択します。