開発の定番「VSCode」とは？ インストールから使い方までを解説

開発用エディタのド定番「VSCode」を使いこなそう　第1回

　連載初回は、Visual Studio Codeのあらましを紹介し、macOSとWindowsを例にしてダウンロードとインストールを行います。日本語化を施したあと、画面構成の簡単な紹介を行い、HTMLファイルを作成する／開く／編集する／保存する／閉じるという一連の流れで基本的な使い方を紹介します。

はじめに

　Microsoftの提供するVisual Studio Code（以下、VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。

対象読者

• テキストエディタメインで開発してきた方
• Visual Studioより軽い環境が欲しいと考えている方
• Visual Sudio Codeをもっと使いこなしたいという方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。

• macOS Monterey
  • Visual Studio Code 1.69
  • Google Chrome 103

VSCodeの概要

　VSCodeとは、正式にはVisual Studio Codeといい、Microsoft社の提供する無償のコードエディタです（図1）。最初のリリースは2015年なので、まだまだ新しい開発ツールと言えます。

図1：VSCode

VSCodeとは？

　コードエディタとは、ソースコードの編集を主な目的としたテキストエディタです。テキストエディタというと、macOSのシンプルテキスト、Windowsのnotepad、あるいはたくさんリリースされているフリーソフトウェア（Atom、mi、サクラエディタなど）を連想されるかもしれません。ですがこのVSCodeは、テキストエディタとしての機能に留まらず、コードエディタとして以下のようなさまざまな特徴を持っています。

• 「拡張機能」によりさまざまな機能の追加の余地がある
• macOS、Windows、Linuxといった主要なプラットフォームをサポートする
• Git連携機能を使える
• メジャーな多くのプログラミング言語でシンタックスハイライトが使える
• スニペット機能が利用できる
• インテリセンス（補完機能）が使える
• リファクタリングが使える
• デバッグ機能を備える

　シンタックスハイライト以降の機能は、プログラミング言語によってサポート状況が異なるので、それについては後続の回で随時紹介する予定です。

Visual Studioとの関係

　Visual Studio Codeというと、その名称からVisual Studioを連想される方もいるでしょう。Visual Studioは同じくMicrosoft社の提供する統合開発環境（IDE）です。Visual Studioは、1997年からリリースされている、伝統あるIDEです。2005年から無償のExpress Editionがリリースされて、2014年からは同じく無償のCommunityがリリースされていますが、それらには利用について一定の制限があり、業務で使用するにはライセンスを購入して全ての機能を利用できるようにするのが一般的です。そのため機能も充実しており、プラットフォームもWindowsとmacOSをサポートします。機能が充実している反面、要求されるハードウェアリソースは軽くはありません。

　VSCodeは、Visual Studioからエディタ部分を切り取りスピンアウトしたバージョンと位置付けることができますが、名前が似ているだけで中身はまったくの別物です。Electronという、Web技術を用いてアプリケーションを開発できるフレームワークを用いて開発されています。またVisual Studioと異なり、VSCodeはMITライセンスのもと、オープンソースソフトウェアとして公開されています。2021年に実施された海外のある調査では、VSCodeが最も人気のある開発者環境ツールとして、参加者の70％以上が使用していると回答したほどの人気ぶりです。

［NOTE］Webブラウザ版のVSCode―vscode.dev

　VSCodeには、Webブラウザで利用できるvscode.devがあります。コンパイルやデバッグ、ターミナルでの操作などはできませんが、ローカルのファイルを扱える、見た目も一緒であるなど、テキストエディタとしてはスタンドアロン版と同様の機能を備えるので、外出先や制限のある環境での利用には便利でしょう。一部の拡張機能を利用することもできます。

VSCodeの入手とインストール

　以下が、VSCodeの公式サイトです。必要な情報はここから得られます。

• Visual Studio Code – コード エディター | Microsoft Azure

システム要件

　ダウンロードやインストールの前に、システム要件について確認しておきましょう。既述の通り、VSCodeはmacOS、Windows、Linuxの3つのプラットフォームで利用できます。公式サイトでは、クロック周波数が1.6GHz以上のCPU、1GB以上のRAMが推奨されています。現在流通しているPCではまったく問題なく軽快に動作するでしょう。また、OSのサポート状況は以下の表の通りです。こちらも現在流通しているPCではまったく問題ないと思われますが、古いOSを使っているという場合には注意した方がよいでしょう。

表1：サポートされるOS

プラットフォーム	バージョン
macOS	OS X El Capitan（10.11以降）
Windows	Windows 8.0、8.1、10、11（32bitまたは64bit）
Linux（Debian系）	Ubuntu Desktop 16.04以降、Debian 9以降
Linux（Red Hat系）	Red Hat Enterprise Linux 7以降、CentOS 7以降、Fedora 34以降

　以降、macOSとWindowsについて、ダウンロードとインストール、そして起動方法を紹介します。なお、VSCodeはプラットフォームにかかわらず、下記から入手できます。

• Download Visual Studio Code - Mac, Linux, Windows

macOSでのダウンロードから起動まで

　 macOS環境でのダウンロードから起動までを、以下にまとめます。

ダウンロード

　プラットフォームに合ったZipファイルをダウンロードします。

• Universal…Intelプラットフォーム／Apple M1プラットフォーム
• Intel…Intelプラットフォーム（x64）
• Apple-Silicon Apple M1プラットフォーム

インストール

　ダウンロードしたZipファイルを解凍してできる.appファイルを、アプリケーションフォルダにコピーまたは移動します。これでインストールは完了です。macOSの全ユーザで利用可能です。

起動

　インストールによってVSCodeはアプリケーションフォルダに配置されているので、そのままLaunchpadで起動できます。あるいは、Finderでファイル名の上で右クリック→「このアプリケーションから開く」で表示される一覧に「Visual Studio Code.app」があれば、そこから起動してファイルも開けます。

Windowsでのダウンロードから起動まで

　 Windows環境でのダウンロードから起動までを、以下にまとめます。

ダウンロード

　Windowsでは、x86（32bit）、x64（64bit）、ARM（64bit）の3つのアーキテクチャ向けにインストーラが用意されています。インストール方法に合わせてファイルをダウンロードしますが、User InstallerかSystem Installerを使うのがお勧めです。

• User Installer…使うのは自分自身だけ
• System Installer…PCの全ユーザが使う
• Zip…解凍したファイル群を適当なフォルダに置いて自分で管理する

インストール

　ダウンロードしたインストーラを実行してインストールします。デフォルトのオプションのまま進めて問題ないので、特に難しいところはありません。

起動

　［スタート］－［Visual Studio Code］－［Visual Studio Code］で起動するか、エクスプローラーでファイル名の上で右クリック→「アプリケーションで開く」で表示される一覧に「Visual Studio Code」があればそこから起動してファイルも開けます。

　プラットフォームにかかわらず、起動するとデフォルトではウェルカムページが表示されます。ウェルカムページには、最近開いたものの一覧、ファイルを開く操作、ちょっとしたTipsなどが表示されます。