.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. 開発環境(IDE)
  4. Visual Studio
  5. Visual Studio Code基本的な使い方3選|拡張機能も解説

Visual Studio Code基本的な使い方3選|拡張機能も解説

  • Visual Studio
  • 開発環境(IDE)
公開日時:   更新日時:
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    プログラマー
    Visual Studio Codeは人気のエディタですよね。まわりのみんなも使っていますし。どんな機能があるんですか?
    プロジェクト
    マネージャー
    この記事で基礎から機能を説明しますね。また、Visual Studio Codeのインストール方法について知りたい方は、下記の記事を参考にしてみてください。

    Visual Studio Codeとは


    Visual Studio CodeはMicrosoftが作成したエディターです。
    Windows、macOS、および Linux で使用できます。
    誰でも無償で利用でき、c++、c言語、Java、Python、PHP、Go などを使用できるエディターになっています。
    今回はそんなVisual Studio Codeの使い方について紹介していきます。

    【Visual Studio Code】基本的な使い方3選


    Visual Studio Codeの使い方について記載していきます。
    まずは基本的な使い方として、
    1.ダウンロード・インストール方法
    2.Visual Studio Codeの画面構成と日本語化について
    3.ファイルの作成や保存の仕方について
    上記3つについて記載していきます。

    1:ダウンロード・インストール

    まずはMicrosoft AzureのVisual Studio Codeを開きます。
    そこから今すぐダウンロードをクリックします。
    Visual Studio Codeのダウンロードという画面に飛びますので、自分の使っているノートPCに合わせた物を選択してください。
    Windowsの場合、左にあるアイコンを、Macなら右にあるアイコンをクリックします。
    そうするとインストーラーが起動するので、インストールしてください。

    2:Visual Studio Codeの画面構成と日本語化

    ここからは、インストールが済んでいるという前提で進めていきたいと思います。
    はじめに、Visual Studio Codeの画面構成について簡単に把握しておきましょう。
    下記画面をご覧ください。
    最初の画面

    こちらが、Visual Studio Codeを最初に開いたときに表示される画面です。ウェルカムページといわれています。
    デフォルトは英語表記になっていますので、まずは日本語表記に変えておきましょう。
    ※英語表記のままで問題ない、という方は飛ばしてください。

    表示言語の変更は以下の手順で行うことができます。

    左下の設定マーク>「Extensions」を選択
    設定マーク選択
    ※Ctrl+Shift+Xでも可能です。

    検索ボックスでJapaneseと入力し、「Japanese Package for Visual Studio Code」をインストール
    Japanese Package for Visual Studio Codeをインストール

    右下に「Restart Now」のポップアップが表示されるため、クリックしVisual Studio Codeを再起動
    再起動
    これで、日本語表記に変更することができました。

    次にウェルカムページの「新しいファイル」を選択し、ソースコードエディタを見ていきたいと思います。
    新しいファイルを選択

    下記がVisual Studio Codeのソースコードエディタです。では、1つずつ画面構成を確認していきましょう。
    ※筆者はあらかじめテスト用のHTMLファイルを作成しています。

    画面構成

    メニューバー:ファイルの保存やデバッグができるところ
    エディタ:プログラムを書くところ
    サイドバー:ソースファイルの場所(階層)を表示するところ
    アクティビティバー:ここで選択したメニューがサイドバーに表示される
    ステータスバー:ファイルの形式や行数、エラー数などが表示されるところ
    以上が、Visual Studio Codeの基本的な画面構成です。
    次項では、Visual Studio Codeを利用する上で必ず行う操作を紹介していきます。

    ファイルの作成や保存

    次にVisual Studio Codeの基本的な使い方を記載していきます。
    ファイルを作成する方法ですが、画面左上のファイルを開き、新規ファイルをクリックします。
    またCtrl+Nでも、新しいファイルを作成できます。
    ファイルの保存方法については、ファイルから名前を付けて保存を選んでください。
    Ctrl+Shift+Sでも名前を付けて保存することが可能なのでご活用ください。

    Visual Studio Codeの便利な拡張機能5選


    それでは、Visual Studio Codeの使い方が解ったところで、次は便利な拡張機能について記載していきます。
    Visual Studio Codeはそのまま使っても色々なコードを書けます。
    しかし、拡張機能を利用した方が、より便利にコードを書けます。
    機能の拡張の仕方は、Visual Studio Code上でCtrl+shift+xを押すと、検索欄が出てきます。
    そこで機能名を検索して、インストールしましょう。
    今回はそんな便利な拡張機能と使い方を、5つ選定して記載します。

    1:Material Theme

    Material Themeとは、テキストエディターの背景色を変えることのできるプラグインです。
    メニューの表示から拡張機能を押し、Material Themeの歯車をクリックします。
    拡張機能に関しては、Ctrl+Shift+Xで短縮可能です。
    配色テーマを設定を押せば、背景色を変えられます。
    ぜひご活用ください。

    2:Markdown All in One

    Markdown All in OneはVisual Studio CodeでMarkdown言語を使用する際に便利な拡張機能です。
    何が便利なのかというと、ショートカットキーで文字の強調やイタリックを設定できるようになります。
    書いた文章に対して、自動的に目次を作成してくれるのも便利な機能です。
    目次に関してなのですが、3-1、3-2などのナンバリングも自動で行ってくれます。
    上記以外にも便利な機能がまだまだありますので、Markdown言語を使用する方は、ぜひ利用してみてください。

    3:Live Server

    Live Serverとは、Visual Studio Codeを使用している際に、現在進行形でWebページが閲覧できる拡張機能になります。
    使い方は、ファイルを開き、画面右下にGo Liveと出るので、クリックします。
    ブラウザでコードが反映されたWebページが開きます。
    コードを修正すると、自動でWebページにも反映されます。
    普段はコードを入力して、Webページを更新して確認する。
    といった方法をとっていますが、この拡張機能を使えば、コードを入力したそばからWebページを見られるので、非常に便利な機能です。

    4:Python

    Pythonとは、Visual Studio CodeでPython言語を使う際に、補助してくれるようになる拡張機能です。
    使い方は、拡張機能からPythonと検索してインストールします。
    便利になる機能は以下に記載しておきます。

    オートコンプリート機能
    実際にPython言語を入力してみると、メソッドやクラス、メンバーなどを表示してくれ、その識別子にカーソルを合わせると、詳細を表示してくれます。

    リンティング機能
    入力したコードに対して、起こりそうなエラーを分析し、解決方法を提示してくれる機能です。

    デバッグ機能
    コードを入力している最中に、プログラムを実行して、プログラムが正常に動くかどうか検証する機能です。

    この他にも様々な機能があり、Python言語を入力しやすくなります。
    Python言語を使う方はぜひインストールしてください。

    5:PHP Debug

    PHP DebugとはPHPのコードを入力する際のデバッグ機能を指します。
    PHP Debugを拡張したら、PHP XDebugも拡張しましょう。
    左のメニュー欄にある実行とデバックをクリックしデバックモードを起動します。
    三角形のスタートボタンがある所の下矢印をクリックし、Listen for XDebugに合わせます。
    デバッグしたいPHPファイルの任意の行にブレークポイントを設定します。
    ブレークポイントごとにチェックしながら、デバッグしていきます。
    以上がPHPコードのデバッグになります。

    Visual Studio Codeの便利な機能4選


    Visual Studio Codeの使い方として、次は便利な機能について記載します。
    Visual Studio Codeの拡張機能については触れました。
    それ以外にも、もともと備わっている便利な機能が沢山あります。
    Visual Studio Codeが高機能なエディターと呼ばれている所以はそこにあります。
    今回はそんな機能の説明と使い方を、4つに絞って記載いたしました。

    1:インテリセンス

    インテリセンスとはコードを入力する際の補助的機能の事を指します。
    コードを入力する際に出てくる、文字入力の予測になります。
    この文字入力の予測にカーソルを合わせると、そのコードの説明文が出てきます。
    そのコード編集機能がインテリセンスになります。
    基本的にはそのまま使用しても多くのプログラミング言語に対応していますが、拡張機能を使用することで、さらに多くの言語に対応できます。

    2:マルチカーソル

    マルチカーソルとは、同時編集を高速にする際に使用する機能です。
    使い方としては、いくつかあります。

    Alt+クリック
    クリックした場所にカーソルを増やせます。
    スタンダードな方法です。

    Alt+Shift+ドラッグ
    伸ばした範囲までカーソルを増やせます。
    まとめてカーソルを増やす方法です。

    Alt+Ctrl+カーソル上下
    伸ばした範囲までカーソルを増やせます。
    マウスで操作するところを、キーボードで操作する感じです。

    上記以外にも様々な方法があり、同じコードを何行も書く手間などを省ける便利な機能になっております。

    3:ユーザースニペット

    ユーザースニペットの使い方を紹介します。
    よく使うコードをあらかじめ登録しておくことにより、短いコードで呼び出せる便利な機能です。
    使い方は、メニューバー>ファイル>ユーザー設定>ユーザースニペットをクリックし、登録したいコードの言語を選択します。
    そうすると15行のコードが出てくるので、7行目から14行目までのコメントを解除します。

    8行目の

    のlog部分に呼び出しに使用する単語を設定します。
    9から12行目の

    に呼び出したいコードを入力します。
    13行目は、そのコードの説明を入力する欄になります。
    以上がユーザースニペットの設定方法になります。

    4:EMMET

    EMMETとはコードを入力する際に、少ないコードを記載してTabである程度のコードの羅列を入力してくれる機能になります。
    例えば、!と入力してTabキーを押せば、HTMLのコードが入力されます。

    またh1+Tabで

    が展開されます。
    このようにコードを入力する際の面倒な手間が省ける機能となっているので、ぜひ使用してみてください。

    Visual Studio Codeのメリット3つ


    Visual Studio Codeの使い方について、一通りの機能を説明してきました。
    ここでVisual Studio Codeを使用する際のメリットをいくつかご紹介しましょう。

    1:拡張機能が多い

    Visual Studio Codeの使い方でも説明した通り、利点の一つとして、拡張機能が多いことが挙げられます。
    基本的な機能もさることながら、拡張機能が多いことによって、エディターとしての性能を自分の思うように増やせます。
    自分好みの使い方ができる事が、メリットの一つとしてあげられます。

    2:連携できるソフトウェアが多い

    Visual Studio Codeの利点として連携できるソフトウェアが多い点が挙げられます。
    OSに関しては、Windows、Mac、Linuxで使用できます。
    また連携できるソフトウェアも沢山あり、Word、Excel、pdfなどのMicrosoftofficeの開発もできます。
    こういった細かい所に手が届くのもメリットとなっています。

    3:使い方などの情報が多い

    Visual Studio Codeの利点として、使い方などの情報が多いことが挙げられます。
    Visual Studio Codeは無償のエディターですので、使用者が多いことがメリットとしてあります。
    他の使用者が実際に使用してみた結果がブログや記事になっているので、わからないことがあったとき、すぐに解決策が見つかることが多いでしょう。
    とても初心者に優しいエディターです。

    Visual Studio Codeのデメリット


    Visual Studio Codeの使い方のメリットについて挙げました。
    ではデメリットは何でしょうか?
    ここではVisual Studio Codeの使い方のデメリットについてご紹介します。

    慣れるまでが大変

    Visual Studio Codeの使い方として、慣れるまでが大変という事が挙げられます。
    これに関しては、どのエディターに関しても言えることですが、プログラミングを初めてする方やエディターを変更しようとする方はこれから覚えることがたくさんあります。
    実際にインストールし、日本語化して自分の言語を打ち込んでみてWebサイトを見てみて・・・と戸惑うこともたくさんあるでしょう。
    便利な拡張機能を入れ、なるべく簡単に作業できるようになりましょう。
    わからないことはネットで調べて、どんどん取り込んでいくことをお勧めします。

    開発環境の構築にネットが必要

    Visual Studio Codeはインストールした時点で、様々な言語を入力できます。
    しかし、拡張機能を増やさないと使い勝手の悪い言語もあります。
    自分の使用したい言語に合わせて、拡張機能を入れてあげる必要があります。
    そのため、ネット環境は必須になります。

    プログラマー
    どこで何ができるのかがすぐ分かる画面構成ですね。
    プロジェクト
    マネージャー
    ちなみに、背景色も「ファイル」>「基本設定」>「配色テーマ」で自分好みにカスタマイズすることができますよ。

    Visual Studio Codeの使い方をマスターしよう


    Visual Studio Codeについて使い方を記載してきました。
    いかがだったでしょうか。
    Visual Studio Codeは無償なのに、高機能なエディターです。
    ですので使用者も多く、わからないことがあった際に調べれば、解決策が多く手に入ります。
    拡張機能も多くを取り揃えているので、とても優秀なエディターです。
    なのでぜひVisual Studio Codeを使用してみてはいかがでしょうか。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job