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」は、Microsoft社が2015年にリリースした、無料で使用できるコードエディタです。プログラムの処理を追うことができるデバッグ機能など、開発の際に不可欠な機能があり、プログラミングを行う際に役に立ちます。

また「Visual Studio Code」は、「C#.NETFramework」のようにMicrosoft社のフレームワークのみならず、「Java」や「Python」などMicrosoft社以外により開発された言語についても対応しており、幅広く活用できる点がオススメです。

さらに、Visual Studio Codeを使うとソースコードが読みやすくなるため、作業効率が向上します。「Visual Studio Code」を活用することで、開発に関わる多くの恩恵を受けることができるため、プログラムを書く際に重要なツールといえるでしょう。

Visual Studio Codeの特徴を解説！

「Visual Studio Code」が、プログラミングに向いているといわれる理由は、メモ帳などのエディタにはない、プログラミングに特化した特徴を数多く持っていることが挙げられます。ここでは、「Visual Studio Code」の主な特徴を4つ紹介します。

拡張機能が豊富にある

「Visual Studio Code」には多くの拡張機能があります。たとえば、拡張機能のひとつである「Code Spell Checker」という英語スペルのチェックをする機能を使うことで、プログラミングにおいて変数名や関数名で使用する英語スペルのチェックをすることが可能です。

このような拡張機能を活用することで、自分のプログラミングの目的にあったカスタマイズができ、「Visual Studio Code」をさらに便利なエディタとして活用できます。

macOS、Windows、Linuxと主要なOSで使える

エディタソフトによっては、対応できるOSが限定されます。しかし、「Visual Studio Code」はmacOS、Windows、Linuxと主要なOSで使えるため、OSを問わずどのような開発環境においても、使い慣れたVisual Studio Codeを使うことが可能です。

OSが違うと改行コードなども変わりますが、複数のOSに対応しているエディタには汎用性があります。このようにVisual Studio Codeは、複数のOS上の幅広い環境で活用することが可能です。

Gitを使ってソースコードの管理ができる

Gitとはソースをバージョンや更新ごとに管理するツールです。ファイルサーバーによりソースを管理する場合は、上書きでしかソースを更新できません。そのため、更新するたびにファイルを別途保存しなければソースをさかのぼることができません。

しかし、Gitで管理すれば更新にあわせていくつものバージョンに分けてソースを保管できるので、ソースの状態を細かく管理できます。

「Visual Studio Code」は、Gitと簡単に連携できるため、バージョンごとに分けたソースの保管が可能です。Gitでソースコードを管理すると管理が楽になるため、「Visual Studio Code」とあわせて使い方を習得するのがおすすめです。

ソースコードの入力補助機能がある

「Visual Studio Code」には、入力補助機能があるため、ソース入力をサポートしてもらえます。たとえば、プログラミングの際に、処理ごとに始まりと終わりをカッコで閉じるという、コーディング上の決まりを持つプログラミング言語があります。

このような場合に、ソースコードの入力補助機能により、カッコの自動入力が可能です。自動でソースコードが補完されることにより、人が書くソースコードの誤りを減らすことが可能です。さらに入力補助機能があることで、プログラミングをする速度を向上させることにもつながります。

Visual Studio Codeのシステム要件を確認しよう

Visual Studio Codeをインストールする前に、各OSで求められるシステム要件を確認する必要があります。確認した結果、OSのバージョンが古いなど、システム要件を満たさないことがわかった場合、適宜バージョンアップをするなどして対応しましょう。

Windowsでは、Windows8.0、8.1、10、11に対応しており、macOSは、OS X El Capitanで10.11以降に対応しています。Linuxの場合、ディストリビューションによる制限が細かいですが、Ubuntu Desktop、Debian、Red Hat Enterprise Linuxの最新のバージョンであれば、基本的にVisual Studio Codeの使用が可能です。CentOSのように開発が終了しているディストリビューションでも、7以降であれば動作します。

Windows向けのVisual Studio Codeのインストール方法

ここからは、Windowsでの「Visual Studio Code」のインストール方法について解説します。インストール方法は、「Visual Studio Code」のダウンロード、インストール、起動の確認の3段階にわけられます。

ここでは、インストール方法の各段階に沿って説明するので、実際にWindowsに「Visual Studio Code」をインストールするときの参考にしてください。

ダウンロード

「Visual Studio Code」のダウンロードは以下のリンクより行います。

