VSCodeをインストールしたものの、具体的な使い方がまだ分からないという方も多いのではないでしょうか。**VSCodeはさまざまな機能を提供しているエディターではありますが、使い慣れるまでに操作を覚える必要があります。**

そうはいっても、VSCodeの基本的な操作方法はそれほど難しくありません。本記事では画面の説明から、ワークスペースを追加しコードを実行するまでの流れを、図解でまとめました。

これからVSCodeの使い方を身に着けようと検討されている方は、ぜひ一緒に手を動かして使い方を覚えましょう。

では早速、VSCodeの基本操作を確認しましょう。流れとしては、まず画面の中にある各エリアやアイコンの説明をします。**次に実際にワークスペースを追加し、コードを記載し実行するところまで行います。**

### 画面の中のエリアを確認しよう

まずはVSCodeの画面の中のエリアを確認しましょう。 画面左側のアクティビティバーにはアイコンが並んでいることを確認してください。（①）ここには拡張機能の検索・ソースの検索・管理・実行・デバッグなどがあります。

また、アクティビティバーのアイコンの上にカーソルを合わせると、アイコンの意味も表示されますので、時間のあるときに各アイコンを確認してください。

その1つ右隣にはサイドバーがあります。（②）こちらは現在開いているワークスペースやファイルの名前が表示されています。画面の右側は編集エリアで（③）、コードを記述する場所です。

さらに編集エリアの下にあるのが、ターミナルなどを表示するパネルエリアで（④）、タブで切り替えることが可能です。ここではターミナルやデバッグの情報、エラーの確認などができます。

1番下の青い部分はステータスバーといいます。（⑤）ここは現在開いているワークスペースの通知を表示したり、エンコードなどを表示してくれるエリアです。

