Visual Studio Code for the Web
Visual Studio Code for the Web は、ブラウザだけで動作する無料のインストール不要の Microsoft Visual Studio Code 環境を提供し、ソースコードリポジトリを迅速かつ安全に閲覧し、簡単なコード変更を行うことができます。開始するには、ブラウザで https://vscode.dev にアクセスしてください。
VS Code for the Web は、検索や閲覧・編集時の構文ハイライト、コードベースでの作業や簡単な編集をサポートする拡張機能など、VS Code デスクトップ版の多くの機能を備えています。GitHub や Azure Repos などのソース管理プロバイダーからのリポジトリ、フォーク、プルリクエストのオープンに加えて、ローカルマシンに保存されているコードも操作できます。
VS Code for the Web はウェブブラウザのみで動作するため、デスクトップ版と比較していくつかの制限事項があります。詳細については、以下をお読みください。
次のビデオでは、Visual Studio Code for the Web の概要を簡単に説明します。
VS Code デスクトップ版との関係
VS Code for the Web は、ファイルやリポジトリのナビゲーション、および簡単なコード変更のコミットのためのブラウザベースのエクスペリエンスを提供します。ただし、コードを実行、ビルド、またはデバッグするためのランタイムへのアクセスが必要な場合、ターミナルなどのプラットフォーム機能を使用したい場合、またはウェブでサポートされていない拡張機能を実行したい場合は、デスクトップアプリケーション、GitHub Codespaces、または VS Code のフル機能を利用できる Remote - Tunnels を使用して作業を移行することをお勧めします。さらに、VS Code デスクトップ版では、ブラウザによって制限されないフルセットのキーボードショートカットを使用できます。
切り替えの準備ができたら、数回クリックするだけでフル機能の VS Code エクスペリエンスに「アップグレード」できます。
VS Code for the Web の Stable バージョンと Insiders バージョンは、歯車アイコンを選択し、[Insiders バージョンに切り替え...] を選択するか、https://insiders.vscode.dev に直接アクセスして切り替えることもできます。
プロジェクトを開く
https://vscode.dev にアクセスすると、新しいローカルファイルまたはプロジェクトを作成したり、既存のローカルプロジェクトで作業したり、GitHub や Azure Repos (Azure DevOps の一部) など、別の場所にホストされているソースコードリポジトリにアクセスしたりできます。
ウェブで新しいローカルファイルを作成するには、VS Code デスクトップ環境と同様に、コマンドパレット (F1) から [ファイル] > [新しいファイル] を使用します。
GitHub リポジトリ
VS Code for the Web で GitHub リポジトリを URL から直接開くには、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: リポジトリを開く...] コマンドでリポジトリを開くことができます。
Chrome および Edge 用の vscode.dev 拡張機能をインストールすることで、ブラウザの検索バー (別名オムニボックス) を介して vscode.dev で GitHub リポジトリを開くこともできます。次に、code と入力してオムニボックスをアクティブにし、その後にリポジトリの名前を入力します。候補はブラウザの検索履歴によって入力されるため、目的のリポジトリが表示されない場合は、完全修飾された <owner>/<repo> 名 (例: microsoft/vscode) を入力して開くこともできます。
https://vscode.dev の VS Code for the Web を既に使用している場合は、Remote Repositories 拡張機能コマンドを介して別のリポジトリに移動することもできます。ステータスバーの左下にあるリモートインジケーターを選択すると、[リモートリポジトリを開く...] コマンドが表示されます。
Azure Repos
Azure Repos は、VS Code for the Web で GitHub リポジトリと同様に開くことができます。
https://vscode.dev/azurerepos/<organization>/<project>/<repo> というスキーマの URL に移動すると、リポジトリ内のファイルを読み取り、検索し、Azure Repos に変更をコミットできます。変更のフェッチ、プル、同期、およびブランチの表示が可能です。
Azure Repos URL に vscode.dev をプレフィックスとして付けることで、VS Code for the Web で Azure Repos から任意のリポジトリ、ブランチ、またはタグを開くことができます。
または、Azure DevOps リポジトリまたはプルリクエストを開いているときに、(.) を押して VS Code for the Web で開くことができます。
その他のカスタム URL
デスクトップ版と同様に、VS Code for the Web は、ほぼすべてのバックエンド、言語、およびサービスをサポートする豊富な拡張機能のエコシステムを通じてカスタマイズできます。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 の一部については、以下に詳細情報があります。
テーマ
VS Code for the Web を介して、URL スキーマ: https://vscode.dev/editor/theme/<extensionId> を使用してカラーテーマを共有および体験できます。
たとえば、https://vscode.dev/editor/theme/sdras.night-owl にアクセスすると、ダウンロードとインストールプロセスを経ることなく、Night Owl テーマを体験できます。
注: カラーテーマ URL スキーマは、完全に宣言型 (コードなし) のテーマで機能します。
拡張機能は複数のテーマを定義できます。スキーマ /editor/theme/<extensionId>/<themeName> を使用できます。themeName が指定されていない場合、VS Code for the Web は最初のテーマを使用します。
テーマ作成者は、次のバッジを拡張機能の README に追加して、ユーザーが VS Code for the Web でテーマを簡単に試せるようにすることができます (<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 Codespaces) がインストールされており、GitHub Codespace を作成するアクセス権がある場合) することが簡単になります。これを行うには、コマンドパレット (F1) から使用可能な [別の環境で作業を続ける...] コマンドを使用するか、ステータスバーのリモートインジケーターをクリックします。
作業内容の保存と共有
ウェブでローカルファイルを操作する場合、自動保存が有効になっていると、作業は自動的に保存されます。デスクトップ版 VS Code で作業する場合と同様に、手動で保存することもできます (例: [ファイル] > [保存])。
リモートリポジトリで作業する場合、作業内容はコミットするまでブラウザのローカルストレージに保存されます。GitHub Repositories を使用してリポジトリまたはプルリクエストを開くと、ソース管理ビューで変更をプッシュして、新しい作業を永続化できます。
別の環境で作業を続けるを介して他の環境で作業を続けることもできます。
コミットされていない変更で [別の環境で作業を続ける] を初めて使用すると、[クラウドの変更] を使用して、選択した開発環境に編集内容を持ち込むオプションが表示されます。これは、VS Code サービスを使用して保留中の変更を保存します。詳細については、GitHub Repositories ドキュメントを参照してください。
Remote Tunnels で独自のコンピュートインスタンスを使用する
Remote - Tunnels 拡張機能を使用して、VS Code for the Web で別のマシンに対して開発を行うことができます。
Remote - Tunnels 拡張機能を使用すると、デスクトップ PC や仮想マシン (VM) などのリモートマシンに、セキュアトンネル経由で接続できます。SSH の要件なしに、どこからでもそのマシンに安全に接続できます。これにより、「独自のコンピュートを持ち込む」ことが vscode.dev に可能になり、ブラウザでコードを実行するなどの追加のシナリオが可能になります。
Remote - Tunnels の詳細については、ドキュメントを参照してください。
安全な探索
VS Code for the Web はウェブブラウザのサンドボックス内で完全に実行され、非常に限られた実行環境を提供します。
リモートリポジトリからコードにアクセスする場合、ウェブエディターはリポジトリを「複製」するのではなく、ブラウザから直接サービスの API を呼び出すことによってコードをロードします。これにより、信頼されていないリポジトリを複製する際のアタックサーフェスがさらに削減されます。
ローカルファイルを操作する場合、VS Code for the Web はブラウザのファイルシステムアクセス API を介してファイルをロードします。これにより、ブラウザがアクセスできる範囲が制限されます。
どこでも実行可能
GitHub Codespaces と同様に、VS Code for the Web は iPad などのタブレットで実行できます。
言語サポート
言語サポートは、コード編集、ナビゲーション、および閲覧を含め、ウェブ上では少しニュアンスが異なります。デスクトップ版のエクスペリエンスは通常、ファイルシステム、ランタイム、およびコンピュート環境を必要とする言語サービスとコンパイラによって強化されています。ブラウザでは、これらのエクスペリエンスは、ソースコードのトークン化と構文の色分け、補完、および多くの単一ファイル操作を提供する、ブラウザで実行されている言語サービスによって強化されています。
一般的に、エクスペリエンスは次のカテゴリに分類されます。
- 良好: ほとんどのプログラミング言語で、VS Code for the Web はコード構文の色分け、テキストベースの補完、および括弧のペアの色分けを提供します。Tree-sitter 構文ツリーを anycode 拡張機能を介して使用することで、C/C++、C#、Java、PHP、Rust、Go などの一般的な言語に対して、アウトライン/シンボルへ移動やシンボル検索などの追加のエクスペリエンスを提供できます。
- より良好: TypeScript、JavaScript、および Python のエクスペリエンスはすべて、ブラウザでネイティブに実行される言語サービスによって強化されています。これらのプログラミング言語を使用すると、「良好」なエクスペリエンスに加えて、豊富な単一ファイルの補完、セマンティックハイライト、構文エラーなどが得られます。
- 最高: JSON、HTML、CSS、LESS など、多くの「ウェブ的な」言語では、vscode.dev でのコーディングエクスペリエンスは (Markdown プレビューを含め!) デスクトップ版とほぼ同じです。
ステータスバーの言語ステータスインジケーターを通じて、現在のファイルの言語サポートのレベルを判断できます。
制限事項
VS Code for the Web はブラウザ内で完全に実行されるため、一部のエクスペリエンスは、デスクトップアプリでできることと比較して、当然のことながらより制約されます。たとえば、ターミナルとデバッガーは使用できません。これは、ブラウザサンドボックス内で Rust や Go アプリケーションをコンパイル、実行、およびデバッグできないため、理にかなっています。
拡張機能
拡張機能のサブセットのみがブラウザで実行できます。拡張機能ビューを使用してウェブに拡張機能をインストールできます。インストールできない拡張機能には、警告アイコンと [理由を学ぶ] リンクが表示されます。今後、より多くの拡張機能が有効になる予定です。
拡張機能をインストールすると、ブラウザのローカルストレージに保存されます。設定同期を有効にすることで、さまざまなブラウザやデスクトップを含む、VS Code インスタンス間で拡張機能が同期されるようにすることができます。
拡張機能パックにブラウザサンドボックスで実行されない拡張機能が含まれている場合、パックに含まれている拡張機能を確認するオプション付きの情報メッセージが表示されます。
拡張機能がブラウザサンドボックスで実行される場合、それらはより制限されます。ほとんどのテーマ、スニペット、または文法などの完全に宣言型の拡張機能は、変更なしで実行でき、拡張機能作成者による変更なしに VS Code for the Web で利用できます。コードを実行している拡張機能は、ブラウザサンドボックスでの実行をサポートするように更新する必要があります。ブラウザで拡張機能をサポートするために必要な内容の詳細については、ウェブ拡張機能作成者向けガイドを参照してください。
部分的なサポートのみでブラウザで実行される拡張機能もあります。良い例は、サポートを単一のファイルまたは現在開いているファイルに制限する言語拡張機能です。
ファイルシステム API
Edge と Chrome は現在、ファイルシステム API をサポートしており、ウェブページがローカルファイルシステムにアクセスできるようにしています。ブラウザがファイルシステム API をサポートしていない場合、フォルダーをローカルで開くことはできませんが、代わりにファイルを開くことができます。
ブラウザのサポート
VS Code for the Web は、最新バージョンの Chrome、Edge、Firefox、および Safari で使用できます。各ブラウザの古いバージョンは動作しない可能性があります。最新バージョンのみをサポートすることを保証します。
ヒント: 互換性のあるブラウザバージョンを確認する 1 つの方法は、VS Code のテストに現在使用されている Playwright のバージョンを確認し、そのサポートされているブラウザバージョンを確認することです。現在使用されている Playwright バージョンは、VS Code リポジトリの package.json ファイルの
devDependencies/@playwright/testで確認できます。Playwright バージョン (例:1.37) がわかったら、リリースノートの [ブラウザバージョン] セクションを確認できます。
Webview は Firefox および Safari で異なって表示されたり、予期しない動作をする場合があります。VS Code GitHub リポジトリで、Safari ラベルや Firefox ラベルなど、特定のブラウザに関連する問題を追跡するための問題クエリを表示できます。
VS Code for the Web を使用してブラウザエクスペリエンスを向上させるために実行できる追加の手順があります。詳細については、ブラウザの追加設定セクションを確認してください。
モバイルサポート
VS Code for the Web はモバイルデバイスで使用できますが、画面が小さいと特定の制限がある場合があります。
キーボードショートカット
特定のキーボードショートカットもウェブでは異なる動作をする場合があります。
| 問題 | 理由 |
|---|---|
| ⇧⌘P (Windows、Linux Ctrl+Shift+P) は Firefox でコマンドパレットを起動しません。 | ⇧⌘P (Windows、Linux Ctrl+Shift+P) は Firefox で予約されています。 回避策として、F1 を使用してコマンドパレットを起動してください。 |
| ⌘N (Windows、Linux Ctrl+N) の新しいファイルはウェブでは動作しません。 | ⌘N (Windows、Linux Ctrl+N) は代わりに新しいウィンドウを開きます。 回避策として、Ctrl+Alt+N (macOS では Cmd+Alt+N) を使用できます。 |
| ⌘W (Windows Ctrl+F4、Linux Ctrl+W) のエディターを閉じるはウェブでは動作しません。 | ⌘W (Windows Ctrl+F4、Linux Ctrl+W) はブラウザで現在のタブを閉じます。 回避策として、Ctrl+Shift+Alt+N (macOS では Cmd+Shift+Alt+N) を使用できます。 |
| ⇧⌘B (Windows、Linux Ctrl+Shift+B) はブラウザでお気に入りバーを切り替えません。 | VS Code for the Web はこれをオーバーライドし、コマンドパレットの [ビルド] メニューにリダイレクトします。 |
| Alt+Left および Alt+Right はエディター内をナビゲートする必要がありますが、タブ履歴ナビゲーションを誤ってトリガーする可能性があります。 | フォーカスがエディターの外にある場合、これらのショートカットは代わりにタブ履歴ナビゲーションをトリガーします。 |
ブラウザの追加設定
ブラウザで VS Code を操作する際に実行できる追加のブラウザ構成手順があります。
新しいタブとウィンドウを開く
場合によっては、VS Code for the Web で作業中に新しいタブまたはウィンドウを開く必要がある場合があります。VS Code は、クリップボードから読み取るときにクリップボードへのアクセス許可を求める場合があります。ブラウザによっては、クリップボードへのアクセスを許可したり、さまざまな方法でポップアップウィンドウを許可したりできます。
- Chrome、Edge、Firefox: ブラウザの設定で「サイトの許可」を検索するか、アドレスバーの右側にある次のオプションを探してください。
- Safari: Safari ブラウザで、[環境設定...] > [Web サイト] > [ポップアップウィンドウ] > アクセスしているドメイン (例:
vscode.dev) に移動し、ドロップダウンから [許可] を選択します。