Visual Studio Codeとは？特徴・インストール・使い方を徹底解説

Visual Studio Code（ビジュアルスタジオコード）は、プログラミングなどを記述できるコードエディターのことです。

Microsoft（マイクロソフト）社が開発しており、軽量で動作が速いため、多くのエンジニアやプログラマーに重宝されています。

しかし、具体的にVisual Studio Codeでできることを知りたい方は多いのではないでしょうか。

そこで本記事では、Visual Studio Codeの概要や特徴を解説するとともに、インストール方法をご紹介します。

また、Visual Studio Codeの使い方もご説明しますので、ぜひ参考にしてください。

Visual Studio Codeとは？

まずは、Visual Studio Codeの概要から解説します。

Visual Studio Codeは、プロトタイプを迅速に開発できるエディターツールです。

Microsoft社が開発しており、拡張機能が非常に優秀なことで知られています。

加えて、Visual Studio Codeは対応しているプログラミング言語が多いため、エンジニアやプログラマーに広く使われています。

Stack Overflow 2024 Developer Surveyでは、Visual Studio Codeが最も使用されている統合開発環境（エディタを含む）として73.6%の利用率でランクインしています。

また、Visual Studio Codeは多言語対応であり、OSの縛りも存在しません。

WebサイトやWebアプリケーションを開発するとなった際に、日本の企業内の人材のみではなく、外国人の人材と協力して開発する「オフショア」という方法があります。

オフショアの場合、日本人だけで取り組むわけではないため、必然的に外国人の方も開発しやすい環境であることが必要です。

その点、Visual Studio Codeは多言語対応かつOSの縛りが存在しないため、あらゆる開発環境に適応できるメリットがあります。

これからエンジニアやプログラマーとして、どのテキストエディターを使って良いのか分からない方は、Visual Studio Codeを選んでおけば間違いないでしょう。

Visual Studio Codeの特徴

ここまで、Visual Studio Codeの概要を解説してきました。

ここからは、Visual Studio Codeの特徴を4つご紹介します。

動作が軽い

Visual Studio Codeは、動作が軽いテキストエディターとして有名です。

多くのプログラミングを行えるテキストエディターは、動作が重いツールが多く、開発にストレスを感じてしまうケースが多くなっています。

その点、Visual Studio Codeでは、開発に無駄な機能は一切省かれています。

これにより、プログラミングを行う際のタイムラグや重さが生じない仕組みとなっているため、他のテキストエディターと比較して、快適にプログラミングを行えます。

動作が軽いことは、プログラムやサービスを1日でも早くリリースできることに繋がるため、非常に重要なポイントとして捉えておくと良いでしょう。

ターミナルを開ける

次に、Visual Studio Codeではターミナルを開けることも特徴です。

ターミナルとは、現実世界でいう「リモコン」のようなものを指します。

テキストエディター内でターミナルを開けない場合、都度ターミナル画面に戻ってコマンドをコピーし、再度テキストエディターに戻ってくる必要があります。

しかし、これは非常に手間がかかるものであり、時間的ロスが発生することも否めません。

Visual Studio Codeでは、ターミナルの多いプログラミング言語であっても、テキストエディター内でターミナルを開けるため、Visual Studio Codeのみでプログラミングを完結できることが特徴となっています。

拡張機能が非常に優秀

Visual Studio Codeは、拡張機能が非常に優秀なテキストエディターとして知られています。

拡張機能とは、エンジニアやプログラマーが自分の都合に合わせて、Visual Studio Codeに機能を追加できる機能のことを指します。

拡張機能が優秀ではないテキストエディターの場合、自分が欲しい機能が標準で搭載されていなければ、開発に大きなストレスが発生することは間違いありません。

その点、Visual Studio Codeは拡張機能が優秀かつ、機能が豊富であるため、自分の思い通りの開発環境を実現できるでしょう。

たとえば、Visual Studio Codeには「autoDocstring – Python Docstring Generator」という拡張機能が用意されています。

こちらは、プログラミング言語のPythonで記述する際に、Docstringのフォーマットを合わせられる拡張機能です。

また、GitHub Copilotとの統合によるAIコーディング支援機能も大きな特徴です。

コードの自動補完やチャットベースの質問応答、さらにはエージェント機能によるコード生成や修正の自動化まで、AIを活用した高度な開発支援が利用できます。

他にも、Visual Studio Codeには豊富な拡張機能が用意されているため、開発状況に合わせて選んでみてください。

入力候補の自動表示機能が搭載

Visual Studio Codeには、入力候補を自動で表示してくれる機能が搭載されています。

経験豊富なエンジニアやプログラマーの方であれば問題ありませんが、特に初心者の方の場合は、プログラムやコードを忘れてしまうケースも多いです。

そのようなときに、自動で候補を出力してくれれば、都度コードを検索する手間を省くことができます。

Visual Studio Codeの入力候補の自動表示機能は、スマートフォンで特定の内容を検索する際に、検索結果に自動で候補を表示してくれる機能と似ています。

Visual Studio Codeのインストール

ここまで、Visual Studio Codeの概要や特徴を解説してきました。

実際に、Visual Studio Codeを使ってみたい方は多いのではないでしょうか。

ここからは、Visual Studio Codeをインストールする方法をご紹介しますので、ぜひ参考にしてください。

Mac

macOSでVisual Studio Codeをインストールする場合、手順は非常に簡単です。

まずは、Visual Studio Codeの公式サイトから、Mac用のZipファイルをダウンロードします。

ダウンロードが完了したら、Zipファイルをダブルクリックで開きましょう。

すると、Visual Studio Code.appというファイルがMac内に作成されます。

Visual Studio Code.appを、Macのアプリケーションフォルダに移動させれば、すぐにmacOSでVisual Studio Codeを使うことが可能です。

Windows

次に、WindowsでVisual Studio Codeをダウンロードする方法です。

対応OSはWindows 10/11（64bit）となっています。

Macと同様に、まずは公式サイトにアクセスします。

公式サイトの一番上部に、開発環境を選択できるプルダウンメニューが表示されています。

その中から、自分のWindows環境に合ったインストーラーを選択し、ダウンロードしましょう。

なお、「Other platforms」を選択することで、インストーラーの有無を変更することも可能となっていますが、初めてVisual Studio Codeを使う方は特に気にする必要はありません。

また、ダウンロードする際に「使用許諾契約書」が表示されるので、不安な場合は必ず一読しておくことを推奨します。

ダウンロードが完了したら、Macと同様に、いつでもWindowsでVisual Studio Codeを使えるようになります。

Visual Studio Codeの使い方

ここまで、Visual Studio Codeのインストール方法などをご紹介しました。

ここからは、実際にインストール後に、Visual Studio Codeを使う方法を解説します。

日本語化する

Visual Studio Codeは、多言語に対応しているテキストエディターです。

Microsoft社が開発しているということもあり、インストールした時点のデフォルト設定では、英語が設定されています。

しかし、Visual Studio Codeを日本語化して使いたい方は多いかと思います。

そのような場合は、はじめにVisual Studio Codeの拡張機能を追加する必要があります。

「Japanese Language Pack for VS Code」という拡張機能があるので、ダウンロードしましょう。

拡張機能は、Visual Studio CodeのTOPページにある「Extensions」を選択すればダウンロードできます。

もしくは、Windowsであれば「Ctrl+Shift+X」のショートカットを、Macであれば「⇧⌘X」がショートカットになります。

Japanese Language Pack for VS Codeをダウンロードすると、一度Visual Studio Codeを再起動する必要がある点には注意が必要です。

再起動が完了すれば、Visual Studio Codeを日本語化して使えるようになります。

フォルダとファイルを開く

次に、Visual Studio Codeで修正したいフォルダやファイルを開く方法です。

基本的には、自分のパソコンに入っているファイルを開くか、Visual Studio Codeで新しいフォルダを作成するかの2択になるかと思います。

どちらの場合であっても、Visual Studio Codeのアクティビティバーから、まずは「フォルダーを開く」をクリックしましょう。

アクティビティバーは、Visual Studio Codeのサイドバーの一番上に表示されています。

フォルダーを開くと、フォルダーの中に新しいファイルを作成したり、既存のファイルを開いたりできます。

当然ながら、修正を加えたファイルは、パソコン上にいつでも保存可能です。

実際にコードを記述する

任意のフォルダやファイルをVisual Studio Codeで作成したら、実際にコードを記述してみましょう。

他のテキストエディターと比較して容量が軽いため、初めてコードを記述する方は、スピード感に驚くかもしれません。

また、ここでは初めてプログラミングを行う方に向けて解説するため、Visual Studio CodeでHTMLを記述する方法をご紹介します。

そのまま、Visual Studio Codeのエディター上でHTMLを記述しても良いのですが、「Emmet」を使うと便利です。

Emmetとは、Visual Studio CodeでHTMLとCSSを記述する際に、コードの記述を補完してくれる機能のことを指します。

省略できるプロパティの数が増えるため、HTMLを記述する際のスピードがぐっと速くなります。

Visual Studio CodeでHTMLを記述したら、Windowsは「Ctrl+S」、Macは「⌘S」のショートカットで保存可能です。

各種便利機能を使う

最後に、Visual Studio Codeの便利機能を使ってみましょう。

Visual Studio Codeには、インテリセンスという便利機能が搭載されています。

インテリセンス機能とは、記述の途中で完成時点のコードを予測し、自動的に候補を出力してくれる機能のことを指します。

HTMLやCSSに限らず、あらゆるプログラミング言語に対応しているのが魅力的なポイントです。

他にも、マルチカーソル機能が搭載されています。

マルチカーソル機能は、複数の箇所を同時に修正したい場合に、カーソルがマルチになり、同時に修正できる機能を指します。

さらに、GitHub Copilotを有効にすることで、AIによるコード生成やチャットベースの質問応答、エージェント機能による自動修正など、高度な開発支援を受けることもできます。

他にも、Visual Studio Codeには拡張機能も含めて非常に多くの機能が用意されているため、随時活用してみてください。

まとめ

本記事では、Visual Studio Codeについて解説をしてきました。

Visual Studio Codeは、多くのエンジニアやプログラマーに使われているエディターツールです。

軽量かつ、使用するにあたって料金はかからないため、企業から個人のフリーランスまで、幅広く導入されています。

Visual Studio Codeは軽量であることから、プログラムを記述する際にストレスがありません。

当然ながら、できる限り早く記述できたほうが開発コストも削減できるため、まさにエンジニアやプログラマーのために作られたエディターツールだと言えます。

まずは、Visual Studio Codeをインストールすることから始めてみてはいかがでしょうか。