Visual Studio Codeとは？基礎知識や基本の使い方を解説

本記事では、Visual Studio Codeについて、基礎知識やインストール方法、基本的な使い方を中心に解説します。

Visual Studio Codeとは

Visual Studio Codeは、Microsoftの提供するコードエディタで、「VSCode」と略称で呼ばれることもあります。2015年にリリースされた比較的新しいツールですが、人気があり、今では開発用エディタの定番となっています。オープンソースに基づいて構築されているため誰でも無償で利用できます。元々プログラマ向けに開発されましたが、その機能性の幅広さから、プログラム開発だけでなくWeb制作やテキスト原稿の執筆・編集にも利用されています。

Visual Studio Codeの特徴

Visual Studio Codeにはさまざまな特徴があります。

OSSで進化スピードが速い

Visual Studio Code はOSS（オープンソースソフトウェア)に基づいて開発されているため、無償で利用できます。また、コミュニティも活発で世界中の開発者による開発も高頻度で行われています。これによって品質向上や、機能追加、問題の修正、サポートの充実が実現します。

軽量で高速

Visual Studio Codeは、主要機能に絞って開発され、そのほかについては拡張機能として提供されています。また、「Electron」や「TypeScript」で開発されているため、コードエディタに求められる機能が一通り備っているにも関わらず、動作も軽量で高速に動作します。

クロスプラットフォーム対応

Visual Studio Codeは、Windows 、macOS 、 Linuxと、主要なプラットフォームをサポートしています。

拡張機能が豊富

Visual Studio Codeは、前述の通り、主要機能以外は拡張機能として提供しています。目的に応じて必要な分だけ言語やバージョン管理システム、デバッグツールなど、機能を追加し、使い勝手がよくなり、利用領域が拡充します。標準ではPythonやPHPでデバッグ作業は利用できませんが、「Python（ms-python.python）」や、「PHP Debug（felixfbecker.php-debug）」をインストールすることでデバッグが可能になります。

多くの言語でシンタックスハイライトが使える

Visual Studio Codeでは、PythonやPHPなど、主要な言語でシンタックスハイライトに標準対応しています。多くの言語でシンタックスハイライトを利用できます。シンタックスハイライトとは、ソースコードの構造を視覚的に区別できるよう表示で示す機能です。

Visual Studio Codeを利用する上での注意点

機能が限定されている

Visual Studio Codeはコードエディタであり、Visual StudioやEclipseといったIDEに比べて標準で搭載されている機能が限定されています。拡張機能を追加すれば利用領域も拡充しますがそれには個別のインストールが必要になります。

学習コストがかかる

拡張機能が豊富な分、個々に学習する必要があり、学習コストがかかってきます。

一部有料の拡張機能やアドオンがある

Visual Studio Codの拡張機能は基本的に無料で提供されていますが、一部有料版があります。また、外部サービスやAPIで料金が発生するケースもあります。料金については各ドキュメントで確認しましょう。

Visual Studio CodeとVisual Studioの関係

名前は似ていますが、この2つは全く別物です。Visual Studio Codeは、Visual Studioのエディタ部分を切り取ってス独立させたものと位置付けられます。Visual Studioは1997年にリリースされた歴史の深い統合開発環境（IDE）です。Visual StudioもVisual Studio Codeと同様にMicrosoft社が提供しています。2005年に無償版のExpress Edition、2014年には無償版のCommunityがリリースされましたが、利用に一定の制限があり、商用利用にはライセンス購入するのが一般的です。そのため機能面は充実している半面、それだけハードウェアリソースが必要になります。

インストール方法

Visual Studio CodeはWindows、macOS、Linuxで利用できます。まず、システム要件を確認しましょう。公式では4GB以上のRAMが必要とされていますが、現在出回っている一般的なPCであれば問題なく作動するでしょう。また、OSのサポート状況については以下の表に示します。古いOSを使用している場合は注意が必要です。

Windows

1. ダウンロードページにアクセスし、インストーラをダウンロードする
2. インストーラをダブルクリックして開く
3. 使用許諾契約書の同意画面が表示されるので「同意する」にチェックして「次へ」ボタンをクリックする
4. インストール先に任意の場所を指定し「次へ」ボタンをクリックする
5. スタートメニューフォルダを指定して「次へ」をクリックする
6. 追加タスクを選択して「次へ」をクリックする
7. 設定内容を確認して「インストール」する

2. Windowsではx64（64bit）とARM（64bit）の2つのアーキテクチャ向けにインストーラが用意されています。x86アーキテクチャは32ビットのシステムとソフトウェアに、x64アーキテクチャは64ビットのシステムとソフトウェアに対応します。インストール方法に沿ってインストーラをダウンロードしますが、User InstallerまたはSystem Installerがおすすめです。

6. 追加タスクの選択画面が表示されるので、5つのチェックボックスのうち、追加したいタスクを選びます。たとえば、「デスクトップ上にアイコンを作成する」という項目を選択すると、デスクトップ上にVisual Studio Codeのアイコンが表示されるようになります。また、「PATHへの追加」という項目を選択すると、デスクトップ上にショートカットが表示されます。

