アプリ開発エディタVSCode（Visual Studio Code）とは？Visual Studioとの違い【2024年最新版】

アプリ開発に欠かせないソースコードエディタ。なかでも多くの開発者から支持されるVSCode（Visual Studio Code）のことが気になっている企業担当者の方は多いのではないでしょうか。

・アプリ開発エディタVSCode（Visual Studio Code）とは？
・VSCodeでどんなアプリを開発できる？環境構築の方法は？
・VSCodeとVisual Studioはなにが違う？

そこで本記事では、概要・特徴・インストール方法からアプリ開発に便利な拡張機能まで、知っておきたいVSCode（Visual Studio Code）の基本を解説！混同しやすいVisual Stusioとはなにが違うのか？開発できるアプリの違いも紹介していきます。

※アプリ開発に豊富な実績を持つシステム開発会社を探している方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

【無料】おすすめのシステム / アプリ開発会社を紹介してもらう

アプリ開発に役立つ記事もご覧ください アプリ開発かんたんマニュアル！おすすめ言語、開発の流れ、ツールまで解説

アプリ開発の人気コードエディタ「VSCode（Visual Studio Code）」の特徴

画像引用：VSCode

「VSCode（Visual Studio Code）」とは、Microsoftが開発・提供するオープンソースのアプリ開発向けソースコードエディタのこと。Visual Studio Codeの略称「VSCode（ブイエスコード）」と呼ばれることがほとんどです。多くのコードエディタと同じように、VSCodeもオープンソースのマルチプラットフォーム・コードエディタです。対応するのは主要プラットフォームといえるmacOS・Windows・Linux。もちろんオープンソースのため無償で利用できます。

VSCodeは、デスクトップGUIアプリケーション向けオープンソースソフトウェア「Electron」をベースに開発されており、2015年のリリース以来、急激にシェアを拡大しています。Stack Overflowの調査結果をまとめたロビン・クリーン氏のブログによれば、2019年にはAtom / Vimなどのコードエディタを抑え、VSCodeが50%以上のシェアを獲得していることがわかります。

画像引用：ROBEN KLEENE

そもそもコードエディタ（テキストエディタ）とはなにか、よく耳にする統合開発環境（IDE）とはなにが違うのでしょうか。

システム・アプリ開発では、プログラミング言語を使ってソースコードを記述していかなければなりません。そのために必要不可欠なのがコードエディタです。ただし、ソースコードを書けるだけではアプリ開発には不十分。ソースコードをコンパイル（実行可能なコードに変換）したり、不具合を見つけて修正するためのデバッグが必要。コードエディタに加え、アプリ開発に必要なコンパイラ・デバッカなどをまとめたツールのことを統合開発環境（IDE）と呼びます。

IDEはアプリ開発に必要なツールが一通り揃っているメリットはありますが、その分複雑なソースコードを記述していると動作が重くなる場合があります。その点、機能が限定されているコードエディタは軽快にソースコードを記述可能。ケースバイケースでエディタ・IDEを使い分けているエンジニアも少なくありません。

Visual Studioとの違いは「コードエディターかIDEか」

Microsoftにはコードエディタ機能を持つ「Visual Studio」という製品もラインナップされています。しかし、名称こそ似ているものの「VSCode」と「Visual Stusio」は別製品であり、Visual StudioのコードエディタがVSCodeに移植されたわけでもありません。

もっとも大きな違いは、VSCodeがコードエディタであるのに対し、Visual StudioがIDEであること。無償で使えるオープンソースのVSCodeに対し、Visual Studioが原則として有償であることです。機能を拡張できるコードエディタであるVSCodeと、IDEであるVisula Studioの機能差はそれほど大きいとはいえません。しかし、より複雑かつ大規模なアプリ開発にはVisual Studioの方が向いています。

使い分けながら併用するエンジニアの方も少なくありません。ただし、どちらかというとデスクトップアプリや大規模Webアプリ開発など、複雑になりがちなプロジェクトには「Visual Studio」を、動的なWebサイトや一般的なWebシステム・アプリなどには「VSCode」という使い分けが多いようです。動作もVS Codeの方が圧倒的に軽いです。

ただし、近年では高機能コードエディタが数多く登場してきており、IDEとの機能差はなくなりつつあります。その高機能コードエディタの代表ともいえるのがVSCodeであり、人気の秘密でもあります。以下から、VSCodeの特徴を簡単に紹介していきましょう。

ほぼ全てのプログラミング言語に対応

画像引用：Visual Studio

「Programming Language」カテゴリーの拡張機能が7,000を超えるマーケットプレイスを見てもわかるように、VSCodeは「Swift」を含むほぼ全てのプログラミング言語に対応しています。VSCodeの環境さえ整えておけば、さまざまなアプリ開発のコーディングに活用できます。なかでもとくに、PythonやPHPとの相性は抜群で、VSCodeにコード補完機能もあります。

システム・アプリ開発の現場でよく用いられるプログラミング言語なら、必要なプラグインはVSCodeでほぼそろっています。

充実の拡張機能

画像引用：Visual Studio

VSCodeは最初から豊富な機能を搭載したコードエディタですが、多数用意された拡張機能を必要なだけ追加できます。Jupyterノートブック、データサイエンス、機械学習などの拡張機能はもちろん、クラウド環境へのデプロイをサポートするAzure連携拡張機能も用意されています。

おすすめの拡張機能を早く見たい方は下記をクリック！ 「拡張機能の検索・インストール」に移動

補完機能・Git連携・デバッグ

