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

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

» 2021年10月25日 17時00分 公開
[ITmedia]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

 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」にアクセスすることで利用可能になる。

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

4AI by @IT - AIを作り、動かし、守り、生かす
Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。