【Visual Studio Code】使い方/インストール方法を解説！

本記事ではVisual Studio Codeの使い方・インストール方法を解説します。まず初めに、Visual Studio Codeとはどの様なソフトかを解説しますので、Visual Studio Codeとは何まだ分からない方は参考にしてください。

また、Visual Studio Codeをすでにインストールしていても使い方がわからない方も多いかと思います。Visual Studio Codeの入手先からインストール方法、特徴や使い方、拡張機能の使い方、注意点などの解説も行いますのでご参照ください。

はじめにVisual Studio Codeとは何かVisual Studio Codeの概要を解説します。Visual Studio Codeの使い方や入手先以前にVisual Studio Codeとはどの様なソフトかわからない方は、本項から読み進めてください。

また、Visual Studio Codeとはどの様なソフトか概要を解説時に、現在利用しているテキストエディタなどがあればそれと機能や特徴を比べてもVisual Studio Codeとはなにか理解するのに役立ちますので準備してください。

Visual Studio Codeとは、多くのプログラミング言語に対応するテキストエディタです。そのため、Visual Studio Codeを利用すれば言語ごとにテキストエディタをインストール必要はなくVisual Studio Codeにまとめることができます。

また、Visual Studio Codeは多くのプログラミング言語の他に文字コードも複数設定する方法や拡張機能をりようする方法がありますので複数の言語を利用するエンジニアにはVisual Studio Codeは最適なテキストエディタと言えるでしょう。

Visual Studio Codeとは、多くのプログラミング言語に対応するテキストエディタだと解説しましたが、まずテキストエディタとは何か分からない方もいらっしゃるかもしれませんので、テキストエディタについて解説します。

テキストエディタとは、プログラミングを行う際にプログラムを記述するためのソフトのことを言います。テキストエディタには対応した言語の特定の関数や命令をグラフィカルに表示したり、プログラミングを補助する機能があります。

実は、Windowsに標準搭載されているメモ帳でもC言語やJavaなどのプログラムソースファイルを開くことができますが、メモ帳には一切のプログラミング補助機能がありません。

テキストエディタで作成したプログラムはコマンドラインなどを用いてコンパイルしなければ動作させることができません。その点、IDEを利用すればコンパイラも統合されているので非常に便利です。

しかし、コンパイラなどを搭載している関係でテキストエディタと比べて、起動や動作に時間がかかるソフトもあります。自分の用途に合わせてテキストエディタとIDEを使い分けるのがよいでしょう。

Visual Studio Codeは非常に高機能なテキストエディタですので、単純なテキストエディタとIDEの中間を求めている方に最適なテキストエディタです。

Visual Studio Codeの特徴をご紹介します。Visual Studio Codeとは、Visual Studio Codeという名前にVisual Studioとついている名前から分かる通りマイクロソフトが開発を行ったテキストエディタです。

マイクロソフトはすでに圧倒的なシェアを占めているIDEである、Visual Studioを開発していたにもかかわらずなぜVisual Studio Codeをリリースしたのでしょうか？また、すでにVisual Studioを利用している方も多いかと思います。

Visual Studio Codeの特徴を知れば、Visual Studio CodeとVisual Studioの使い分けやなぜVisual Studio Codeがリリースされたのかを理解することができます。Visual Studioをすでに利用している方もVisual Studio Codeの特徴を参考にしてください。

他のテキストエディタと比較したVisual Studio Codeの特徴を解説します。Visual Studio Codeの特徴を正しく理解して、自分の用途に適したテキストエディタを利用しましょう。

1つ目の特徴を解説します。Visual StudioはIDEですが、Visual Studio Codeはテキストエディタです。そのため、コンパイラやデバッガ、GUIデザイナなどの開発ツールは統合されていません。よって、Visual Studio Codeは起動・動作が早いです。

しかし、Visual Studio Codeはテキストエディタですが拡張機能に対応しており対応した拡張機能をインストールすることによりデバッグ機能など通常はIDEで提供される機能を追加することができます。

そのため、場合によってはVisual StudioなどのIDEで行うような作業でもテキストエディタであるVisual Studio Codeを使ったほうが動作が早い可能性があります。

