Microsoft、インストールが不要な「Visual Studio Code for the Web」のプレビュー版を公開：Webブラウザで動作する

Microsoftは「Visual Studio Code」の軽量版「Visual Studio Code for the Web」のプレビュー版をリリースした。Webブラウザだけで利用できる。

[ITmedia]

印刷

見るPost

Shareシェア

はてなブックマーク

SharePocket Button

　Microsoftは2021年10月20日（米国時間）、コードエディタ「Visual Studio Code」（以下、VS Code）の軽量版「Visual Studio Code for the Web」（以下、VS Code for the Web）のプレビュー版を公開した。VS Code for the Webはインストールが不要で、Webブラウザから利用できる。

　VS Code for the Webの主な機能は次の通り。

クラウドツールによるローカル開発が可能に

Webブラウザで動作しているVS Code for the Web（出典：Microsoft）

　File System Access APIをサポートするモダンWebブラウザ（現時点では「Microsoft Edge」と「Google Chrome」）では、Webブラウザがユーザー権限でローカルファイルシステムにアクセスできる。このため次のような場合に、VS Code for the Webをゼロインストールのローカル開発ツールとして利用できる。

続きを読む

　まず、https://vscode.dev/にアクセスする。これでVS Code for the Webを利用できる。

・ローカルファイルの表示と編集
　Markdownで素早くメモを取ることができ、プレビューもできる。VS Codeをフルインストールできないマシンでも、VS Code for the Webでローカルファイルを表示、編集できる場合がある。

・デバッグ
　クライアントサイドのHTMLやJavaScript、CSSアプリケーションをWebブラウザのツールと連携してデバッグできる。

・省電力マシンでコードを編集する
　VS Codeを（簡単には）インストールできない「Chromebook」のような省電力マシンでコードを編集できる。

・「iPad」を用いた開発
　ファイルをアップロード／ダウンロードできる（Filesアプリケーションを使って、クラウドに保存することもできる）だけでなく、内蔵のGitHubリポジトリ拡張機能を使って、リモートのリポジトリを開くこともできる。

・個々のファイルにアクセスする
　ローカルファイルシステムAPI（File System Access API）をサポートしていないWebブラウザでも、ファイルをアップロードしたり、ダウンロードしたりして、個々のファイルを開くことが可能。

ローカルファイルシステムアクセスがサポートされていない場合に表示されるメッセージ（出典：Microsoft）

VS Codeとはどこが異なるのか

　VS Code for the Webには、デスクトップアプリケーションのVS Codeと比べて機能制限がある。例えば、ターミナルやデバッガが利用できず、コンパイルや実行もできない。

　コード編集やナビゲーション、ブラウジングについても微妙な部分がある。デスクトップ版では一般に、ファイルシステムやランタイム、コンピューティング環境を前提にした言語サービスとコンパイラが提供されている。VS Code for the Webでは、Webブラウザで（ファイルシステムやランタイムがないにもかかわらず）完全に動作する言語サービスとして実現している。例えばソースコードのトークン化や構文の色分け、補完、多くの単一ファイル操作が可能だ。

どのようなコーディングに向くのか

　Microsoftは次のように、VS Code for the Webでのコーディングエクスペリエンスを「Good」（良い）、「Better」（非常に良い）、「Best」（最高）の3つのカテゴリーに分類している。

・Good

　VS Code for the Webはほとんどのプログラミング言語について、構文の色分け、テキストベースの補完、ブラケットペアの色分けといった機能を提供できる。「C/C++」「C#」「Java」「PHP」「Rust」「Go」といった言語については、アウトラインやシンボルへの移動、シンボル検索といった機能を提供する。

・Better

　TypeScriptやJavaScript、Pythonでのコーディングエクスペリエンスは、Webブラウザでネイティブに動作する言語サービスで全て実現できる。これらの言語では、「Good」のエクスペリエンスに加え、単一ファイル補完やセマンティックハイライト、構文エラーなどの機能も利用できる。

・Best

　JSONやHTML、CSS、LESSといった「Web言語」では、デスクトップ版とほぼ同じコーディングエクスペリエンス（Markdownプレビューを含む）を提供できる。

拡張機能は利用できるのか

　テーマやキーマップ、スニペットなど、UIをカスタマイズする拡張機能の大半は、VS Code for the Webでも動作する。設定の同期機能を使って、Webブラウザ、デスクトップ、「GitHub Codespaces」でのローミングを有効にできる。

　なお、Webブラウザで動作するようにアップデートされた拡張機能も日々増えている。

GitHubとの連携は？

　VS Codeの多くの拡張機能は、GitHubに保存されたソースコードを扱う。GitHub上のコードに簡単にアクセスできるように、VS Code for the Webには「GitHub Repositories」「Codespaces」「Pull Request」といった拡張機能が組み込まれている。

　さらにVS Code for the WebはGitHubリポジトリに加え、「Azure Repos」（「Azure DevOps」の一部）もサポートしている（現時点ではプレビュー段階）。

vscode.devのURLはどのように役立つのか

　VS Code for the Webは、豊富な拡張機能のエコシステムを利用してカスタマイズできる。VS Codeとは異なり、特定のvscode.devのURLにアクセスすると、特定の拡張機能がプリインストールされ、カスタマイズされたエクスペリエンスを提供するVS Code for the Webを利用できる。

　例えば「https://vscode.dev/theme/sdras.night-owl」にアクセスすると、ポピュラーなカラーテーマ「Night Owl」を導入済みのVS Code for the Webを利用できる。

カラーテーマ「Night Owl」を導入したVS Code for the Web（出典：Microsoft）

　このように、vscode.devのURLを使って、お気に入りのテーマを友人と共有することも可能だ。

　こうしたvscode.devのURLはMicrosoftにとって、新しい軽量エクスペリエンスを提供する強力な方法でもあると、同社は述べている。例えば、「Live Share」のゲストセッションも、Webブラウザから「https://vscode.dev/liveshare」にアクセスすることで利用可能になる。