【参考】：[ユーザーインターフェース](https://code.visualstudio.com/docs/getstarted/userinterface)

### ファイルやフォルダを作成しよう

画面の確認ができたところで、早速ファイルを作成してみましょう。画面左上の「ファイル」から「フォルダを開く」を選択してください。 ここで開くフォルダは任意のもので結構です。

フォルダを開いたら、VSCodeの左側にフォルダ名が表示されます。ちなみに本記事では、「sample」という名前のフォルダを設定しています。 フォルダ名にカーソルを当てると、アイコンがいくつか出てきます。

このアイコンの1番左側にある「新しいファイル」というアイコンをクリックしましょう。そうするとファイル名を入力できますので、好きなファイル名を設定してください。本記事ではファイル名を「test.js」としています。

ここからは、コードを記述してみましょう。*先ほどご紹介したエディタエリアに、コードを記述してください。*本記事では例として以下のコードを記述します。図も参考にしつつ、同様に入力して下さい。

- var msg = "Hello World";
- console.log(msg);

またコードを入力する際は、コードのインテリセンス機能を使うとより簡単に入力ができます。今回は非常に短いコードしか記述しませんが、実際の開発では非常に役に立つ機能です。積極的に使用して、使い慣れていきましょう。

コードを記述した後は、必ず保存をしましょう。ファイル名の右横に、白い丸印（①）が表示されている時は、最後にファイルを保存した時から変更箇所がある状態です。

保存が必要ですので、メニューバーから保存を行うか、「Ctrl」＋「S」キーまたは「Command」＋「S」キーで保存を行いましょう。ファイル名の横の白い丸印が消えれば、保存完了です。

また、VSCodeではソースを自動保存に設定することも可能です。画面左上の「ファイル」から「自動保存」を選択すれば、自動保存ができるようになります。

【参考】：[Visual Studio Code でのコード編集](https://code.visualstudio.com/docs/introvideos/codeediting)

ここからは記述したコードを、実行してみましょう。*ターミナルが表示されていない場合には、画面上部のメニューバーの「ターミナル」を選択しパネルエリアを表示します。*

ちなみにターミナルは、パネルエリア右上のアイコンを使用すれば、ターミナルの分割やターミナルの強制終了が可能です。

また、今回はnode.jsを使用してJavaScriptのコードを実行します。node.jsをインストールしていない場合には、node.jsの公式サイトからダウンロードとインストールをしましょう。

node.jsのインストールが完了した方は、次のステップに進みます。ターミナルに「node --version」（①）と入力し「Enter」キーを押しましょう。バージョンの値が返ってくれば、正しくインストールがされています。

バージョンの確認ができたら、早速コードを実行してみましょう。ターミナルに「node test.js」（②）と入力し、「Enter」キーを押します。ファイル名を違う名称にしている人は「test.js」を任意のファイル名に読み替えてください。

無事「Hello World」がターミナルに表示されたら、実行完了です。この後ターミナルを閉じたい場合は、パネル右上のバツ印を押します。

【参考】：[ダウンロード](https://nodejs.org/ja/download/)
【参考】：[Visual Studio Code でのコード編集](https://code.visualstudio.com/docs/introvideos/codeediting)

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

**ここからは、VSCodeを使う上でよくある疑問やトラブルをまとめました。**こちらもぜひ参考にしてください。

### VSCodeのインストール時にPATHの追加を忘れた

基本的にインストール時に、間違えてPATHの追加を忘れてしまったと言う方もいるのではないでしょうか。本来VSCodeのPATHの設定は、インストール時にチェックを入れておけば設定は必要ありません。*忘れてしまった場合は、手動で環境変数にPATHを追加しましょう。*

### JavaやPythonなどの言語も使用したい

VSCodeがサポートしている言語は、JavaScript・TypeScript・Node.jsです。*しかしJavaやPythonなど他の言語に関しては、拡張機能をインストールすると使うことができます。*

拡張機能をインストールすれば、インテリセンスやワークスペース内の自動インポートも可能です。各言語の詳しい設定方法が気になる方は、公式サイトを参考にしてください。

また拡張機能のインストール方法は非常に簡単なので、下図のように、VSCodeのアクティビティバーから対象の拡張機能を検索し、インストールして下さい。検索窓で言語名を入力（①）すると、候補がでてきますので、そこから簡単にインストールできます。（②）

【図】：拡張機能の検索画面
【参考】：[Visual Studio Code の拡張機能](https://marketplace.visualstudio.com/search?target=VSCode&category=Programming%20Languages&sortBy=Installs)
【参考】：[VS Code での Java 入門](https://code.visualstudio.com/docs/java/java-tutorial)
【参考】：[Visual Studio Code での Python の編集](https://code.visualstudio.com/docs/python/editing)

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

### VSCodeを閉じると画面の設定などは変わるのか

コードを保存して作業完了のタイミングで、そのままVSCodeを閉じていいのか迷うこともあると思います。*VSCodeはアプリケーションを閉じても、再度起動すると最後に閉じた状態で開きます。*

また、前回起動していた時に開いていたファイルや、レイアウトなども同じ状態で起動します。

VSCodeはmacでも使用可能です。*Microfoftの公式サイトからmac版のVSCodeをダウンロードできます。*また、基本的な使い方もWindowsとmacでそれほど変わりませんので、ぜひ本記事を参考にしてVSCodeを使ってみて下さい。

【参考】：[Visual Studio コードをダウンロード](https://code.visualstudio.com/Download)

*VSCodeはマークアップ言語にも対応しているので、HTMLやCSSなどにも対応しています。*

またマークアップ言語を使用されている方の中には、Emmetを使われる方も多いと思いのではないでしょうか。VSCodeはEmmetにも対応しているので、よりスピーディーにコーディング作業も可能です。

ファイルを作成し、コードを編集すると自動的にEmmetの入力候補が表示されますので使うまでに煩雑な設定なども特に必要ありません。詳細が気になる方は、公式サイトを参照してください。

【参考】：[Visual Studio Code での Emmet](https://code.visualstudio.com/docs/editor/emmet)

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

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

VSCodeの基本的な使い方を学びましたが、一緒に作業をした方は、比較的簡単に実行までできたのではないでしょうか。またコードの編集を通して、インテリセンス機能をはじめとしたVSCodeの便利な機能を体感いただけたと思います。

**VSCodeはカスタマイズも柔軟にできるツールですので、実際に開発をする中でご自身の使いやすいようにカスタマイズをすることも可能です。**またVSCodeは無料で提供されていますので、個人でも気軽に使えるのが魅力です。

本記事や公式サイトのドキュメントなどを活用し、ぜひVSCodeを使いこなして開発効率の向上を目指しましょう。

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

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

VSCodeをインストールした方の中には、使い方が分からずお困りの方もいるのではないでしょうか。本記事ではコードを書いて実行するところまで、図を交えて詳しく解説します。ぜひ記事を読み進めながら、一緒にVSCodeを動かして基本的な操作方法を覚えていきましょう。

VSCodeは大まかに5つのエリアから画面が構成され、画面の切替えをせずにコードの実行が可能です

VSCodeは入力補完機能なども搭載されており、コードの編集も効率的にできます

VSCodeはJavaやPythonなどのプログラミング言語だけでなく、マークアップ言語も編集可能です

VSCodeの使い方を図解！画面説明からよくある質問・操作方法まで解説

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がサポートされていますが、他の言語を使いたい場合には拡張機能を使いましょう。

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

*まずは、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は、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補完機能

VSCodeの記事（2ページ目）