統合開発環境として使えるVS Codeとは

Visual Studio Code（VS Code）は、Microsoftが提供しているコードエディタです。

Windows、macOS、Linuxに対応しており、プログラムのソースコードを編集するだけでなく、デバッグやGitによるバージョン管理、ターミナル操作、テストなど、開発に必要なさまざまな機能を利用できます。

厳密には、Visual StudioやIntelliJ IDEAのように、最初から多数の開発機能を備えたフル機能の統合開発環境（IDE）とは性格が異なります。

VS Codeはコードエディタをベースとしており、必要な拡張機能や外部ツールを追加することで、IDEのような開発環境を構築できることが特徴です。

そのため、「比較的シンプルな環境から始めて、必要な機能だけを追加したい」という場合に適しています。

VS Codeが統合開発環境として利用される理由

コード編集からデバッグまでを1つの画面で行える

VS Codeでは、ソースコードを編集するだけでなく、プログラムの実行やデバッグ、Git操作、ターミナル操作などを同じ画面上で行えます。

一般的な開発では、次のような作業が必要になります。

• ソースコードを書く
• プログラムを実行する
• エラーを確認する
• デバッグする
• テストする
• Gitで変更履歴を管理する
• ビルドや各種コマンドを実行する

VS Codeでは、こうした作業を1つのアプリケーションを中心に進めることができます。

複数のソフトウェアを頻繁に切り替える必要が少なくなるため、開発作業を効率化しやすい点がメリットです。

参考サイト

Visual Studio Codeとは？｜人気No1の開発環境であるVSCodeについて3分でわかりやすく解説

IntelliSenseによるコード入力支援を利用できる

コードの候補を自動的に表示できる

VS Codeには、「IntelliSense」と呼ばれるコード入力支援機能があります。

IntelliSenseを利用すると、コードを入力している途中で、変数や関数、メソッド、プロパティなどの候補を表示できます。

たとえばJavaScriptで次のように入力すると、関連する候補が表示されます。

document.

環境によっては、次のような候補を確認できます。

document.querySelector
document.getElementById
document.createElement

コードをすべて暗記しなくても候補を確認しながら入力できるため、入力ミスの防止やコーディング速度の向上につながります。

型情報や関数の情報も確認できる

IntelliSenseは、単純な文字列補完だけではありません。

対応している言語では、変数の型や関数の引数、メソッドの説明なども確認できます。

JavaScript、TypeScript、HTML、CSS、JSONなどはVS Code本体で比較的充実したサポートが用意されています。

PythonやJava、C++などについては、対応する拡張機能を導入することで、コード補完や定義ジャンプなどの機能を利用できます。

ただし、利用できる機能の範囲は、プログラミング言語や拡張機能によって異なります。

デバッグ機能を利用できる

ブレークポイントを設定できる

VS Codeでは、プログラムを途中で停止させる「ブレークポイント」を設定できます。

たとえば、次のようなコードがあるとします。

function calculateTotal(price, quantity) {
    const total = price * quantity;
    return total;
}

const total = price * quantity;の行にブレークポイントを設定すると、プログラムがその位置まで実行された時点で処理を一時停止できます。

その状態で、変数の値やプログラムの実行状況を確認できます。

ステップ実行にも対応している

VS Codeのデバッグ機能では、プログラムを一行ずつ確認しながら実行することもできます。

代表的な操作には、次のようなものがあります。

• Continue
• Step Over
• Step Into
• Step Out
• Restart
• Stop

また、変数、コールスタック、ブレークポイント、デバッグコンソールなども確認できます。

ただし、すべてのプログラミング言語をVS Code本体だけでデバッグできるわけではありません。

JavaScriptやTypeScript、Node.js以外の言語では、対応するデバッガー拡張機能が必要になる場合があります。

Gitによるバージョン管理を行える

Git操作をGUIから行える

VS Codeには、Gitとの連携機能が標準で用意されています。

Source Controlビューを利用すると、GUIから次のような操作を行えます。

• 変更されたファイルの確認
• 差分の確認
• ステージング
• コミット
• ブランチの作成や切り替え
• Pull
• Push
• Sync
• マージ競合の確認や解決

Gitコマンドに慣れていない場合でも、GUIを使って基本的なバージョン管理を行えます。

一方で、VS Code内の統合ターミナルからGitコマンドを実行することもできます。

git status
git add .
git commit -m "Update"
git push

GUIとコマンドラインを用途に応じて使い分けられることも特徴です。

Git本体は別途必要

注意したいのは、VS CodeにGitそのものが完全に組み込まれているわけではないという点です。

