VSCodeとは、Microsoftが開発提供するコードエディタを指し、正式名をVisual Studio Codeと呼びます。ソフトウェア開発向けのテキストエディタで、Windowsのほか、Linux・macOSで利用できます。**VSCodeはウェブインターフェースも提供しており、簡単にプログラムコードの作成や編集を始めることができます。**

【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code)

VSCodeの特徴はいくつか挙げられます。

*1つは、VSCodeが開発工程全般のツールと統合できることです。*コード開発からビルド・デバッグ・実行、デプロイまでの流れをサポートします。この一連の流れは統合開発環境（IDE）でサポートされるものです。

VSCodeはコードエディタでありながら、拡張機能を利用することでIDEとそん色ないレベルでの利用を可能にします。

*もう1つには、連携の豊富さが挙げられます。*AzureやGitHubと統合された操作を提供し、ローカルからクラウドまでのユースケースに対応します。多くのプログラミング言語をサポートし、ウェブアプリやデータベース、あるいはコンテナ開発にも利用できます。

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

VSCodeでは、各プログラミング言語の仕様（シンタックス）に基づきハイライト表示する、シンタックスハイライトが実装されます。その他にも多くの機能が実装されており、*メニューにない機能は、コマンドパレットからコマンドを実行したり、.jsonの設定ファイルに記述して使用したりすることができます。*

また拡張機能により、コンテナ開発やリモート開発などに対応するなど、必要な機能を追加で取り込むことができます。メニューの日本語化も、拡張機能で対応します。

*VSCodeは高機能なコードエディタでありながら、無料で利用できます。*バイナリはMicrosoftの独自リリースですが、ソースコードはフリーで、オープンソースとして公開されています。そのため2015年にリリースされて以降、コードエディタとしてVSCodeが開発者の支持を集めています。

*Microsoftが提供する開発環境には、VisualStudioがあります。*VisualStudioは、Windows向けに提供されるIDEです。.NETやC++を中心とした必要ツールとして、エディタ・コンパイラ・デバッガなどが同梱されています。従来はWindows版のみでしたが、現在はmacOS向けに「Visual Studio for Mac」が投入されています。

