icon
icon

Visual Studio Code(VSCode)とは?インストールや使い方も現役エンジニアが解説

初心者向けにVisual Studio Codeについて解説しています。これはMicrosoft社が提供するコードエディタです。Visual Studio Codeの特徴とメリット、導入と設定の手順、拡張機能の一部を紹介します。エディタ検討時の参考にしてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Visual Studio Code(VSCode)について、TechAcademyのメンター(現役エンジニア)が初心者向けに解説します。Visual Studio Codeとはエディタのひとつです。機能性や拡張性や開発者コミュニティなどが優れており、使いこなせるようになると実装したい機能を手早くプログラムできるようになりましょう。

今回の記事では概要から実際のダウンロード方法まで解説していきます。

 

なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

田島悠介

今回は、プログラミングに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Visual Studio Codeについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Visual Studio Codeとは

Visual Studio Codeとは、プログラミングを行う時は「エディタ」と呼ばれるソフトウェアのひとつです。

エディタとは言わば高機能なメモ帳のようなものです。

エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も多く利用されていると言われているのが「Visual Studio Code(ビジュアル・スタジオ・コード)」です。

エンジニアの間では略して「VSCode(ブイエスコード)」と呼ばれています。

Visual Studio Codeは単にエディタというだけではなく、プログラミングやシステム開発に関する様々な作業を効率的に行える機能が数多く用意されています。

プログラミングを開発するソフトウェア群を「開発環境」と呼びます。

Visual Studio Codeは数多くのプログラミング言語で使用されている主要な開発環境の1つと言えます。

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

Visual Studio Codeの特徴

Visual Studio Codeはマイクロソフト社が開発しているエディタであり以下のような特徴があります。

オープンソース

誰でも無償で利用できます。

Visual Studio Codeのソースコード自体もGitHubというWebサイトで誰でも閲覧可能な状態で管理されています。

多くのオペレーティングシステム(OS)に対応

WindowsやMac、Linuxなど、多くのオペレーティングシステムに対応しています。

多くの言語に対応

メニューなどの表記を様々な言語に切り替えることが可能です。

英語や日本語だけでなく、中国語やフランス語、ドイツ語など多くの言語に対応しています。

拡張機能

「拡張機能」と呼ばれる仕組みで機能を追加することが出来ます。

拡張機能は数多く提供されており、プログラミングの目的に合った拡張機能を組み合わせることで最適な開発環境を構築することができます。

その他

ソースコードの入力補助(コード補完)や見た目を変えるテーマ、キーボード入力の変更など、多くの機能が提供されています。

 

なお、Visual Studio Codeと名前は似ていますが全く別の製品としてVisual Studioがあります。

Visual StudioはWebやWindowsアプリーケーションなどを構築する統合開発環境です。

エディタ機能に加えてシステム開発プロジェクトの管理やアプリの試験、解析などを行う機能が組み込まれています。

用途が異なりますので間違えないように注意しましょう。

 

Visual Studio Codeを使うメリット/デメリット

Visual Studio Codeを使うメリット/デメリットについて解説していきます。

メリットは開発効率の向上

上記のようにVisual Studio Codeは非常に自由度と拡張性が高いエディタであるため、慣れてくるととても作業効率が上がることを実感できます。

現在最も多く利用されているエディタだけあり、システム開発で使用されるバージョン管理やUI設計などのソフトウェアとの連携、クラウド環境との接続などをVisual Studio Code上で行うことが出来ます。

利用者が多いため、使用方法などについて多くの情報を得られることもメリットの1つです。

デメリットは機能を使いこなせない

逆にデメリットとして、あまりにも機能が豊富すぎるため、最初はメニュー構成や設定、拡張機能の導入などに戸惑うことも多いと思われます。

これらについてはインターネット上で多くの導入事例が提供されているため、自分の目的に合った開発環境を構築する情報を収集すると良いでしょう。

また、インターネットから切り離された環境の場合、拡張機能のインストールなどを手動で行う必要があり、やや運用が面倒に感じられるかもしれません。

ただ一度開発環境を構築してしまえば常時インターネット接続は必須ではないため、そのような環境でも十分に運用に耐えられることでしょう。

 

Visual Studio Codeの使い方

それでは具体的にVisual Studio Codeの使い方をご説明しましょう。

 

ダウンロード手順

Visual Studio Codeのダウンロードは公式サイトから行います。

「今すぐダウンロード」ボタンをクリックします。

Visual Studio Code


(画像出典:Visual Studio Code公式サイト)

オペレーティングシステムに合ったボタンをクリックします。


(画像出典:Visual Studio Code公式サイト)