VS CodeにはGitを操作するための連携機能がありますが、基本的にはPC側にGitをインストールして利用します。

そのため、初めてGitを使用する場合は、VS Codeとは別にGitのインストールが必要です。

GitHubなどのサービスとも連携できる

GitとGitHubは別のもの

GitとGitHubは混同されることがありますが、厳密には異なります。

Gitはソースコードの変更履歴を管理するバージョン管理システムです。

一方、GitHubはGitリポジトリをオンライン上で管理・共有できるサービスです。

VS CodeではGitを標準機能として利用できます。

GitHub固有のPull RequestやIssueなどを扱いたい場合は、GitHub向けの拡張機能を利用することで、さらに高度な連携が可能になります。

統合ターミナルを利用できる

VS Code内からコマンドを実行できる

VS Codeには統合ターミナルが搭載されています。

そのため、別のターミナルアプリケーションを開かなくても、VS Codeの画面内からコマンドを実行できます。

たとえば、Node.js開発では次のようなコマンドを実行できます。

npm install
npm run dev

Pythonでは、次のように実行できます。

python main.py

Gitを操作する場合は、次のようなコマンドを実行できます。

git status

コードを編集しながらコマンドも実行できるため、作業の切り替えを減らせます。

複数のターミナルを同時に利用できる

VS Codeでは、複数のターミナルを開くこともできます。

たとえば、1つ目のターミナルで開発サーバーを起動し、2つ目でGitを操作し、3つ目でテストを実行するといった使い方が可能です。

ターミナル1
npm run dev

ターミナル2
git status

ターミナル3
npm test

フロントエンドとバックエンドを同時に起動するような開発でも便利です。

拡張機能でさまざまな開発環境を構築できる

必要な機能だけを追加できる

VS Codeの大きな特徴の一つが、拡張機能による高いカスタマイズ性です。

拡張機能を追加することで、VS Codeにさまざまな機能を追加できます。

代表的なものとして、次のような用途があります。

• プログラミング言語のサポート
• コード補完
• デバッグ
• テスト
• Docker関連機能
• Jupyter Notebook
• GitHub連携
• コードフォーマット
• Lint
• AIによるコーディング支援

自分が利用する言語やフレームワークに合わせて環境を構築できる点が、VS Codeの強みです。

最初からすべての機能を入れる必要がない

一般的なフルIDEでは、多数の開発機能が最初から搭載されている場合があります。

一方、VS Codeでは必要なものを後から追加するという考え方が基本です。

たとえば、Python開発をする場合はPython関連の拡張機能を導入し、Java開発をする場合はJava向けの開発環境を追加できます。

そのため、用途に合わせて比較的シンプルな構成から始められます。

Profilesで用途別に環境を切り替えられる

拡張機能や設定を用途ごとに分けられる

VS Codeには「Profiles」という機能があります。

Profilesを利用すると、用途に応じて設定や拡張機能などを切り替えることができます。

たとえば、次のような環境を作れます。

• Web開発用
• Python開発用
• Java開発用
• データ分析用
• 仕事用
• 個人開発用
• 最小構成用

複数の分野で開発している場合でも、それぞれの用途に適した環境を管理しやすくなります。

多くのプログラミング言語に対応できる

1つのエディタで複数言語を扱える

VS Codeは特定の言語専用ではありません。

拡張機能や外部ツールを組み合わせることで、さまざまなプログラミング言語の開発に利用できます。

たとえば、次のような言語です。

• JavaScript
• TypeScript
• Python
• Java
• C
• C++
• C#
• PHP
• Go
• Rust
• Julia

ただし、VS Codeをインストールするだけで、これらすべてのプログラムを実行できるわけではありません。

言語によっては、コンパイラやインタープリタ、SDKなどを別途インストールする必要があります。

基本的には、次のような構成になります。

VS Code
＋
言語用拡張機能
＋
コンパイラやインタープリタ
＋
必要に応じてデバッガー

コードナビゲーションやリファクタリングにも対応している

大規模なプロジェクトでもコードを探しやすい

対応している言語や拡張機能では、コードを効率よく確認するための機能も利用できます。

代表的な機能には、次のようなものがあります。

• 定義へ移動
• 参照の検索
• シンボル検索
• 名前の変更
• Peek
• ワークスペース全体の検索
• リファクタリング

たとえば、関数名からその関数が定義されている場所へ移動したり、その関数がどこから呼び出されているかを確認したりできます。

ファイル数が多いプロジェクトでは、特に便利な機能です。

ただし、リファクタリングやコード解析の対応範囲は、利用している言語や拡張機能によって異なります。

