今回は以前のVSCodeインストール解説記事の続編として、画面や基本的な使い方の解説をしていきます。まずは第一弾として画面の説明です。
VSCodeは多彩な機能を備える一方で、初めて触れる方には画面構成が複雑に感じられます。
本記事では、VSCode画面の各部位がどのような役割を果たし、具体的にどのように使えば効率的に開発できるのかを丁寧に説明していきます。
VSCodeのインストール方法
本記事では、VSCoodeのインストールや日本語化などの基本設定は済んでいる前提でお話ししていきます。お済みでない方は、以下の記事を参考にインストールを行ってください。
VSCodeの画面構成
VSCodeを起動すると、以下のような画面が表示されます。部分ごとに順に見ていきましょう。
(1)アクティビティバー・(2)サイドバー
画面最左端にアイコンが縦に並ぶ部分がアクティビティバー、その右のエリアがサイドバーです。エクスプローラーや検索機能などの各機能を切り替えて利用する事ができます。詳細は以降のセクションで説明します。
(3)エディタービュー
中央のエディタ領域は、実際に編集するコードやテキストなどのファイルが表示される領域です。タブで複数ファイルを切り替えられ、同一ファイルを分割表示によって並行編集することも可能です。
(4)ミニマップ
右端に表示されるファイル全体を縮小表示している部分は、ファイルのミニマップです。現在の編集位置がファイル全体のどのあたりに該当するのかを直感的に把握できます。長いファイル、特に一つのファイルに関数などが複数入っていて今がどの位置が見失うようなことの起こりやすいプログラムコードの編集には、重宝する機能です。
(5)パネル
画面下部に配置されたエリアで、タブ切り替えにより複数の機能を利用できます。こちらも詳細は以降のセクションで説明します。
アクティビティバーとサイドバー
アクティビティバーとは初期状態で画面左端にアイコンが縦に並んでいるエリアのことで、特に重要な機能をワンクリックで切り替える事ができます。これらの機能は主にアクティビティバーの右側にあるサイドバーに画面が展開され、そこから利用する事ができます。ここでは、初期状態でアクティビティバーに設定されている機能アイコンで利用できる機能について、アイコンの順番にしたがって解説していきます。
エクスプローラービュー
主に今タブとして開かれているファイルの一覧や、フォルダを開いている際はそのフォルダの中身の一覧を表示するビューです。その他、現在アクティブなタブのファイルに関して、以下の情報を表示したサブビューがあります。
・アウトライン：開いているファイル内の関数やクラスなどのシンボル構造を一覧化し、クリックで該当箇所へジャンプできます。
・タイムライン：ファイルの変更履歴を時系列で表示し、過去の編集内容やコミット履歴を確認できます。
検索ビュー
現在開いているフォルダやファイルを対象に、文字列の検索と置換を行う画面です。検索結果はリスト表示され、クリックでジャンプする事ができます。
ソース管理ビュー
ファイルの変更履歴などの管理が行えるビューです。Gitというバージョン管理システムを利用しているため、別途Gitのインストールが必要になります。
個人での学習においてはひとまず気にする必要のない機能ですが、アプリケーションを公開した後に何度も修正をかけたり、大規模なチーム開発で複数人で同一のコードを更新する場合などには重要になってくる機能です。
実行とデバッグビュー
プログラムの実行設定を管理し、ブレークポイントや変数のウォッチなどのデバッグ情報を一画面で確認できるビューです。コードの挙動を逐次追いかけながら開発を進めることができます。このビューの詳細は、デバッグの詳しい方法と共にまた別記事で解説します。
拡張機能ビュー
拡張機能ビューは、VSCodeの機能を追加・管理するためのマーケットプレイス画面です。検索とフィルタリングで目的のプラグインを見つけ、インストールや更新を行うことで開発環境を柔軟にカスタマイズできます。パネル
画面下部に展開される領域では、複数のタブを切り替えながらさまざまな開発支援機能を利用できます。以下に主要なパネル機能を解説します。問題パネル
構文エラーや警告など、コードに起きている問題をリアルタイムで一覧表示します。表示された項目をクリックするだけで該当コード行にジャンプできるため、エラー修正や警告対処を迅速に行えます。出力パネル
ビルドやアプリケーション実行のログ、また拡張機能のメッセージが表示といった各種のログが出力される場所です。コードを実行した際の状況やエラー情報をここでまとめて確認できます。デバッグコンソール
デバッグ実行中に式の評価や関数呼び出しをインタラクティブに行えるコンソールです。たとえば変数の中身を一時的に変更するなどの簡単な実験を行いたい時に、わざわざコードを直してやり直すことなく行えて便利です。
統合ターミナル
VSCode内でシェルコマンドを実行するための画面です。プロジェクトに必要なライブラリをインストールする時など、Powershell(Windows)やターミナル(Mac)などを立ち上げてコマンドを実行する必要がある場面がありますが、その際に画面を移動せず、VSCode内で完結させる事ができます。ポートパネル
ポートビューは、リモート開発やコンテナ環境で使用されるネットワークポートを管理する領域です。Webアプリを開発する時などに利用する事になる機能です。まとめ
VSCode解説編、今回はひとまず一通り画面の見方とその役割について、理解していただけたと思います。エディタ、サイドバー、パネルなどの各部位にどのような機能があり、作業環境を構成していかを把握することが、VSCodeを使いこなす第一歩です。今後は、コーディングやデバッグなど実際のプログラミング作業に必要な機能の紹介、更に機能を拡充する拡張機能の導入方法など、更にVSCodeの理解を深めるための記事もお届けしていく予定です。