2つ目の特徴を解説します。Visual Studio Codeは、統合開発環境とは異なりテキストエディタのため、コンパイラやデバッガなどは搭載されませんが、優秀なインテリセンスや拡張機能・洗礼された画面構成で構成されるため高機能です。

インテリセンスとは、コード補完やパラメーター、スタックなどのインフォ表示機能など、プログラムを記述するための補助機能のことです。Visual Studio Codeは非常に優れたインテリセンス機能を持っています。

3つ目の特徴を解説します。Visual Studio Codeは無料で利用することができます。Visual Studio Codeは無料で入手先からダウンロードでき、インストールして利用することができるテキストエディタです。

Visual Studio Codeはオープンソースであるvccodeをもとに作成されていますが、Visual Studio Codeのライセンスはマイクロソフトソフトウェアライセンス条項によりライセンスされています。オープンソースではありません。

Visual StudioとVisual Studio Codeは名前が似ており、どちらもマイクロソフトが開発を行ったプログラミングのためのソフトですが、それぞれには大きな違いがあります。

Visual StudioとVisual Studio Codeの違いとは、Visual StudioはIDEでありVisual Studio Codeはテキストエディタであることです。IDEとは統合開発環境のことです。

統合開発環境とはテキストエディタ以外にコンパイラやデバッガ、GUIデザイナなどのプログラムのテキストエディット以外にもソフトウェア作成に必要となる機能やコンパイラが統合されている開発環境です。

Visual Studio Codeの入手先と入手方法を解説します。Visual Studio Codeを入手するにはVisual Studio Codeの入手先よりダウンロードしてVisual Studio Codeを入手します。

また、Visual Studio Codeの特徴の項の3つ目の特徴で紹介したとおり、Visual Studio Codeは無料で入手先からダウンロードしてインストールすることができます。無料ですのでお手軽にVisual Studio Codeを試すことができます。

Visual Studio Codeの入手先は本項下部の、「Visual Studio Code - Code Editing. Redefined」リンクから参照できます。Visual Studio Codeの入手先は英語ですが、初心者の方にも分かるよう、入手先からのダウンロード方法を解説します。

Visual Studio Codeのダウンロード方法を解説します。Visual Studio Codeは本項下記の入手先からダウンロードしてインストールすることができますので、まず初めに本項下部のVisual Studio Code入手先へアクアセスしてください。

Visual Studio Codeの入手先へは下記リンクからアクセスできます。Visual Studio Code入手先リンクからVisual Studio Code公式サイトへアクセスしてください。

Visual Studio Codeのインストール方法を解説します。また、Visual Studio Codeインストール方法と合わせてWindowsとMacOSそれぞれのVisual Studio Codeダウンロード方法の解説も行います。

Windows版Visual Studio Codeのインストール方法を解説します。Windows版には64bit版と32bit版があり、それぞれインストールするVisual Studio Codeの実行ファイルが異なります。インストール前に自身のWindowsのビット数を確認しましょう。

Visual Studio Codeインストール前に利用中のWindowsのビット数を確認します。まず初めに、デスクトップ画面のスタートボタンをクリックします。

スタートボタンをクリックしたら、コントロールパネルを選択して、コントロールパネルを開きます。

コントロールパネルのシステムとセキュリティを開きます。

システムとセキュリティの中のシステムを開きます。

システムの中のシステムの種類に、現在利用中（Visual Studio Codeをインストールする）のコンピュータのビット数が表示されるのでそれを確認しておきます。

Visual Studio Code入手先リンクからVisual Studio Code公式サイトへアクセスしてWindowsにインストールすることができるVisual Studio Codeをダウンロードします。Download for Windows の右の矢印をクリックします。

Visual Studio Code入手先からダウンロードできるVisual Studio Codeには2種類あります。まず1つ目は通常の一般ユーザが利用する安定版です。特に理由がなければこちらをインストールします。

もう一つは開発者向けビルドパッケージです。最新版を利用することができますが、まだ不具合やバグが多く存在する可能性がありますので、その点に留意してインストールしましょう。

Windows 64ビット版をダウンロードするには、ダウンロードボタンをクリックします。

