「プログラミングを始めたいが、VSCodeとは？」「VSCodeとVisual Studioの違いが理解できないまま使っている」という方も多いでしょう。VSCodeは、無料で使用が可能な高機能エディタで世界中の開発者に人気の高いツールです。
本記事では、VSCodeの概要をはじめ、インストール方法、最低限押さえておきたい使い方、混同されやすいVisual Studioとの違いまでを、専門知識がなくても理解できるように解説します。
VSCodeとは？
出典：Microsoft
VSCode（Visual Studio Code）とは、Microsoftが提供するコードエディタです。コードエディタとは、プログラミング言語で書かれたコードを入力・編集するためのソフトウェアを指します。
後述で詳しく解説しますが、VSCodeはメモ帳のように文字を書くこともできる一方で、開発向けに最適化されたさまざまな支援機能が備わっている点が特徴です。
UnityとVS Codeは連携して使われることが多く、Unityで作成するプロジェクト内のC#スクリプトを、VSCode上で記述・編集・デバッグできる開発環境を構成しています。これにより、ゲームやアプリの開発を効率的に進めることが可能です。以下の記事では、Unityについて詳しく解説していますので、あわせてご覧ください。
VSCodeは無料で使用できる？
VSCodeは、完全無料で使用可能です。ただし、拡張機能やアドオンの一部には有料のものもあります。また、外部サービスとの連携も可能ですが、APIなど別途料金が発生することもあります。
使用する拡張機能・アドオンなどの料金は、それぞれのサービスで異なりますので公式サイトなどを確認しましょう。
VSCodeの主な用途・特徴
VSCodeにはさまざまな用途・特徴があります。ここでは3つ紹介します。
- 多言語対応による汎用的なソースコード編集
- 統合デバッグとGit管理による開発効率の向上
- 豊富な拡張機能によるカスタマイズ性
①多言語対応による汎用的なソースコード編集
VSCodeは、標準でさまざまなプログラミング言語に対応しており、その数は100以上にのぼります。以下の言語は標準で対応しており、拡張機能を用いることでPythonやJava、C言語などの言語にも対応可能です。
- JavaScript
- TypeScript
- CSS
- HTML
VSCodeは単なるテキスト編集機能だけでなく、各言語に対してシンタックスハイライト、リファクタリング機能といった高度なコーディング支援機能を言語ごとに提供します。これらの機能により、開発者は文法エラーを早期に発見でき、効率的かつ正確なコード記述が可能になります。
Pythonについて詳しく知りたい方は以下の記事で詳しく解説していますので、あわせてご覧ください。
②統合デバッグとGit管理による開発効率の向上
VSCodeは、デバッグ機能が統合されており、
- ブレークポイントの設定
- ステップ実行
- 変数ウォッチ
- コールスタック表示など
本格的なデバッグ操作をエディタ内で直接実行できます。同時に、Git統合機能により、バージョン管理の基本操作をGUIから実行でき、コマンドラインの操作を避けることが可能です。拡張機能でGitHubやその他のサービスと連携することも簡単で、チーム開発における変更管理などの効率性が向上します。
③豊富な拡張機能によるカスタマイズ性
VSCodeは、マーケットプレイスに数千種類以上の拡張機能が公開されており、ユーザーが自分のニーズに完全に合わせてツールをカスタマイズ可能です。主要な拡張機能は以下の通りです。
| 機能名 | 概要 |
|---|---|
| Prettier | 自動コード整形 |
| ESLint | コード品質チェック |
| Docker | コンテナ開発 |
| GitHub Copilot | AI生成コード |
上記のような拡張機能を追加することで、IDEレベルの高度な機能をエディタ軽量性を保ったまま実現できます。また、目的に応じて必要な分だけVSCodeに追加できるため、メモリ使用量や起動速度への影響を抑えながら、プロジェクトに特化した最適な開発環境を構築することが可能です。
画像付き｜VSCodeのインストール・使い方
ここではVSCodeのインストールから使い方までを画像付きで解説します。以下の手順に沿って実施しましょう。
- VSCodeをインストールする
- VSCodeの日本語化
- VSCodeの基本的な操作・画面構成
①VSCodeをインストールする
まずはVSCodeの公式サイトに遷移し、画面左中央にある「VSCodeをダウンロードする」をクリックします。
以下の画面に移動しますので、使用しているデバイスと同じものを選びましょう。今回はMacを選択します。
ダウンロードが完了したら、zipファイルを展開しアプリケーションフォルダに移動したらVSCodeのインストールは完了です。
②VSCodeの日本語化
アプリケーションを開いたら、以下の画面が表示されます。まずは日本語化を行いましょう。
日本語化は画面左にあるExtensionsをクリックします。
Extensionsを選択すると、検索窓が表示されるので「Japanese language pack」と入力しましょう。一番上に表示されるので、インストール→再起動すると日本語になります。
③VSCodeの基本的な操作・画面構成
まずはVsCodeの画面の見方について紹介します。基本は画面左にあるサイドバーを使用して、操作をしていきます。
それぞれの役割は以下の通りです。
| 項目 | 概要 |
|---|---|
| エクスプローラー | 編集するファイルを確認できる |
| 検索 | 開いているファイルの検索ができる |
| ソース管理 | コードの変更履歴を確認する |
| 実行とデバッグ | 書いたコードをチェックする |
| 拡張機能 | 拡張機能の検索・追加ができる |
また、ファイルの追加や保存をする際は以下の画面にある赤枠のツールバーから実行します。
作業を開始する場合は、開始の下にある「新しいファイル」または「開く…」を選択して、作業を始めましょう。
ここまでVSCodeの使い方について紹介しましたが、開発を行う際は言語の知識も必要です。VSCodeで使用できる言語でおすすめなのが初心者にも易しいPythonです。そしてPythonを短期間で習得するなら「Python基礎セミナー講習」の受講を検討しましょう。
Python基礎セミナー講習では、Pythonを使用したプログラミングの基礎から基本文法などを体系的に理解できます。以下のリンクから詳細を確認できますので、まずはご覧ください。
| セミナー名 | Python基礎セミナー講習 |
|---|---|
| 運営元 | GETT Proskill（ゲット プロスキル） |
| 価格(税込) | 27,500円〜 |
| 開催期間 | 2日間 |
| 受講形式 | 対面（東京・名古屋・大阪）・ライブウェビナー・eラーニング |
VSCodeと連携できるおすすめデザインソフト
ここではVSCodeと連携できるおすすめのデザインソフトを2つ紹介します。
- Figma
- Penpot
①Figma
Figmaは、VSCodeとの連携を前提に設計されたデザインツールであり、専用の「Figma for VS Code」拡張機能を利用することで、VSCode上から直接デザインデータにアクセスできます。要素ごとのCSSスタイルやSwift UI、Android向けコードスニペットを自動生成・コピーできる点が特徴です。
また、画像やアイコンなどのアセットもエディタ上からそのまま書き出せるため、「デザイン確認→実装→微調整」という作業を最小限に抑えられます。また、Figmaはリアルタイム共同編集に強く、複数人が同時に同じデザインファイルを操作しながらコメントや修正指示を行えるため、チーム開発のスピードと品質を向上させるツールとして採用されています。
②Penpot
VSCodeとVisual Studioの違い
VSCodeとVisual Studioは混同されることも多いですが、異なるツールです。Visual Studioは統合開発環境（IDE）であり、コンパイラやデバッガ、ビルドツールなど開発に必要な機能をすべて内蔵しています。
一方、VSCodeは軽量なコードエディタで、コードの記述に特化しており、拡張機能によって機能を追加していく設計になっています。それぞれの特徴は以下の表を参照ください。
| 項目 | VsCode | Visual Studio |
|---|---|---|
| 種類 | コードエディタ | 統合開発環境（IDE） |
| 拡張機能の数 | 10万件以上 | 2万件以上 |
| 主要言語 | JavaScript/TypeScript を中心に、拡張機能により数百の言語に対応 | C#/.NET/C++を中心に、Web・Python開発にも対応 |
| 価格 | 無料 | Communityは無料、Professional/Enterpriseは有料 |
| おすすめの人 | 軽量な開発環境で柔軟に作業したい人 | .NETやC++などで本格的な開発を行う人 |
出典：Microsoft Visual Studio/Visual Studio Code
VSCodeはWeb開発やクラウド開発と相性が良く、Git統合やLive Shareなど軽快な共同作業に向いています。一方、Visual Studioは.NETやC++を用いたデスクトップアプリケーションやエンタープライズ向け開発に強みがあります。
VSCodeとAzureの違い
ここでVSCodeと比較されるのが、Azureです。異なる種類のツールですが、どちらを使用するか迷う人も多いです。VSCodeは、PCにインストールするローカル開発環境で、コードの編集・デバッグ・バージョン管理などの開発作業をサポートします。
一方、Microsoft AzureはMicrosoft社が提供するクラウドコンピューティングプラットフォームで、Web上でアプリケーション実行環境、データベース、AI・機械学習、ストレージなどのインフラやサービスを提供します。
| 項目 | VSCode | Microsoft Azure |
|---|---|---|
| 概要 | ローカルコードエディタ | クラウドコンピューティングプラットフォーム |
| 役割 | コード開発・デバッグ | アプリ実行・インフラ提供 |
| 価格 | 無料 | 課金制 |
| 拡張機能 | 拡張機能マーケットプレイス | 拡張機能による機能追加 |
出典：Microsoft Azure/Visual Studio Code
VSCodeは開発ツールとして、Azureは実行基盤として機能し、両者はMicrosoft社による設計により相乗効果を発揮するように統合されています。単独で選択するのではなく、両者を組み合わせることが、モダン開発環境の構築につながります。
VSCodeについてのまとめ
VSCodeは、無料で使える軽量なコードエディタでありながら、多言語対応、統合デバッグ、豊富な拡張機能といった実務レベルの機能を備えており、初心者の学習用途からWeb開発・業務効率化・チーム開発まで幅広く活用できる点が魅力です。
また、VSCodeは拡張機能によって自分のスキルや目的に応じた環境を柔軟に構築できるため、「まずは簡単に始めて、必要に応じて成長させていく」開発スタイルに最適なツールといえるでしょう。