Tasksで定型作業を自動化できる

ビルドやテストを登録できる

VS Codeには「Tasks」という機能があります。

Tasksを利用すると、開発中によく実行するコマンドをタスクとして登録できます。

たとえば、次のようなコマンドです。

npm run build
npm test
tsc

毎回ターミナルに長いコマンドを入力する必要がなくなり、ビルドやテストなどの作業を効率化できます。

プロジェクトごとにタスクを設定できるため、チーム開発でも利用できます。

テスト機能を統合できる

VS Code上からテストを実行できる

VS Codeでは、対応するテスト拡張機能を利用することで、Testingビューからテストを実行できます。

環境によっては、次のような操作が可能です。

• テスト一覧の表示
• テストの実行
• テストのデバッグ
• 成功・失敗の確認
• テスト結果の確認
• テストカバレッジの確認

そのため、コードを書いてからテストし、失敗した部分をデバッグして修正するという流れをVS Code内で進めやすくなります。

ただし、すべてのテストフレームワークをVS Code本体だけで利用できるわけではありません。

使用する言語やテストフレームワークに対応した拡張機能が必要になる場合があります。

リモート開発にも対応している

WSLやSSH接続先で開発できる

VS Codeはリモート開発との相性がよいことも特徴です。

Remote Development関連の機能を利用すると、次のような環境を開発先として利用できます。

• WSL
• SSH接続したリモートマシン
• 開発用コンテナ

たとえばWindows上でVS Codeを操作しながら、WSL内のLinux環境でプログラムを実行できます。

Windows
↓
VS Code
↓
WSL
↓
Linux環境

また、SSHを利用してリモートサーバー上のファイルを編集することもできます。

ローカルPC
↓
VS Code
↓
SSH
↓
リモートサーバー

ローカルPCと実行環境を分けられるため、サーバー開発やクラウド開発でも便利です。

Dev Containersを利用した開発にも対応している

開発環境を統一しやすい

VS Codeでは、Dev Containersなどを利用して、コンテナを開発環境として扱うことができます。

コンテナ内に、プログラミング言語やツール、ライブラリなどをまとめておけば、開発者ごとの環境差を減らしやすくなります。

たとえば、次のような問題を防ぐのに役立ちます。

自分のPCでは動く
↓
他の開発者のPCでは動かない

複数人で同じ開発環境を再現しやすくなるため、チーム開発でも有効です。

ただし、コンテナを利用する場合は、Dockerなどのコンテナ環境が別途必要になることがあります。

Workspace単位でプロジェクトを管理できる

プロジェクトごとに設定を分けられる

VS Codeでは、開いているフォルダーや複数のフォルダーをWorkspaceとして扱えます。

Workspaceごとに設定を変更できるため、プロジェクトごとに異なる開発環境を構築できます。

たとえば、次のような情報をプロジェクト単位で管理できます。

• エディタ設定
• タスク設定
• デバッグ設定
• 開いているフォルダー
• UIの状態

ユーザー全体の設定を変更せず、特定のプロジェクトだけ設定を変更できる点も便利です。

カスタマイズ性が高い

エディタを自分の好みに合わせられる

VS Codeでは、さまざまな設定を変更できます。

代表的な項目には、次のようなものがあります。

• テーマ
• フォント
• 文字サイズ
• インデント
• 自動保存
• キーボードショートカット
• エディタレイアウト
• ターミナル
• 拡張機能

開発者ごとに使いやすい環境へ調整できることも、VS Codeの人気が高い理由の一つです。

プロジェクトごとに設定を変えられる

VS Codeでは、ユーザー全体の設定とWorkspace単位の設定を分けられます。

たとえば、JavaScriptプロジェクトではインデント幅を2文字にし、Pythonプロジェクトでは4文字にするといった使い分けも可能です。

JavaScriptプロジェクト
→ スペース2文字

Pythonプロジェクト
→ スペース4文字

複数の開発ルールを扱う場合に便利です。

AIを活用した開発にも対応している

AIによるコーディング支援を利用できる

現在のVS Codeでは、AIを活用したコーディング支援も大きな特徴になっています。

対応するサービスや拡張機能を利用することで、コード補完だけでなく、コードの説明や修正、テスト作成などをAIに支援してもらうことができます。

近年では、単純なコード補完にとどまらず、複数ファイルを横断して変更を提案したり、開発タスクを支援したりするエージェント型の機能も登場しています。

ただし、AI機能の種類や利用条件、料金体系などはサービスによって異なります。

また、AIが生成したコードが必ず正しいとは限らないため、最終的には開発者自身による確認が必要です。