Windowsの場合はインストーラーを実行します。そのまま「次へ」ボタンを押してインストールを進めると良いでしょう。

Macの場合はダウンロードファイルを解凍したファイルをアプリフォルダにドラッグ&ドロップすればインストール完了です。

 

初期設定

インストールが終わったら初期設定を行いましょう。

特別な設定は必要なく、インストールするとすぐに使用することができます。

まずはメモ帳などの代わりにテキストファイルを編集してみると良いでしょう。

 

便利な拡張機能

Visual Studio Codeをインストールしたらぜひ追加したいのが拡張機能です。

ここでは便利な拡張機能をいくつかご紹介します。

Japanese Language Pack for Visual Studio Code

メニューなどを日本語化する拡張機能です。英語はちょっと苦手という方は導入すると良いでしょう。


(画像出典:Visual Studio Code拡張機能ページ)

Material Theme

見た目を変えるテーマの拡張機能です。

現在流行しているマテリアルデザインを取り入れたテーマやアイコンを使用することができます。


(画像出典:Visual Studio Code拡張機能ページ)

テーマのおすすめは「Material Theme High Contrast」です。適用すると以下のようになります。

Live Server

フロントエンドの開発を行う際に欠かせないのが開発環境用のWebサーバーです。

Live ServerはVisual Studio Codeで起動できる開発用Webサーバーであり、フロントエンドの開発を協力に後押ししてくれることでしょう。


(画像出典:Visual Studio Code拡張機能ページ)

Markdown All in One

Visual Studio Codeは文章の執筆環境としても優れています。

マークダウン形式の文章を執筆する時に欠かせない拡張機能がMarkdown All in Oneです。

Markdown All in Oneはマークダウン形式の文章を書く時の便利なキーボードショートカット機能を提供します。

マークダウン関連の拡張機能としてはこの他にPDFを作成する時に便利な「Markdown PDF」や数式をTex記法で記述できる「Markdown Math」など、多くの拡張機能が提供されているので探してみると良いでしょう。


(画像出典:Visual Studio Code拡張機能ページ)

 

Visual Studio Codeの料金

Visual Studio Codeは前述のとおりオープンソースソフトウェアであり、誰でも無償で利用することができます。

拡張機能もほとんどが無償で提供されています。なぜ、このような高機能な開発環境が無償で提供されているのでしょうか。

これは現在のプログラミングを取り巻く環境とも関係があります。

システム開発やプログラミング、それらを動作させるクラウド環境やサーバーなどを含めた全体を「エコシステム」と呼びます。

現在のソフトウェア関連産業はサービス提供型のビジネスモデルにシフトしつつあります。

代表的な例としてはAWSを始めとするクラウド環境でしょう。

クラウド環境は従来のオンプレミス型と比較して、自分でサーバー機器を購入して環境を立ち上げる初期コストと時間を節約できるメリットから急速に利用が伸びてきています。

これらサービス提供型のモデルをビジネスとして成功させるには「自社のサービスのエコシステムに利用者を呼び込む」必要があります。

Microsoft社はGitHubの買収やVisual Studio Codeのような高機能の開発環境を無償提供することで自社のエコシステムを支持する開発者を増やし、企業のエンタープライズ用途としてAzureなどのクラウドサービスを利用してもらうビジネスモデルを考えているのではないかと思われます。

ただしこれは悲観することではなく、開発者にとってはむしろ歓迎すべきことです。

エコシステムを上手に活用し、開発者としてのスキルを伸ばしていくことで多くのメリットが得られることでしょう。

 

Visual Studio Codeの評判

Visual Studio Codeは世界中で利用されているエディタです。

開発者の評判を図る指標の1つがGitHubのスターの数です。

現時点でのVisual Studio Codeのスターの数は約9万8千と、かなりの数を集めていることが分かります。

このようなことからもとても評判の良いエディタと言うことができるでしょう。

GitHub – microsoft / vscode


(画像出典:GitHub – microsoft/vscodeリポジトリ)

 

Visual Studio Codeを使うべき人

Visual Studio Codeは初心者から上級者まで、幅広く利用することが出来ます。もちろんエディタの選定は自由ですのでVimやAtom、Sublime Textなど好きなエディタを選択してかまいません。

ほとんどのエディタは無償で利用できるため、まずは利用してみて拡張性や相性の良さで選択すると良いでしょう。

 

まとめ

今回の記事ではVisual Studio Codeのインストールや使い方について説明しました。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門(技術評論社)」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも12週間で東京のIT企業へエンジニアとして転職を目指せるオンラインブートキャンプを開催しています。

現役エンジニアとキャリアカウンセラーが学習から転職までサポートいたします。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。