macOS

1. ダウンロードページにアクセスし、インストーラをダウンロードする
2. ダウンロードしたファイルを解凍する
3. 使用許諾契約書の同意画面が表示されるので「同意する」にチェックして「次へ」ボタンをクリックする
4. インストール先に任意の場所を指定し「次へ」ボタンをクリックする
5. スタートメニューフォルダを指定して「次へ」をクリックする
6. 追加タスクを選択して「次へ」をクリックする
7. 設定内容を確認して「インストール」する

基本的な操作方法

続いて、Visual Studio Codeの基本的な使用方法について紹介します。

起動

Visual Studio Codeを起動するとエディタ画面になるので左上の「ファイル」メニューから「新規ファイル」項目を選択して新しいファイルを作成します。プログラミング言語の選択は右下の言語表示部分をクリックし、一覧から使用する言語を選択します。

コードの記述

コードを記述します。Visual Studio Codeにはシンタックスハイライトや自動補完機能があるので効率的にコーディングできます。

保存と実行

コードの記述後、ファイルを保存します。ファイル名と拡張子を入力して保存して閉じましょう。その後、ターミナルを開き、コードを記入したファイルを実行します。たとえば、Pythonの場合、「ファイル名.py」と入力して実行します。

拡張機能のインストール

Visual Studio Codeは、インストール時にはコア機能しか備わってないため、機能を拡張するには、それぞれインストールする必要があります。左側のアイコンパネルにある「拡張機能」をクリックし、検索バーに追加したい機能の名前を入力して検索します。目的の拡張機能があったら「インストール」ボタンを押し、インストールすします。

初期設定

Visual Studio Codeを利用する上で大事な初期設定を行います。

ワークスペースの設定

ワークスペースの設定を行うと、タブのサイズ変更やカラーデコレータの非表示設定ができます。

Visual Studio Codeの日本語化

日本語化は、拡張機能のインストールで実現できます。※インストール方法によっては、インストール時にすでに日本語に設定されている場合があります。

1. 起動後にメニューから「View」＞「Command Palette」を選択する
2. コマンドパレットに「Display」と入力し、「Configure Display Language」項目を選択する
3. コマンドパレットにSelect Display Languageと表示されるので、候補から「Install additional languages」を選択する
4. 拡張機能一覧が表示されるので、日本語を選択する
5. 「Install」ボタンをクリックする
6. インストール完了後、再起動するよう促されるので画面右下の「Restart」ボタンをクリックする
7. 再起動後する

カラーテーマの設定

カラーテーマを設定するとエディタの見た目を変えられます。

1. 上部メニューの「コード」＞「基本設定」＞「配色テーマ」を選択する
2. 配色テーマを選択すると適用される
3. カラーテーマをインストールし、配色テーマの一番下の「その他の色のテーマをインストール」を選択する
4. 左側にインストールできるカラーテーマが一覧で表示されるので希望するテーマを選択する
5. テーマのインストール画面に切り替わったら「インストール」ボタンをクリックする
6. インストール画面でテーマを設定すれば反映される

開発言語の拡張機能のインストール

本記事ではPythonとします。

1. 拡張機能アイコンの検索フォームに「python」と入力する
2. 「Python」項目をクリックし、インストールボタンをクリックする

インストール完了後、pythonファイルを作成・編集・実行し、ターミナルを確認します。コードが意図したように出力されていれば、Pythonが正常にインストールされたことがわかります。

Visual Studio Codeはブラウザでも利用できる

Visual Studio CodeはWebブラウザ版もありインストール不要で使用することも可能です。「https://vscode.dev/」にアクセスするだけで利用できます。また、Google ChromeやMicrosoft Edgeであれば「File System Access API」を利用することでローカルファイルの読み書き・編集も可能です。

拡張機能に関してもほとんどのUIカスタマイズ機能を利用できます。ただし、OS固有に依存する拡張機能は利用できません。また、GitHubの機能も統合しているので拡張機能を利用できます。

Visual Studio Codeを利用する上で便利なショートカットキー

Visual Studio Codeを利用する上で便利なショートカットキーを紹介します。WindowsとmacOSでは操作が異なるので適切なキーを押しましょう。

コマンドパレットの呼び出し

コマンドパレットは拡張機能のインストールに用いられます。

Windows：Ctrl+Shift+P
macOS：Command+Shift+P

新規ファイルを開く

Windows：Ctrl+N
macOS：Command+N

選択行の移動

Windows：Alt+矢印キー
macOS：Option+矢印キー

ファイル内の検索

アクティビティバーの虫眼鏡アイコンをクリックし、検索フォームから検索することもできますが、ショートカットキーを利用すると手間が省けます。

Windows：Ctrl+F
macOS：Command+F

※「Ctrl+Shift+J」「Command+Shift+J」で詳細検索も可能です。

単語選択

このショートカットキーを用いることで選択した単語と同じ単語を一括で任意の単語に置き換えられます。

変更する単語にカーソルを当て、ショートカットキーを押します。

Windows：Ctrl+Shift+L
macOS：Shift＋Command＋L

ITスキルを身につけるには？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。