拡張機能はもちろん、VSCodeは標準機能も充実しています。主要なプログラミング言語に対応するスニペット機能（プログラミング言語用の辞書登録）、インテリセンスなどの補完機能が搭載されているほか、デバッグツールも標準搭載。Gitと連携したバージョン管理なども活用できます。

【無料】VSCode（Visual Studio Code）について相談する

VSCode（Visual Studio Code）のインストール

画像引用：Visual Studio

本体のインストール方法やアプリ開発に便利な拡張機能の追加方法などを紹介していきましょう。といっても難しいことはありません。公式ページにアクセスして自身の環境にインストーラーをダウンロード・インストールするだけです。

Windows用のVSCodeインストーラーは、自身のアカウントのみで利用する「User Installer」および、PCのアカウント全員で利用できる「System Installer」があります。以下はWindows版VSCodeのインストール・セットアップ画面ですが、「PATHへの追加」にチェックを入れておけば、プロジェクトのパスをいちいち指定する必要がなくなります。

画像引用：Microsoft

インストール完了後は下記画面（VSCodeの画面）になります。

VSCode（Visual Studio Code）のインターフェース・設定

インストール後、VSCodeを起動すると「ようこそ」の画面が最初に表示されます。はじめてVSCodeを使う方は、このページからプロジェクトを開始したりカスタマイズできます。しかし、シンプルかつわかりやすいインターフェースであるため、使い方に迷ってしまうこともないでしょう。F1キー（WindowsはCtrl + Shift + P）のショートカットでコマンド一覧が表示される「コマンドパレット」をうまく使うと便利です。

デフォルトのままでも問題なく使えるVSCodeですが、配色テーマを変更することでソースコードの見え方が変化するため、自分の見やすいテーマを試してみるのもおすすめです。ようこそページのままであれば「カスタマイズ」>「配色テーマ」から、またはVSCodeアイコン（コード）の「基本設定」>「配色テーマ」から好きなテーマを試せます。

拡張機能の検索・インストール

VSCodeの拡張機能はマーケットプレイスで探す以外にも、VSCode本体から検索・インストール可能です。操作は簡単。画面左メニューのアクティビティアイコンから「機能拡張の管理」をクリックすることで、必要な機能拡張をキーワード検索できます。目的の機能拡張を見つけたら、サイドに表示される「インストール」ボタンをクリックするだけです。

プロジェクトに合わせたプログラミング言語以外にも、VSCodeを便利に使う拡張機能を追加しておくと便利。以下から、VSCodeでのプログラミングにおすすめの拡張機能をいくつか紹介しておきましょう。

Japanese Language Pack for Visual Studio Code

画像引用：Visual Studio

人気のソースコードエディタのほとんどは海外製のため、当然ユーザーインターフェース（UI）は英語表記が標準であり、VSCodeであってもそれは変わりません。「Japanese Language Pack for Visual Studio Code」は、その名の通りVSCodeのUIを日本語化する拡張機能です。インストール後、コマンドパレットから「Configure Display Language」を開き、言語一覧から日本語を選択しましょう。

Material Theme

画像引用：Visual Studio

「Material Theme」は、VSCodeのテーマカラーを変更できる拡張機能です。「Darker」「Ocean」「Palenight」などが選択でき、ソースコードの可読性を調整して、コーディングの生産性を高めるのに役立ちます。

Live Server

画像引用：Visual Studio

「Live Server」は、ローカルの開発環境にWebサーバの機能を追加し、Webブラウザでの静的 / 動的ページのリロードを可能にする拡張機能。開発中のコンテンツがリアルタイムに更新されるため、Webアプリ開発には欠かせない拡張機能です。

Live Share

画像引用：Visual Studio

「Live Share」は、プログラミング言語やアプリの種類にかかわらず、他のユーザーとリアルタイムでの共同編集・デバッグを可能にする拡張機能です。Microsoftアカウント、GitHubアカウント、Azure Active Directoryアカウントいずれかを有していることが前提条件となりますが、セッションの開始からユーザーの招待、編集、デバッグまで、VSCodeのみで完結できます。

【無料】VSCode（Visual Studio Code）について相談する

VSCodeアプリ開発まとめ

VSCodeを利用したアプリ開発に興味のある方に向け、本記事では、概要・特徴・インストール方法からアプリ開発に便利な拡張機能まで、知っておきたいVSCode（Visual Studio Code）の基本を解説しました。また、混同しやすいVisual Stusioとはなにが違うのか？開発できるアプリの違いも紹介してきました。

VSCodeは、コードエディターのシェアを50％以上獲得していて、ほぼすべてのプログラミング言語に対応しているなど、優秀なコードエディターです。ただし、拡張機能が豊富な分、どの拡張機能が自社開発アプリに適するか、どのようにつかいこなせばいいかなどの智識も必要となります。また、複数のコーダーがVSCodeを使う場合、プロジェクト内で拡張機能のルールを設定していないと、バグが生じる可能性もあることに注意が必要です。

※アプリ開発に豊富な実績を持つシステム開発会社を探している方は、システム幹事にご相談ください。専任のアドバイザーが最適な開発会社をご紹介します。相談料などは一切かかりませんので、お気軽にお問い合わせください。

コンサルタントのご紹介 岩田 専任のコンサルタントが、
お客様の予算と目的を丁寧にヒアリング。
最適な会社をピックアップ・ご紹介させていただきます！
初心者の方でも安心してご相談いただけます。

【無料】おすすめのシステム / アプリ開発会社を紹介してもらう