Download Visual Studio Code – Mac, Linux, Windows

ダウンロードの手順自体は簡単で、コマンドプロンプトを扱うことなく、操作が完結します。

前述のURLより、Windows向けの「Visual Studio Code」をクリックし、しばらく待つとダウンロードが完了です。デフォルトでエクスプローラー上のダウンロードという名前のフォルダの中に、「Visual Studio Code」のsetup用のexeがダウンロードされています。

インストール

「Visual Studio Code」のインストールは、ダウンロードで取得したsetup用のexeを用いて行います。setup用のexeを実行すると、インストールの画面が立ち上がるはずです。基本は画面に表示される内容を確認し、理解したら「次へ」で進むだけでインストールが完了します。

使用許諾のようにしっかり確認すべき内容もあるため、初めてインストールされる方は、とくに画面に表示される内容をもれなく確認しながらインストールを進めてください。

起動の確認

インストールが完了したら、スタートメニューの中にアプリケーションで「Visual Studio Code」が選択できるようになるため、実際に起動してみましょう。環境やインストールにとくに問題がなければ、Visual Studio Codeはエラーなく起動できます。起動できたら、いよいよVisual Studio Codeを活用した作業が可能です。

万が一正常に起動できなかった場合は、まずは端末の再起動のように簡単にできる対処法から試してみて、状況によってはVisual Studio Codeの再インストールも検討してみてください。

macOS向けのVisual Studio Codeのインストール方法

ここからはmacOSでのVisual Studio Codeのインストール方法について、解説します。Windowsと同様に、Visual Studio Codeの「ダウンロード」、「インストール」、「起動の確認」の3段階で行われます。

ダウンロード

macOS向けの「Visual Studio Code」のダウンロードは以下のリンクより行います。(Windows向けのダウンロードと同じリンク先です)

Download Visual Studio Code – Mac, Linux, Windows

「Visual Studio Code」をダウンロードする前に、プラットフォームがUniversalであるか、Intel　Chipであるか、Apple Siliconであるかを確認する必要があります。プラットフォームにより、ダウンロードすべきzipが異なりますので、適切なzipをダウンロードしてください。

Windowsでも同じですが、ダウンロードをする際には時間がかかる場合があるため、時間に余裕をもって行うことをおすすめします。

インストール

macOS向けの「Visual Studio Code」のインストールは、ダウンロードで取得したzipを用いて行います。zipを解凍するとappファイルが取得できるため、appファイルをアプリケーションフォルダに配置しましょう。

これだけの操作でインストールは完了です。

起動の確認

インストール時に、appファイルをアプリケーションフォルダに配置しているため、Launchpadから「Visual Studio Code」を起動できます。ターミナルのコマンドライン操作に慣れている方は、ターミナルから「Visual Studio Code」を起動することも可能です。

どちらの起動法にしても、起動は簡単な操作で行えます。また、「Visual Studio Code」の起動後に日本語の拡張機能をインストールすることで、次回以降日本語の状態で起動させることも可能です。

Visual Studio Codeの基本的な使い方とは？

ここからは「Visual Studio Code」の基本的な使い方を解説します。インストール後に、日本語の設定を行うフェーズがいくつかあるため、まず日本語の設定方法について理解しておきましょう。ファイル操作を行う機会も多いため、フォルダの開き方と、便利なEMMETの使い方をあわせて説明します。

日本語の設定方法

「Visual Studio Code」をインストールした後、英語表記になっている場合は、日本語表記に変更できます。「Visual Studio Code」の左端に表示されているメニューの中の、拡張機能より「Japanese Language Pack for VS Code」をインストールしましょう。

拡張機能を探す際には、正式名称まで入力しなくても一部の名称を入力することで検索でき、「Japanese Language Pack for VS Code」の場合は「Japan」で検索が可能です。インストール後にVisual Studio Codeを再起動をすれば、日本語化の設定が反映されます。

フォルダの開き方

フォルダを開くには、ファイルメニューよりフォルダを開くを選択し、開きたいフォルダを選択します。フォルダを選択した後、「このフォルダー内のファイルの作成者を信頼しますか？」というメッセージが表示される場合、問題なければ「はい、作成者を信頼します。」を選択してください。

そして、「Visual Studio Code」のエクスプローラー上に選択したフォルダ内が表示されるため、「Visual Studio Code」内でフォルダやファイルの操作を行えるようになります。

EMMETの使い方