【参考】：[Visual Studio](https://visualstudio.microsoft.com/ja/)

*テキストエディタとは、文書の原型となるプレーンテキストの作成・編集ツールを指します。*プレーンテキストは、加工無しのテキストファイルで、文章作成やプログラム言語のソースコード作成に用いることができます。

ソースコードの他にマークアップ言語、あるいはJSONのようなデータファイルでも用いることができます。ファイルの作成・編集は、このテキストエディタを用います。

テキストエディタとコードエディタの違いについても触れておきます。メモを残す程度であればどのテキストエディタでも問題ありませんが、プログラム開発ではプログラミング言語固有の文法に応じて、表示を分かりやすくする必要があります。

コードエディタではプログラミング言語に応じて、ハイライト表示などの工夫をしています。構文解釈を言語仕様にしたがって、効率的にコード開発を行うよう工夫がされています。

テキストエディターとは？エンジニア初心者におすすめのエディタも紹介！

コードエディタの解説に、統合開発環境（IDE）が紹介されることが多いです。ここで言うIDEとは、コードエディタや開発工程で使用するコンパイラ・リンカ・デバッガなどをセットで提供する統合ソフトウェアを指します。

*同一ベンダーから提供されるために、開発ソフトウェアのデバッグやビルドがシームレスに連携します。*この開発環境を構築をツール事に行う必要もなく、一体的に動作させることが可能です。

VisualStudioとVSCodeの違いに触れる前に、それぞれの実装形態を整理します。

・*VisualStudioの実装形態*
 VisualStudioは、IDEと呼ばれる開発ツールです。必要なコンパイラやデバッガなどがあらかじめ同梱されています。ツールはプログラミング言語ごとに実装されており、「Visual C++」「Visual C#」「Visual Basic」などが統合されています。拡張機能も豊富です。

・*VSCodeの実装形態*
VSCodeは、コードエディタと呼ばれる開発ツールでメモ帳などと同じくテキストエディタとして使用する軽量なソフトウェアです。スクリプト言語であるJavaScriptやTypeScript、JSON・HTML・CSSなどはすぐにコード開発が可能です。

VSCodeは、機能のプラグインが可能でコンパイラやデバッガなどと連携することもできます。C++（C言語）やJava、PHP・Pythonなど必要なプログラム言語に対応した拡張機能（Extension）をインストールすることで、デバッグや実行が可能になります。

違いをまとめると、VisualStudioは、IDEでありフルバンドルされたツールを一括提供します。VSCodeはコードエディタの位置付けで、軽量でそのまま使用することもでき、さらに拡張機能でIDEのように使用することも可能です。例えると、VisualStudioはフルコース料理、VSCodeはアラカルト料理で追加可能、という具合にとらえると良いでしょう。

TypeScript入門編として利用する際に覚えておくポイント

JSON入門！基本フォーマットからファイルの作り方まで解説

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

ここではVSCode以外のコードエディタを紹介していきます。*ここで挙げるエディタをVSCodeと比較し、要望に合うソフトウェアを試してみるのが良いでしょう。*コードエディタはテキストエディタを含みますが、プログラム開発を効率的に行うエディタからいくつかをピックアップして解説していきます。

条件は、VSCodeに実装されている「マルチプラットフォームに対応」「複数の汎用プログラム言語に対応」「プログラム言語に基づくシンタックスハイライト表示」「拡張機能に対応」「カスタマイズが可能」とし、おすすめのソフトウェアを解説していきます。

Sublime Textは、Windows・macOS・Linuxに対応するエディタです。*VSCodeでしっくりこない場合は、万能型のSublime Textをおすすめします。*

プロプライエタリのソフトウェアですが、ライセンス版を試用することができます。継続利用ライセンスは99USドルの支払いが必要ですが、試用の期限は設定されていません。C言語やC++・Pythonなど多くのプログラミング言語やマークアップ言語に対応します。

【参考】：[Sublime Text](https://www.sublimetext.com/)

Sublime Text 4の概要からインストール方法・特徴を解説

Vimは、古くからUnix系OSで使用されているviコマンドをビジュアル表示に対応させたもので、CUIでも動作します。LinuxやUnix、Windows・macOSに対応します。*特にLinuxやUnix環境に慣れ親しんだ方におすすめします。*

マクロやスクリプト・プラグインによる拡張機能をサポートします。C言語・C++、Fortran・Java・Pythonなどのプログラム言語、HTMLやXMLなどのマークアップ言語など多くの開発言語に対応します。

【参考】：[Vim](https://www.vim.org/)

作業効率が大幅アップするVimのプラグイン12選！各特徴を詳しく解説

Emacsは、古くからviとならび人気のあるエディタです。LinuxやUnix、Windows・macOSに対応します。*こちらもLinuxやUnix環境をお使いの方におすすめします。*

組み込みコマンドとマクロ機能がサポートされ、Emacs Lispや拡張バンドルが利用できます。C言語・C++、Fortran・Java・JavaScript・Python・Perl・Rubyなどのプログラム言語、HTMLやXMLなどのマークアップ言語など多くの開発言語に対応します。

【参考】：[GNU Emacs](https://www.gnu.org/software/emacs/)

WindowsでEmacsを利用するには？概要から使用方法まで解説！

### 特定プラットフォーム向けエディタ

マルチプラットフォームではありませんが、特定プラットフォームで使われるエディタにも触れておきます。*使用するOSが限定される場合は、選択肢に入れると良いでしょう。*

・*サクラエディタ*
サクラエディタはWindows向けのテキストエディタです。日本製で、JISやEUC・Unicodeなどのコードがサポートされます。C言語・C++、Java・Perlなどのプログラム言語、HTMLなどのマークアップ言語に対応します。マクロ機能が充実しており、Grepやコードアウトライン解析なども可能です。

【参考】：[サクラエディタ](https://sakura-editor.github.io/)

サクラエディタの使い方は？基本設定から便利な使い方まで解説！

・*Notepad++*
Notepad++は、Windows向けフリーソフトウェアのエディタです。Windows搭載のNotepadのようにプログラム開発を行うことができます。マクロとプラグインに対応します。C言語・Java・Perl・Python・PHPなどのプログラム言語、HTMLやXMLなどのマークアップ言語など約80種類の開発言語に対応します。

【参考】：[Notepad++](https://notepad-plus-plus.org/)

・*Xcode*
macOS向けには、エディタの分類から外れますがXcodeを紹介します。こちらはIDEで、macOSやiOSのアプリケーション開発が可能です。macOSで動作し、iOS、iPadOS、macOS、tvOSをターゲットとする開発が可能です。Swift、SwiftUIと連携します。C言語やC++・Java・Swiftなどの開発が可能です。

【参考】：[Xcode](https://developer.apple.com/jp/xcode/)

Xcode 14が提供開始！Xcode 13との違いや新機能を解説

## VSCodeは開発工程をカバーし開発生産性を高めます

VSCodeは、プログラミングのソースコード開発で使用するコードエディタです。単純なコード作成から、開発工程で必要とされるコンパイルやビルド・デバッグなどの機能を組み込むことも可能です。マルチプラットフォームで動作するため、環境を選ばすに使用することができます。

**これらのことからVSCodeは、開発作業全般を意識することなく生産性を高めることが可能であり、おすすめのエディタの1つです。**

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

Macで使えるテキストエディタとは？使うメリットとおすすめ11選を紹介！

VSCodeとは、テキストエディタの1つでソフトウェア開発に的を絞ったコードエディタです。マルチプラットフォームで動作し、無料で利用することができます。ここでは、VSCodeの概要から他のエディタの特徴まで比較し、解説していきます。

VSCodeとは、コードエディタと呼ばれるソフトウェア開発向けテキストエディタを指します

マルチプラットフォームで動作し、必要な機能を簡単に拡張導入することができます

他のテキストエディタも多数ありますが、VSCodeが開発者向けに偏りなく支持を集めています

VSCodeとは？定番のコードエディタを他のエディタと比較して解説

## VSCodeは軽量で使いやすいコードエディター

VSCodeは様々な開発で使用されているコードエディターです。**VSCodeは軽量なことで知られ、起動時に使用するメモリが少ない特徴があります。**

またインテリセンスやデバッグ機能など、様々な機能が搭載されています。さらにVSCodeは機能面が充実しているだけでなく、インストールの方法も簡単です。

本記事では、VSCodeのインストールと初期設定までを丁寧に解説します。これからVSCodeを使おうと考えている方は、ぜひ本記事を参考にして一緒に作業をしましょう。

【参考】：[Code editing.Redefined.](https://code.visualstudio.com/#alt-downloads)

## OSごとにダウンロードするVSCodeが異なる

VSCodeの公式サイトでは、OSごとにダウンロードボタンが分かれています。**ダウンロードをする時は、必ずお使いの環境にあったアプリケーションをダウンロードしてください。**

またダウンロードのページには、下図のようにOSのバージョンが表示されています。（①）ダウンロードをする際には、VSCodeが対応しているバージョンかどうかも併せて確認しましょう。

下図の赤枠を押すと、VSCodeがダウンロードされます。バージョンなどの確認ができたら、お使いのOSのボタンを押しましょう。

**VSCodeのダウンロードが完了したら、インストールを開始しましょう。**先ほどダウンロードしたセットアップ用のアプリケーションを起動して下さい。

アプリケーションを起動すると、「使用許諾契約書をお読みください」と表示されますので、内容を確認しましょう。内容に同意する場合は、「同意する」にチェックを入れて「次へ」ボタンを押します。

【図】：使用許諾契約書の同意画面

次に「追加タスクの選択」という画面が現れます。ここでオプションを設定しましょう。デフォルトでは下2つの項目にチェックが入っていますが、お好みで変更しても問題ありません。

ちなみに1番下の項目「PATHへの追加（再起動後に使用可能）」は、チェックを入れておけば環境変数の追加などの設定が不要になります。面倒な初期設定が不要ですので、すぐにVSCodeを使用したい方は、チェックを入れておきましょう。 

【図】：追加タスクの選択画面

最後に「インストール準備完了画面」という画面が表示されます。画面中央の「追加タスク一覧」という箇所に、先ほどチェックを入れた項目が表示されているか確認しましょう。

オプションの項目を変更したい場合は、画面の下の「戻る」ボタンを押し、オプションの設定をします。設定内容に問題がなければ「インストール」ボタンを押しましょう。

【図】：インストール準備完了画面

無事にインストールが終わると「Visual Studio Codeセットアップウィザードの完了」という画面が表示されます。そのままVSCodeの設定をする場合には、画面中央の「Visual Studio Codeを実行する」のチェックを入れたままにします。

最後に「完了」ボタンを押したら、インストールは完了です。チェックを入れたままにした方は、VSCodeが起動しますので、そのまま初期設定を始めましょう。

VSCodeはデフォルトの言語が英語のため、インストールが完了したら日本語に変更する必要があります。**その際、日本語で表示させるためには、拡張機能の設定が必要です。**

VSCodeでは日本語化の設定にとどまらず、他の場面でも拡張機能を頻繁に使用します。例えばVSCodeではJavaScript、Node.js、TypeScriptがサポートされていますが、他の言語を使いたい場合には拡張機能を使いましょう。

また、その他にもデバッガなどを使いたい場合にも、拡張機能を使用しています。ここからは、日本語表記の設定を通して、拡張機能の導入方法を解説します。 

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

Node.jsとは？JavaScriptとの違いや使い所を解説

*まずは、VSCodeの画面を起動した状態にしてください。*そしてVSCodeの画面の左側にある、「アクティビティバー」の1番下にある「拡張機能」のアイコンをクリックします。

この拡張機能のアイコンは「Ctrl」＋「Shift」＋「X」 でも開くことができます 。拡張機能を開くと、画面の左側に拡張機能の一覧が表示されることを確認しましょう。ご自身がインストールしたい拡張機能を、下図の赤枠で囲われた検索窓に入力して探しましょう。

今回は例として「Japanese Language Pack for Visual Studio Code」をインストールします。VSCodeはデフォルトの設定は英語表記のため、日本語化をしたい方はこちらの拡張機能をインストールしましょう。

左側の拡張機能の検索窓から「Japanese Language Pack for Visual Studio Code」を検索すると、画面右側に拡張機能の詳細が表示されます。

画面上部のインストールという青いボタンを押すと、インストールが開始されます。インストールが完了すると、画面右下にポップアップが出ますので、「Change Language and Restart」という青いボタンを押しましょう。

ボタンを押すと、VSCodeが再起動します。再起動後の画面が日本語に切り替わっていれば、うまく拡張機能がインストールできました。

他の拡張機能についても、上記のような流れで拡張機能を検索してインストールをすれば、すぐに使えるようになります。その他に導入したい拡張機能があれば、同様の手順でインストールをしてみましょう。

【参考】：[拡張機能マーケットプレイス](https://code.visualstudio.com/docs/editor/extension-marketplace)

## ユーザとワークスペースの設定

**次に、ユーザの設定とワークスペースの設定を行います。**どちらの設定もそれほど難しくありませんので、一緒に手を動かして作業してみましょう。

まずはユーザー設定から行いましょう。ユーザー設定は、画面左下の歯車マークを押すと開くことができます。ユーザー設定では、エディターのフォントや書式設定、エンコードなどを細かく設定できます。また基本的にはプルダウンで選択をする形式が多いため、難しい作業は必要ありません。

*基本的には好みで設定をしていただければ良いと思いますが、「テキストエディター」の箇所は一度目を通して設定をすることをおすすめします。*

例えばインデントを自動で揃えるかといった、細かいポイントを自分好みにカスタマイズできるので、ここをしっかり設定しておくと非常に作業効率が良くなるでしょう。

【参考】：[ユーザーとワークスペースの設定](https://code.visualstudio.com/docs/getstarted/settings)

次にワークスペース設定について解説します。*VSCodeのワークスペースでは、特定のフォルダーをワークスペースに設定できます。*するとそのワークスペースに限定して、特定の設定や拡張機能の有無の設定が可能です。

VSCodeのワークスペースを追加するには、Vscode の画面左上の「ファイル」から開くことができます。例えば特定のフォルダをワークスペースに追加したい場合には、「ファイル」（①）の「フォルダーをワークスペースに追加」（②）を選択し、フォルダを追加するだけでワークスペースを設定できます。

【図】：ワークスペースの追加

その他にもマルチルートワークスペースという複数のフォルダをワークスペースとして構成する方法もあります。こちらは応用的な使い方になりますので、もしマルチルートワークスペースの設定方法

が気になる方はVSCodeの公式サイトを参考にしてください。

【参考】：[ユーザーとワークスペースの設定](https://code.visualstudio.com/docs/getstarted/settings)
【参考】：[マルチルート ワークスペース](https://code.visualstudio.com/docs/editor/multi-root-workspaces)

## VSCodeの紹介ビデオも活用しよう

**VSCodeの公式サイトにはセットアップを含め、VSCodeの使い方を紹介する動画が用意されています。**解説動画は英語ですが、操作を実際に見ながら作業できます。また動画の下に概要が説明されていますので、ブラウザの翻訳機能などを活用すれば日本語で、ある程度内容を把握できます。

紹介動画はセットアップの動画の他にも、より効率的な使い方やデバッグの方法も紹介されています。これからVSCodeを活用する方は、ぜひこちらも参考にしてみてください。

【参考】：[紹介ビデオ](https://code.visualstudio.com/docs/getstarted/introvideos)

## VSCodeを活用して効率的に開発しよう

VSCodeのインストールは手順も少なく、非常に簡単だとお分かりいただけたかと思います。**初期設定なども簡単で、すぐに開発を始められるのがVSCodeの特徴です。**

また、拡張機能やユーザー設定などで、後から自分好みにカスタマイズできるのもVSCodeの魅力です。これからVSCodeを使いたいと考えている方は、ぜひ本記事を参考にしてインストールをしてみてください。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

VSCodeは、Windows・mac・Linuxで使用できるコードのエディターです。JavaScriptなどをはじめとした様々な言語に対応し、幅広い開発者に使用されています。本記事では、VSCodeのインストール方法から設定まで詳しく解説します。

VSCodeは軽量かつ機能が豊富なコードエディターで、様々な開発で使用されています

インストールをした直後のVSCodeは英語表記のため、拡張機能を使い別途日本語化します

ユーザー設定やワークスペース設定を行うことでより効率的な開発を目指せます

VSCodeをインストールする方法とは？設定方法まで丁寧に解説

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](https://code.visualstudio.com/updates/v1_69)
【参考】：[Blogs The Visual Studio Code Server](https://code.visualstudio.com/blogs/2022/07/07/vscode-server)

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

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

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

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

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

【参考】：[VS Code: Additional browser setup](https://code.visualstudio.com/docs/editor/vscode-web#_additional-browser-setup)

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

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

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

【参考】：[Visual Studio Code Serverライセンス条項](https://aka.ms/vscode-server-license)
【参考】：[マイクロソフトのプライバシーステートメント](https://privacy.microsoft.com/en-US/privacystatement)

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

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

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

【参考】：[The VS Code Server - Preview Program Signup](https://aka.ms/vscode-server-signup)

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

【参考】：[Microsoft Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
【参考】：[Visual Studio Code](https://code.visualstudio.com/)

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

Pythonとは？人気の理由と基本知識をわかりやすく解説！

PHPとは？基本知識からメリット・デメリットまでわかりやすく解説

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

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

【参考】：[Visual Studio Code Updates January 2023 (version 1.75)](https://code.visualstudio.com/updates/v1_75)

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

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

【参考】：[Docs Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server)

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

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

フロントエンドとは？バックエンドとの違いや使う言語について解説

Windows環境のDockerとWSLの活用方法・手順を解説

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](https://code.visualstudio.com/docs/setup/network#_common-hostnames)
【参考】：[VS Code Server: connectivity requirements on remote machine / VM](https://code.visualstudio.com/docs/remote/ssh#_what-are-the-connectivity-requirements-for-the-vs-code-server-when-it-is-running-on-a-remote-machine-vm)

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

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

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

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

*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](https://code.visualstudio.com/updates/v1_69)

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

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

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

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

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

PowerShellとは？できること・コマンドをわかりやすく解説

bashとは？シェルの概要から他のシェルとの違いまで解説！

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

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

### JavaScript ソースマップ切り替え

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

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

【参考】：[Blogs The Visual Studio Code Server](https://code.visualstudio.com/blogs/2022/07/07/vscode-server)
【参考】：[Docs Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server)

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

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

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

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

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](https://code.visualstudio.com/docs/remote/remote-overview)

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

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

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

Visual Studio 2022の新機能がIDEで歴代最高な理由

VS Code Server は、リモート開発マシン上で実行できるサービスです。SSHを必要とせず、vscode.devのURLを介してどこからでも安全にリモートマシンに接続することができます。ここではVS Code Serverの概要から利用方法まで解説していきます。

VS Code Serverは、vscode.devのURLを介してリモート開発マシンに接続します

VS Code 1.69以降に対応する機能で、プライベートプレビュー版として提供されます

面倒なSSHやhttpsが不要で、リモート開発時の設定作業を簡略化することができます

VS Code Serverが登場！インストール方法や使い方・開発方法を解説

Visual Studio Code（VSCode）は、**キーボードショートカット機能を持ち、ほとんどの操作をキーボード操作のみで行うことができます。**ショートカットの変更や、希望のショートカット設定を導入することも可能であり、キーマップのカスタマイズ性が高いことが特長として挙げられます。

*Visual Studio Codeは、マイクロソフト社が開発提供しているソースコードエディタです。*Windows・Linux・macOSで利用可能です。フリーのオープンソースソフトウェアであることや、キー操作のカスタマイズを柔軟に行えることから、クロスプラットフォーム利用が進んでいます。

## Visual Studio Codeのキーバインディング

Visual Studio Codeでは、ほとんどの操作をキーボードで行うことができます。*デフォルトキーバインディングが設定されていますが、キーボードショートカットエディタで簡単に確認・変更することができます。*また、あらかじめ決められたキーボードショートカットをマーケットプレイスから取り込むこともできます。

Visual Studio Codeの利用には、モジュールのダウンロードとインストールが必要です。ショートカットの確認の際に、実行できるよう事前に準備しておきましょう。なお、*Web版もプレビュー提供されており、インストールせずにソフトウェアを開発することもできます。*

【参考】：[Download Visual Studio Code](https://code.visualstudio.com/download)
【参考】：[Visual Studio Code Webプレビュー](https://vscode.dev/)

VSCodeの記事（2ページ目）