一般的なIDEとVS Codeの違い

VS Codeは必要な機能を追加していくタイプ

VS Codeと一般的なフルIDEでは、設計思想に違いがあります。

大まかに比較すると、次のようになります。

項目	VS Code	一般的なフルIDE
基本設計	コードエディタを拡張	開発機能を統合した環境
初期状態の機能	比較的シンプル	豊富な場合が多い
機能追加	拡張機能を利用	標準機能＋プラグイン
言語対応	拡張機能で幅広く対応	製品によって異なる
コード補完	対応	対応
デバッグ	対応	対応
Git連携	対応	対応
ターミナル	対応	対応製品が多い
カスタマイズ性	高い	製品によって異なる
プロジェクト作成	CLIや拡張機能を使うことが多い	GUIウィザードを備える製品も多い

特に大きな違いは、VS Codeでは最初からすべての開発機能が用意されているわけではないことです。

自分が必要な機能だけを追加して、自分向けの開発環境を構築していくという考え方が基本になります。

VS Codeには一般的な「New Project」がない

プロジェクト作成にはCLIを使う場合が多い

Visual StudioなどのIDEでは、「新しいプロジェクト」を選択して、テンプレートからアプリケーションを作成できる場合があります。

一方、VS Codeでは、従来型IDEのような多数のプロジェクトテンプレートを備えた「File → New Project」が基本機能として用意されているわけではありません。

プロジェクトを作成するときは、各言語やフレームワークが提供しているCLIを利用するケースが一般的です。

たとえば、JavaScript関連では次のようなコマンドを利用できます。

npm create

.NETでは、次のようなコマンドがあります。

dotnet new

プロジェクト作成後に、そのフォルダーをVS Codeで開いて開発を進める形になります。

VS Codeを統合開発環境として利用するメリット

1つのアプリケーションで多くの作業を行える

VS CodeをIDEのように利用する大きなメリットは、開発に必要な多くの作業をVS Codeを中心に進められることです。

代表的なメリットとしては、次のようなものがあります。

• コードの編集から実行まで行える
• IntelliSenseによるコード補完を利用できる
• デバッグ機能を利用できる
• Gitによるバージョン管理ができる
• 統合ターミナルを利用できる
• テスト環境を統合できる
• 拡張機能で機能を追加できる
• 多くのプログラミング言語に対応できる
• WSLやSSH、コンテナを利用したリモート開発ができる
• プロジェクトごとに設定を管理できる
• 自分の好みに合わせて環境をカスタマイズできる

特にWeb開発やNode.js開発、Python開発、クラウド開発などでは、柔軟な開発環境を構築しやすいことが特徴です。

VS Codeを利用する際の注意点

必要な開発環境を自分で準備する場合がある

VS Codeだけをインストールしても、すべてのプログラミング言語を実行できるわけではありません。

開発内容によっては、次のようなソフトウェアを別途用意する必要があります。

• Python
• Node.js
• JDK
• .NET SDK
• C/C++コンパイラ
• Git
• Docker

VS Codeは、これらのツールと連携しながら開発を進めるための中心的な画面として使われることが多いです。

拡張機能を入れすぎると環境が複雑になる場合がある

VS Codeは拡張性が高い反面、多数の拡張機能を導入すると管理が複雑になる可能性があります。

拡張機能の種類によっては、メモリ使用量が増えたり、処理速度に影響したり、ほかの拡張機能と競合したりすることもあります。

そのため、本当に必要な拡張機能だけを導入することが重要です。

Profilesを利用して用途別に拡張機能を分ける方法も有効です。

VS Codeは自分で構築するタイプの統合開発環境

VS Codeは、厳密にはコードエディタとして提供されています。

しかし、IntelliSense、デバッグ、Git、統合ターミナル、Tasks、Testing、Remote Development、拡張機能などを組み合わせることで、実質的にはIDEに近い環境を構築できます。

開発の流れも、次のようにVS Codeを中心として進めることが可能です。

コードを書く
↓
プログラムを実行する
↓
テストする
↓
デバッグする
↓
Gitで変更を管理する
↓
リモートリポジトリへ反映する

Visual StudioなどのフルIDEとは異なり、VS Codeは最初からすべての開発機能を備えているわけではありません。

その代わり、必要な言語やツール、拡張機能を自由に組み合わせられます。

そのため、VS Codeの特徴を一言で表すなら、「コードエディタをベースに、自分の用途に合わせてIDEのような開発環境を構築できるツール」といえるでしょう。

以上、統合開発環境として使えるVS Codeとはについてでした。

最後までお読みいただき、ありがとうございました。