また、Windowsの下のリンクからLinux版もダウンロードすることができます。

Windows32bit版をインストールしたい方は、Other downloadsをクリックします。

Windows 32bit版のリンクが表示されるのでそこからインストールしたいインストーラを選択してダウンロードします。

ダウンロードリンクをクリックしたら、ファイルの保存先を指定します。

ファイルの保存先を指定したら、保存ボタンをクリックします。

ダウンロードが完了したらVisual Studio Codeの入手は完了です。

Visual Studio Codeのセットアップを行うにはダウンロードした、Visual Studio Codeのインストーラを実行します。

Visual Studio Codeの利用規約が出てくるので、規約を読んで同意ができたら、同意をクリックします。

同意をクリックしたら次へをクリックします。

インストール先を指定して次へをクリックします。

スタートメニューのショートカットディレクトリを指定して次へをクリックします。

Visual Studio Codeインストールオプションを選択します。デスクトップにショートカットを作成するにはその選択肢をクリックします。

Visual Studio Codeインストールオプションを選択します。ファイルコンテキストメニューから開けるようにするにはその選択肢をクリックします。

Visual Studio Codeインストールオプションを選択します。ディレクトリコンテキストメニューから開けるようにするにはその選択肢をクリックします。

Visual Studio Codeインストールオプションを選択します。Visual Studio Codeの関連付けをするにはその選択肢をクリックします。

Visual Studio Codeインストールオプションを選択します。Visual Studio CodeのPATHを通すにはその選択肢をクリックします。ただしこちらはデフォルトで選択されています。

Visual Studio Codeインストールオプションを選択したら、次へをクリックします。

Visual Studio Codeのインストール準備が完了するので、インストールをクリックします。

Visual Studio Codeのインストールが始まるので待ちます。

Visual Studio Codeのインストールが完了したら、完了をクリックします。

Visual Studio Codeが正常起動できればVisual Studio Codeのインストールは成功です。

Visual Studio CodeのMac OS版のセットアップ方法を解説します。

Visual Studio Code MacOS版もVisual Studio Code入手先リンクから入手可能です。

Visual Studio Code入手先リンクのダウンロードボタンの矢印をクリックします。

macOS欄の安定版をダウンロードしましょう。

Visual Studio Code Mac版のインストーラがダウンロードできたら、インストーラを実行してください。インストール方法はWindows版を参考にしてください。

Visual Studio Codeの画面構成を解説します。Visual Studio Codeの画面構成は非常にシンプルで洗礼されていますので、画面構成を理解して各画面で何をすることができるのか理解しましょう。

Visual Studio Codeの画面構成を解説します。Visual Studio Codeの画面構成はいくつかの画面・パネルに分かれた構成担っているのでそれぞれの画面構成を解説します。

Visual Studio Codeの画面構成はいくつかの機能を持ったパネルそれぞれ組み合わされて構成されています。それぞれの構成されているパネルに役割があります。

Visual Studio Code起動後画面左側にあるのが、アクティビティバーです。検索や拡張機能の検索などを行えます。

アクティビティバーの隣りにある画面がサイドバーです。サイドバーではエラー表示などが行われます。

Visual Studio Codeの画面上で、コードが表示されている部分がエディタです。Visual Studio Codeのメインとなる部分でここでコードを記述します。

エディタの下にあるのがパネルです。ターミナルなどの機能から構成されている部分です。

Visual Studio Code一番下に表示されているのがステータスバーです。現在のエラー・警告数や文字コードなどのステータスが表示されています。

Visual Studio Codeの主な機能を紹介します。非常に多くのテキストエディタがありますが、Visual Studio Codeをおすすめする理由にもなる部分ですので参考にしてください。

また、本項で紹介する拡張機能を利用すればテキストエディタであるVisual Studio CodeにIDEでしか提供されないようなデバッグ機能やGit連携機能を追加することも可能です。

Visual Studio Codeで利用可能な主な機能を解説します。また、一部機能については拡張機能としてパッケージをインストールする必要がありますので、拡張機能を利用する部分については拡張機能入手方法も紹介します。

