Visual Studio Code（VS Code）とは？インストール方法・使い方を解説 - WEB制作スキルブログ

この記事の監修者

三谷将大

フリーランスエンジニア/WEBデザイナー/WEBマーケター

1997年愛知出身。
業界5年以上。実務経験後に独立し、30社以上のホームページ制作やマーケティング支援を行っている。

見出し

Visual Studio Codeとは

Visual Studio Codeの概要

Visual Studio Code（VS Code）は、Microsoftが提供するオープンソースのコードエディタです。プログラミング初心者からプロフェッショナルまで幅広いユーザーに利用されており、多数のプログラミング言語に対応しています。エディタ自体が軽量でありながら、拡張機能を追加することで強力な統合開発環境（IDE）としても機能します。

Visual Studio Codeは無料？

VS Codeは無料で利用できるコードエディタです。オープンソースであるため、誰でも無償でダウンロードして使用することができます。また、拡張機能やテーマも多くのものが無料で提供されています。

Visual Studio Codeのメリット

多機能：コードを一部記述するだけで補完してくれる機能、デバッグ、Git統合など、多くの機能を標準で備えています。
拡張性：マーケットプレイスから多種多様な拡張機能を追加でき、エディタを自分好みにカスタマイズ可能です。
軽量：動作が軽快で、比較的低スペックのPCでも快適に使用できます。
クロスプラットフォーム：Windows、macOS、Linuxに対応しており、どの環境でも同じ操作感で利用できます。

Visual Studio Codeの入手・インストール方法

macOSでの手順

VS Codeの公式サイトにアクセスし、「Download for macOS」をクリックします。

ダウンロードしたZIPファイルを展開します。
展開された「Visual Studio Code」アプリケーションをアプリケーションフォルダにドラッグ＆ドロップします。

アプリケーションフォルダから「Visual Studio Code」を起動します。

Windowsでの手順

VS Codeの公式サイトにアクセスし、「Download for Windows」をクリックします。

ダウンロードしたインストーラー（.exeファイル）を実行します。

インストーラーの指示に従い、インストールを完了させます。

インストールが完了したら、スタートメニューから「Visual Studio Code」を起動します。

VSCodeの日本語化

VS Codeは、多言語対応しており、日本語化も簡単に行えます。以下の手順で日本語化が可能です。

1. VS Codeを起動し、左下の「Extensions」アイコンをクリックします。

起動が行えたら左下の「Extensions」アイコンをクリックします。こちらで各種拡張機能からインストールできます。

2. 検索バーに「Japanese Language Pack for Visual Studio Code」と入力します。

検索バーから「Japanese Language Pack for Visual Studio Code」を検索し、「install」をクリック

2. 再起動後、インターフェースが日本語に切り替わります。

インストールが完了すると、VS Codeを再起動するように求められます。再起動後、インターフェースが日本語に切り替わります。

使い方・基本操作

操作画面の解説

キャプションバー

キャプションバーには、現在開いているファイル名やウィンドウの操作ボタン（最小化、最大化、閉じる）が表示されます。

アクティビティバー

アクティビティバーは、画面の左側に位置し、エクスプローラー、検索、ソース管理、デバッグ、拡張機能などの主要な機能にアクセスするためのアイコンが並んでいます。

プライマリサイドバー

プライマリサイドバーは、アクティビティバーの隣に位置し、選択したアクティビティ（例えば画像ではエクスプローラー）の詳細情報を表示します。
ちなみにですが、エクスプローラーでは、フォルダごと開いておけばここでファイルを作成・開くことができて便利です。

セカンダリサイドバー

セカンダリサイドバーは、プライマリサイドバーの反対側に位置し、補助的な役割を担います。
追加のパネルやウィジェットを表示したり、プライマリバーの項目を移動することもできます。

エディター

VSCodeのメインでとなる箇所「エディター」になります。開いたファイルがエディター内に表示され、ファイルの編集を行うことができます。

基本的な使い方

フォルダーを開く

メニューバーの「ファイル」から「フォルダーを開く」を選択します。

開きたいフォルダーを選択し、「フォルダーの選択」をクリックします。

ファイルを作成する

エクスプローラーのサイドバーでフォルダ名にカーソルを当てるとアイコンがいくつか表示されます。
そこで画像のとおり「新しいファイル」アイコンをクリックします。

ファイル名の入力欄が表示されるので、新しいファイルの名前と拡張子を入力し、Enterキーを押します。

Emmet機能を使う

Emmetは、HTMLやCSSのコードを素早く書くためのツールです。
例えば、「HTML:5」と入力するとhtmlタグやmetaタグなどのhtmlファイルでよく使用する書き出しを生成してくれたり、「ul>li*5」と入力すると5つのリスト（ulタグ＆liタグ）が生成されます。

その他にもコマンドパレッド（ctrl + shift + P）から様々な便利なEmmet機能が使用できます。
生成される内容を修正・変更できるくらいには理解した上で、積極的に使用して効率をあげていきましょう。

ファイルの保存

メニューバーの「ファイル」から「保存」を選択します。
または、Ctrl + S（Windows）またはCmd + S（macOS）のショートカットキーを使用します。

ファイルを開く

メニューバーの「ファイル」から「ファイルを開く」を選択します。
開きたいファイルを選択し、「開く」をクリックします。

もしくはファイルをドラッグアンドドロップでも開くことができます。

まとめ

Visual Studio Codeは、多機能でありながら軽量で使いやすいコードエディタです。
多くのプログラミング言語に対応し、拡張機能によって自分好みにカスタマイズできるため、初心者からプロフェッショナルまで幅広いユーザーに適しています。
ユーザーも国内では多くいるため、操作がわからないときや困ったときに解決しやすいという点も魅力のひとつです。
これからWEB制作やWEB開発などでプログラミングを始める方は、ぜひこの記事を参考に、まずはインストールと日本語化を行い、基本操作を習得してみましょう。