VS Code Serverが登場!インストール方法や使い方・開発方法を解説
thumb_vscodeserver_01
VS Code Serverが登場!インストール方法や使い方・開発方法を解説
アンドエンジニア編集部
2023.04.14
この記事でわかること
VS Code Serverは、vscode.devのURLを介してリモート開発マシンに接続します
VS Code 1.69以降に対応する機能で、プライベートプレビュー版として提供されます
面倒なSSHやhttpsが不要で、リモート開発時の設定作業を簡略化することができます

VS Code Serverが登場

img_vscodeserver_01

Visual Studio Code 2022年6月版(バージョン1.69)がリリースされ、VS Codeのバックエンド機能を提供するVS Code Serverがプライベートプレビュー版として公開されました。

現時点での最新リリースとなるVisual Studio Code 2023年1月版(バージョン1.75)においても、プライベートプレビュー版の扱いには変更がありません。

サービスのインストールや更新、管理・接続を容易にするCLIが提供されます。2022年7月7日のBlogには、より詳細な情報が掲載されています。

【参考】:Visual Studio Code update June 2022, version 1.69 【参考】:Blogs The Visual Studio Code Server

VS Code Serverは、ローカルの開発マシンやクラウドのVMなど任意の場所にインストールし、SSHやhttpsを設定する手間をかけずに、ウェブ版VS Code(vscode.dev)を使ってブラウザから安全にアクセスすることができます。

VS Code Serverのリリース目的

VS Code Serverは、VS Codeの統一されたエクスペリエンスを提供するために登場しました。つまりローカルでもリモートでも、デスクトップでもブラウザでも、どのようにエディタを使ってもVS Codeで同じ操作感が提供されます。

それを支える技術として、バックエンドサーバーにVS Code Serverが動作し、トンネル接続することで安全にデータを転送します。

ブラウザからのVS Code Serverへのアクセス

ブラウザからのVS Code Serverへのアクセスは、VS Codeの手順に従います。それぞれのブラウザによっては、サイトパーミッションの設定が必要な場合があります。

【参考】:VS Code: Additional browser setup

ソフトウェアライセンスの考え方

本ソフトウェアは、使用するうえで次のライセンスに従う必要があり、同意したものとみなされます。他のソフトウェアと同様に、利用条項や情報保護を理解した上で使用を開始します。

・Visual Studio Code Serverライセンス条項 ・マイクロソフトのプライバシーステートメント

【参考】:Visual Studio Code Serverライセンス条項 【参考】:マイクロソフトのプライバシーステートメント

VS Code Serverのサインアップ登録が不要に

img_vscodeserver_02

VS Code Serverの使い方ですが、以前はプライベートプレビューのためサインアップフォームからアクセスを要求する必要がありました。現在では、サインアップ登録が不要となり、すぐに利用できるように手順が改定されています。

以前の場合はフォーム送信後、マイクロソフト社により所定の確認がされており、登録完了の電子メールを受け取るまで2〜3週間ほどかかっていましたが、すぐに利用が可能です。フォーム入力サイトにも、その旨が表示されています。

【参考】:The VS Code Server - Preview Program Signup

VS Codeの概要

img_vscodeserver_03

VSCode(Visual Studio Code)は、マイクロソフト社が開発提供しているソースコードエディタです。Windows・Linux・macOSのクロスプラットフォームで利用可能です。プログラミング言語は、C言語やC++をはじめPython・PHPなどの主要言語に対応します。

【参考】:Microsoft Visual Studio Code 【参考】:Visual Studio Code

フリーのオープンソースソフトウェアであり、各プログラミング言語の構文チェック・検索・編集が可能です。無料でキー操作のカスタマイズの高さがあることから、クロスプラットフォーム利用が進んでいます。

Pythonとは?人気の理由と基本知識をわかりやすく解説!
PHPとは?基本知識からメリット・デメリットまでわかりやすく解説

VS Codeの最新リリース

VS Codeの最新リリースは、2023年1月版(バージョン1.75)となります。最新リリースでは、以下の機能拡張がされています。

