トップページ > ソフトウェアの操作 > Visual Studio Code の画面構成と役割

Visual Studio Code の画面構成と役割


[初回公開] 2022年10月22日

無料でプログラム開発ができる Visual Studio Code は一般的なテキストエディタと同じようにソースコードを記入する欄の他に、フォルダ階層やプログラムの実行結果を同時に表示することができるため、主となる 6 つの作業エリアと役割について紹介する。/p>

無料でプログラム開発できる Visual Studio Code の基本的な使い方

1. Visual Studio Code とは

Visual Studio Code(略称:VSC)とは、Microsoft 社が無償で配布しているプログラム開発を目的としたテキストエディタである。
同社では別途プログラム開発向けに「Visual Studio」を取り扱っており名称が似ているが、VSC とは別の扱いとなっている。

VSC はテキストエディタであるため、.txt と始めさまざまなテキストファイルを開いて編集することが可能である。
また、拡張機能(プラグイン)により特定のプログラム言語のコーディングを支援したり、開発する上で便利な機能を自由に取り込むことができる。

2. Visual Studio Code の起動後の画面

Visual Studio Code の起動後の画面は、下図のように作業開始が表示される。 プログラムを行いたいファイルをドラッグすることでソースコードの編集が可能になる他、画面上部で各操作を行ったり、画面左のアクティビティバーでも操作や機能拡張を行うことができる。

Visual Studio Code の起動後の画面の様子

3. 6 つの作業エリアからなる画面構成と役割

VSC は主に 6 つの作業エリアで画面が構成されており、それぞれに次の役割がある。 一部の作業エリアは非表示にしたり、位置を変更することができる。

VSC の 6 つの作業エリアの様子

3-1. 上部メニューの役割

VSC の画面上部にあるメニューはファイルを開いたり、コーディング中のプログラムを実行・デバッグするなど VSC に備わっている機能を実行する項目が配置されている。

3-2. アクティビティバーの役割

VSC の画面左側にあるアクティビティバーは、エクスプローラーや検索、拡張機能などをサイドバーに展開する切替ボタンが配置されている。
拡張機能によってはアクティビリティバーにショートカットアイコンが配置されるので、利用したい時にすぐに呼び出すことができるエリアとなっている。

3-3. サイドバーの役割

サイドバーは通常は表示されていないが、前述のアクティビリティバー内の各機能をクリックすると展開表示される。 非表示にしたい場合はサイドバー上部の名称を右クリックして表示される項目から「プライマリーサイドバーを非表示にする」を選択する。 また、アクティビリティバーで「エクスプローラー(ファイルマーク)」をクリックするとフォルダを選択する項目が表示され、選択したフォルダから下の階層にあるファイルがツリー型で確認できるようになる。

3-4. エディターの役割

エディターは実際にキーボードでプログラムなど文字を入力する作業エリアである。 複数のファイルを開いている場合はタブで切り替えが行うことができるとともに、縦または横に分割して同時に参照することも可能である。 利用する場合は、エディターの領域にファイルをドラッグ&ドロップするか、サイドバーのエクスプローラーからドラッグするとエディターに展開されて編集できる状態になる。

3-5. ステータスバーの役割

ステータスバーにはエディターで開いているファイルの行数や文字コードなど状態を確認することができる。 VSC の通知やデバッグによるエラー数も確認できるので、コーディングしながら問題を把握するのに役立つ。

3-6. 結果パネルの役割

結果パネルは通常は表示されていないが、プログラムを実行したりデバッグすると結果が表示されるエリアである。 プログラムしたコードの単体テストで利用する場合に重宝する。 また、print で結果を出力するようにしていればタブ「ターミナル」で確認できるとともに、ターミナルは Windows のコマンドプロンプトと同様のため、各種プロンプトで操作することも可能になっている。

4. Visual Studio Code の画面構成と役割のまとめ

Visual Studio Code の画面構成と役割のまとめとしては、6 つの役割がある作業エリアでコーディングやデバッグを行うことができる。
各エリアは移動したり、表示・非表示を切り替えることも可能である。

Visual Studio Code の画面構成と役割のまとめ

拡張機能で利用したいプログラム言語のパッケージをインストールすることで簡易的に実行して問題点を見つけることができる。

関連記事

@webolve をフォローしてください