EMMETを使えば、HTMLやCSSを省略して記載できます。たとえば、htmlファイルのようにHTML表記に対応しているファイル上で、divと記載しTabキーを押すと、<div></div>とタグが入力される仕組みです。ほかのHTMLも同様で、一部のHTMLを記載しTabキーを押すだけでタグが入力されます。

CSSの場合も同様で、mb10と書きTabキーを押すと、margin-bottom:10px;と入力されます。記述するmb10はmarginのm、bottomのb、10pxの10を省略した形です。他のCSSも同様の書き方で省力できますが、HTMLの場合より記述する内容に慣れが必要でしょう。

EMMETを使いこなすことで、入力する負担を減らすことができるため、効率よくプログラミングができます。プログラミングを本格的に始める場合は、積極的に活用しましょう。

Visual Studio Codeのおすすめ拡張機能5選

「Visual Studio Code」には、多くの拡張機能があります。ここでは、拡張機能の中でもおすすめのものを5つ紹介します。自分に合った拡張機能を選択し、設定しておくことでより効率的にプログラミングを行えるでしょう。

Japanese Language Pack for Visual Studio Code

「Japanese Language Pack for Visual Studio Code」は、Visual Studio Codeを日本語表記にできる機能です。

簡単な単語レベルの英語であれば英語表記のままでも解読できますが、専門要素も加わる英語の場合は、解読できない場合や、間違った解読をしてしまう場合もあり得るため、日本語表記への変更がおすすめです。

Material Theme

「Material Theme」を使うと、 Visual Studio Code のテーマをお好みのテーマに変更できます。数多くのテーマがあるため、実際にテーマを選んでみて好みに合ったテーマを選びましょう。

たとえば、背景を黒にしたテーマだと、背景が黒い分ソースコードはライトアップされたように見えます。単に色の好みではなく、ソースコードの色にフォーカスしたテーマにすることも可能です。さまざまなテーマを適用し、作業しやすいものを見つけましょう。

Live Server

「Live Server」は、ブラウザを自動的に再読み込みする機能です。プログラミングをしているとき、ソースコードを更新しただけではブラウザ上にコードの変更は反映されないため、ブラウザを再読み込みしてコードの変更内容が反映させる必要があります。

この再読み込み作業は、1回あたりの作業量は少ないですが、こまめにソースコードを更新すると結構な手間になる可能性があります。そのため、ブラウザが自動的に再読み込みされれば、コードの変更が自動的にブラウザに反映されるため、作業時間の短縮につながるのです。

Markdown All in One

「Markdown」はHTMLを素早く記述できるマークアップ言語のことです。Markdown All in Oneを使うと、Markdownのショートカットキーを使ってプログラミングすることが可能となります。

また、Markdownには入力補助機能もついています。この機能があることでさらに素早く記述できるため、Markdownをよく使う方は、Markdown All in Oneを活用してさらなる効率化を図れるでしょう。

Path Autocomplete

「Path Autocomplete」はパス情報を補完する機能です。プログラミングをする中で、パス情報は比較的間違った記述をしやすい箇所です。また少しでも間違ったパス情報を書いてしまうと動作時に対象のパスは動かず、エラーが発生する原因にもなります。

そこで、Path Autocompleteを活用すると、より確実にパス情報を設定できるため、人的ミスの発生を防ぐことが可能です。たとえばsrcのように、HTMLでパス情報を指定できる箇所に対して使います。

拡張機能の追加方法

拡張機能の追加方法は、「Visual Studio Code」の左端に表示されているメニューの中の拡張機能より、インストールしたい拡張機能を選んでインストールを行います。インストール後に、「Visual Studio Code」を再起動すると拡張機能が追加されているため確認してみてください。

インストールしたい拡張機能が決まっていない場合でも、インストール可能な拡張機能の機能説明を読むなどして、自分に合いそうな拡張機能を探してみることもおすすめです。拡張機能の一覧の中では、拡張機能ごとの平均評価を見ることもできるため、追加する拡張機能を選ぶひとつの参考として使えます。

Visual Studio Codeで開発環境を快適にできる

Visual Studio Codeを活用することで、快適にプログラミングを行えます。インストールも簡単なため、Visual Studio Codeの環境設定にも時間を要しません。

自分に合った拡張機能を追加しながら活用することで、自分用にカスタマイズされた最適なエディタになります。無料で使えて、多機能で、便利なコードエディタ、Visual Studio Codeを使って精度の高いプログラミングをしてみてください。