・拡張機能、設定、ショートカットなどのプロファイル共有機能 ・新しいキーボードショートカットなどによるアクセシビリティの向上 ・ビューの検索や表示の改善 ・新しいGitコマンドやGitHub Copilotを用いたAI補完機能

【参考】:Visual Studio Code Updates January 2023 (version 1.75)

AIペアプログラマー「GitHub Copilot」の使い方や導入メリットを徹底解説!

VS Code Serverの概要

VS Code Serverは、デスクトップ PC や仮想マシン (VM) などのリモート開発マシン上で実行できるサービスです。トンネリングを確立することでSSHを必要とせず、vscode.devのURLを介してどこからでも安全にリモートマシンに接続することができます。SSHやhttpsが不要で、設定作業を簡略化することができます。

【参考】:Docs Visual Studio Code Server

VS Codeでは、マルチプロセスのアプリケーションとして設計されています。ユーザーの生産性を高め、シームレスな環境で利用できるように、コードを入力するフロントエンドと、拡張機能やターミナル・デバッグを担当するバックエンドを分離して設計しています。

VS Code Serverではリモート環境にサービスをインストールし、ローカルのVS Codeがリモートのソースコードやランタイムとスムーズに対話できるようにします。具体的には、Windows Subsystem for Linux(WSL) や SSH 経由のリモートマシン・開発コンテナで VS Code から直接作業することができます。

フロントエンドとは?バックエンドとの違いや使う言語について解説
Windows環境のDockerとWSLの活用方法・手順を解説

VS Code Serverの想定利用方法

VS Code Serverは、SSHを使用せずにウェブアクセスにより利用するものです。具体的な想定利用方法は、SSHのサポートが制限されている環境や機器での利用、あるいはウェブベースのアクセスが必要なリモートマシンでの開発に有効です。

上記のほか、iPadなどのタブレットやChromebookのように、VS Codeデスクトップのインストールをサポートしていないデバイスを用いた開発も可能になります。処理はブラウザとのトンネリングを用いていますので、セキュリティ上も有効です。

iPadでプログラミングは可能?使える言語や環境構築の方法を解説
Chromebookで始めるプログラミング!概要とおすすめ構成

VS Code Serverが使用するエンドポイント

VS Code Serverでは、以下のエンドポイントアクセスが必要になることがあります。制限を加えている利用環境では、ネットワークアクセス許可が必要です。

【参考】:Network Connections in Visual Studio Code: Common hostnames 【参考】:VS Code Server: connectivity requirements on remote machine / VM

VS Code Serverの実装と今後の予定

VS Code Serverでは、コード CLI をさらに強化し、プロジェクトの保存場所に関わらず、VS Code のデスクトップとウェブインスタンスの両方で利用することを目標としています。今回、利用者のフィードバックを得るために、プライベートプレビュー版として限定リリースすることが決定されました。

最初のプレビューでのコードサーバーCLIは、デスクトップのVS Codeを起動したり、拡張機能をインストールしたりするためのCLIとは異なります。使用可能なコマンドは、ターミナルから「code -h」で確認可能です。

VS Code Serverが対応を開始したVS Code

img_vscodeserver_04

VS Code Serverが対応を開始したVS Code 1.69は、2022年6月にリリースされました。2023年2月現在、Update 1.75.0が最新リリースですが、ここでは、VS Code Serverが対応を開始したVS Code 1.69を簡単にまとめておきます。1.69では、VS Code Serverの他にも以下の主要機能がリリースされています。

【参考】:Visual Studio Code update June 2022, version 1.69

3ウェイのマージエディター

3者間でのマージ作業に活用できます。ソースコントロールビューでコンフリクトしているファイルをクリックすることでマージエディターが起動し、Git mergeのコンフリクトを素早く解決することができます。この機能は、git.mergeEditorをtrueに設定することで利用可能です。

コマンドセンター