Visual Studio Codeは本項で紹介するコード自動補完機能が非常に優秀であり、またシンタックスハイライトも非常に見やすくて使いやすい配色で開発されています。そのため、コードを長く入力する方に非常におすすめです。

シンタックスハイライトとコード自動補完機能を利用すれば他のIDEと変わらないような速度で開発を行うことができるかもしれません。参考にしてください。

Visual Studio Codeには多くのシンタックスハイライト機能があります。シンタックスハイライト機能のおかげで非常に分かりやすくコードを記述することができます。シンタックスハイライトはコード記述の補助機能です。

Visual Studio Codeは拡張機能を利用してデバッグ機能を加えることができます。左側のアイコンをクリックします。

利用したいデバッグ拡張機能を検索します。言語名+debugなどで調べると良いでしょう。

検索するとデバッグ拡張機能が表示されます。

対象の拡張機能をインストールします。

Visual Studio Codeには対応した言語のコード自動補完機能があります。IDEではよく見られる機能ですが、テキストエディタであるVisual Studio Codeにもコード自動補完機能があります。

Visual Studio Codeは拡張機能を利用して、Gitと連携させることができます。Visual Studio CodeにGit連携拡張機能を追加するには左側のアイコンをクリックします。

Git連携に利用したい拡張機能を検索します。

Git関連の拡張機能は非常に多くありますので自分の用途に適した拡張機能を選択します。

自分の用途に適した拡張機能を見つけたらインストールをクリックします。

Visual Studio Codeでは非常に多くの拡張機能を利用することができます。拡張機能を利用するには左側のアイコンをクリックします。

拡張機能を検索します。

追加したい拡張機能を表示します。

拡張機能をインストールします。

Visual Studio Codeでは配色テーマを変更することができます。

Visual Studio Codeの配色テーマは画面の設定から行います。

Visual Studio Codeを起動してFileをクリックします。

Performanceを選択します。

Settingをクリックします。

検索枠にthemeと入力します。

Color Themeというタイトルの項目を探してください。

ColorThemeの項目に現在のテーマが表示されているのでクリックします。

お好きな配色テーマを選択してください。

新しいテーマが適応されます。

Visual Studio Codeは日本語化パックを導入することにより日本語で利用できます。

検索ボックスに、導入したい言語パック名を入力します。大抵の言語は、利用したい言語(英語)+Languageの検索で見つけることができます。

自分の用途に適した日本語化パックを表示します。

日本語化パックをインストールします。

言語パック導入後は再起動を促されるので、Visual Studio Codeを再起動します。

言語パックが適応されます。

Visual Studio Codeを利用する際にはいくつか注意点があります。本項ではVisual Studio Codeを利用する上での注意点を解説します。特に本項で解説する注意点である文字コードの注意点は非常に重要な注意点ですので注意してください。

本項で紹介する注意点である、文字コードの注意点はVisual Studio Codeだけでなく他のテキストエディタを利用する上でも非常に重要な注意点となります。

Visual Studio Codeを利用する上で非常に重要な注意点である、文字コードについて紹介します。この注意点で解説する文字コードの設定を誤ると、文字化けなどに繋がる非常に重要な注意点です。

Visual Studio Code以外にも他のテキストエディタでも文字コードは非常に重要な注意点となります。本項で解説している文字コードについての注意点は特に注意しておきましょう。

文字化けした場合、日本語部分が正常に表示できません。

文字コードを変更するには、Fileをクリックします。

Performanceを選択してください。

Settingを選択してください。

検索ボックスに、files.autoGuessEncodingと入力します。

files.autoGuessEncodingの項目を見つけてください。

files.autoGuessEncodingにチェックを入れます。

files.autoGuessEncodingにチェックが入れば完了です。

自動的に正しい文字コードが反映されて日本語が正常に表示されます。

Visual Studio Codeは任意の文字コードを指定することができます。本項では任意の文字コードの使い方を解説します。

Performanceをクリックします。

Settingをクリックします。

検索ボックスに、files.encodeingと入力します。

File:Encodeを選択します。

ソースコードや使い方に合わせた文字コードを選択してください。

文字コードは日本語を正常に表示するためには、使い方にもよりますがUTF-8をおすすめします。