トップページ > ソフトウェアの操作 > Visual Studio Code の画面構成と役割
Visual Studio Code の画面構成と役割
[初回公開] 2022年10月22日
無料でプログラム開発ができる Visual Studio Code は一般的なテキストエディタと同じようにソースコードを記入する欄の他に、フォルダ階層やプログラムの実行結果を同時に表示することができるため、主となる 6 つの作業エリアと役割について紹介する。/p>
このページの目次
1. Visual Studio Code とは
Visual Studio Code（略称：VSC）とは、Microsoft 社が無償で配布しているプログラム開発を目的としたテキストエディタである。
同社では別途プログラム開発向けに「Visual Studio」を取り扱っており名称が似ているが、VSC とは別の扱いとなっている。
VSC はテキストエディタであるため、.txt と始めさまざまなテキストファイルを開いて編集することが可能である。 また、拡張機能（プラグイン）により特定のプログラム言語のコーディングを支援したり、開発する上で便利な機能を自由に取り込むことができる。
2. Visual Studio Code の起動後の画面
Visual Studio Code の起動後の画面は、下図のように作業開始が表示される。 プログラムを行いたいファイルをドラッグすることでソースコードの編集が可能になる他、画面上部で各操作を行ったり、画面左のアクティビティバーでも操作や機能拡張を行うことができる。
3. 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 でファイルやフォルダを開いて編集する方法
ソフトウェア
Visual Studio Code はプログラムを行う際に利用するテキストエディタだが、複数のファイルで構成されるアプリケーションやウェブサイトではフォルダでまとめられることが多いため、VSCode でファイルやフォルダを開いて編集する方法について紹介する。
Photoshop, ソフトウェア
Photoshop でキャンパスに配置した図形や読み込んだ画像内の特定の色を削除したり、透明化する場合の手順を紹介する。色を削除すると切り抜かれた状態となるためキャンバスの背景色の色が表示されるようになり、もし背景色を透明にしている場合は背面に画像等を配置することで合成することができる。
Photoshop でスライスツールを使って画像を均等に分割する方法
Photoshop, ソフトウェア
Photoshop で画像や写真を分割する場合はスライスツールを利用することが多く、自由に位置を決めて分割できる他、横幅または縦幅の長さで数量を指定して均等に分割する方法について解説する。
Photoshop, ソフトウェア
Photoshop で写真に写っている対象全体の明るさや暗さを調整したり、明暗の階調のバランスを調整したい場合に利用するレベル補正の機能の概要と使い方について紹介する。
Photoshop のコピースタンプツールで不要なものを消す方法
Photoshop, ソフトウェア
Photoshop で写真に写っている対象物を消したり、特定の箇所を違う場所にコピーして設置したい場合にコピースタンプツールを用いて加工する方法について紹介する。