ファイル検索やコマンドの実行、カーソル履歴のナビゲーションを行う新しいユーザーインターフェースです。コマンドセンターは通常のタイトルバーに代わるもので、メインセクションをクリックすると、最近開いたファイルや検索ボックスがあるQuick Open dropdownが表示されます。

Do Not Disturbモード

Do Not Disturbモードを有効にすることで、エラー以外の通知ポップアップをすべて非表示に設定できます。進行状況の通知は、自動的にステータスバーに表示されます。非表示になった通知は、引き続き通知センターで確認することができます。

ターミナルシェルの統合

1月のリリースからプレビュー提供していたシェル統合が正式にリリースされました。PowerShellやbash・zshのシェル統合で、次期リリースの1.70からデフォルトで有効となる予定です。シェル統合により、コマンドの終了コードを取得し、結果の判定や再実行が可能です。

PowerShellとは?できること・コマンドをわかりやすく解説
bashとは?シェルの概要から他のシェルとの違いまで解説!

ターゲットへのデバッグステップイン

デバッガがある行で一時停止中に、特定の関数呼び出しに直接ステップインし、デバッグを行うことができます。コマンドパレットで「Debug: Step Into Target 」コマンドを実行するか、キーボードショートカットの「Ctrl+F11」で起動することができます。

JavaScript ソースマップ切り替え

JavaScript のデバッグセッションで、ソースマップが切り替え可能となりました。オフにすると、ソースコードに設定されたブレークポイントは有効ですが、コンパイルされたコードをステップ実行します。

VS Code Serverのインストール

VS Code Serverのインストール方法は、Blogあるいはドキュメントに掲載されています。

【参考】:Blogs The Visual Studio Code Server 【参考】:Docs Visual Studio Code Server

VS Code Server を開発対象となるリモートマシン にインストールする方法ですが、Windows Subsystem for Linux(WSL)で VS Code Server をセットアップする場合、WSLターミナルで次のコマンドを実行します。

wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

VS Code Serverの起動

WSLの場合、WSLターミナルで以下のコマンドでVS Code Serverを起動します。

code-server

code-server -h を実行すると、サーバの起動と管理に使用できるすべてのコマンドを見ることができます。プライベートプレビュー版のため、正式リリースに向けて利用可能なコマンドが今後更新されていく模様です。

VS Code Serverの接続

vscode.devとコンピュータの接続を確立するために、VS Code Server のセキュアトンネルサービスが利用されます。具体的には、GitHubアカウントの認証URLとなる 「https://github.com/login/device」に指定された認証コードを入力することで、トンネリングサービスが利用可能になります。

最初の起動時には、接続のための名称を登録します。設定完了によりvscode.devの接続URLが生成され、このURLを任意のデバイスで利用することができます。VS Code Serverは、SSH接続せずにvscode.devからリモートマシンに接続できます。VS Codeリモート開発の詳細な考え方については、以下のリンクをご確認ください。

【参考】:VS Code Remote Development

リモート開発の選択肢が増えます

img_vscodeserver_04

リモート開発では、通常SSHを使用してリモートマシンあるいは仮想マシン上のフォルダに接続し開発を進めます。VS Code ServerではSSHを使わずに、vscode.devのURLでどこからでも安全に行うことができます。1度設定してしまえば、ウェブアクセスであらゆるデバイスからコード開発が可能になります。

現在はプライベートプレビューのため多少ハードルが高く感じられますが、通常のプレビューや正式リリースに向けて情報発信をチェックしておくことをおすすめします。

VS Codeのプラグインとは?導入方法やおすすめの拡張機能も紹介
VSCodeのショートカット一覧!開発作業を効率化する秘訣を解説
Visual Studio 2022の新機能がIDEで歴代最高な理由
気になる人のXをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

Sponsored
【無料個別転職相談会】アプリケーションエンジニア向け!リモート・在宅勤務で働きたい方へ
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
はじめて転職される方へ
SE・システムエンジニア(IT/通信/インターネット) 求人一覧

編集部おすすめコンテンツ

Sponsored
【無料個別転職相談会】アプリケーションエンジニア向け!リモート・在宅勤務で働きたい方へ
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT