VSCode（Visual Studio Code）は、ソースコードの編集だけでなく、ファイル管理、検索、Git操作、デバッグ、ターミナル、拡張機能の管理などを1つの画面で行えるコードエディターです。
VSCodeはコマンド操作にも対応していますが、画面上のアイコンやメニューをクリックして操作できるGUIも充実しています。
そのため、コマンド操作に慣れていない初心者でも比較的使いやすいのが特徴です。
また、VSCodeでは画面レイアウトを柔軟に変更できます。
サイドバーの位置を変えたり、エディターを分割したり、ターミナルを画面の横側へ移動したりできるため、自分の作業スタイルに合わせて環境を整えられます。
VSCodeのGUIを構成する主な画面
VSCodeの画面全体は「Workbench」と呼ばれます。
Workbenchは主に、次のような領域で構成されています。
- Activity Bar
- Primary Side Bar
- Secondary Side Bar
- Editor
- Panel
- Status Bar
- Title Bar
それぞれ役割が異なるため、基本的な位置と機能を理解しておくとVSCodeを使いやすくなります。
Activity Bar
Activity Barは、VSCodeの主要な機能を切り替えるための領域です。
初期状態では画面左側に表示されることが多く、代表的な項目として次のものがあります。
- Explorer
- Search
- Source Control
- Run and Debug
- Extensions
たとえば、Explorerを選択するとファイル一覧が表示され、Searchを選択するとプロジェクト全体の検索画面へ切り替わります。
VSCodeを使い始めたばかりの場合は、
「Activity Barは機能を切り替える場所」
と覚えておくと分かりやすいでしょう。
なお、Activity Barの位置や表示方法は設定によって変更できます。
Primary Side Bar
Primary Side Barは、Activity Barで選択した機能の内容を表示する領域です。
たとえばExplorerを選択すると、Primary Side Barにファイルやフォルダの一覧が表示されます。
一般的には画面左側にありますが、設定によって右側へ移動することも可能です。
WindowsやLinuxのデフォルト設定では、
Ctrl + B
でPrimary Side Barの表示・非表示を切り替えられます。
コードを書くスペースを広く使いたいときに便利です。
Secondary Side Bar
VSCodeにはPrimary Side Barとは別に、Secondary Side Barも用意されています。
Primary Side Barの反対側に表示できる補助的なサイドバーです。
たとえば、
- 左側にExplorer
- 中央にEditor
- 右側にChat
といったレイアウトにできます。
AIチャットや補助的なビューを表示しながらコードを書く場合に便利です。
Editor
Editorは、VSCodeの中央にあるコードを編集するための領域です。
Explorerなどからファイルを選択すると、そのファイルがEditorに表示されます。
VSCodeで最も頻繁に使う部分といえるでしょう。
Panel
Panelは、TerminalやProblemsなどの補助的な機能を表示する領域です。
代表的なものには次があります。
- Terminal
- Problems
- Output
- Debug Console
初期状態ではEditorの下側に表示されることが多いですが、VSCodeではPanelを上・下・左・右へ移動できます。
Status Bar
Status Barは、VSCode画面の下部に表示される領域です。
現在開いているファイルや開発環境に関する情報を確認できます。
たとえば、次のような情報が表示されます。
- Gitブランチ
- エラーや警告
- 行番号
- 列番号
- インデント
- 文字コード
- 改行コード
- 言語モード
ただし、表示される内容は開いているファイルや導入している拡張機能によって異なります。
参考サイト
初心者向け｜Visual Studio Codeの画面構成を図解で解説
Explorerでファイルやフォルダを管理する
Explorerは、プロジェクト内のファイルやフォルダを管理するためのビューです。
単にファイルを探すだけではなく、作成、削除、移動、名前変更なども行えます。
フォルダを開く
Web開発やプログラミングでは、単独のファイルだけではなくプロジェクトのフォルダ単位でVSCodeを開くのが一般的です。
メニューから、
File → Open Folder
を選択し、作業したいフォルダを指定します。
フォルダを開くと、Explorerにプロジェクト内のファイル構成が表示されます。
たとえばWebサイトであれば、次のような構成を確認できます。
my-site
├─ index.html
├─ css
│ └─ style.css
├─ js
│ └─ script.js
└─ images
新しいファイルを作成する
Explorerの「New File」から、新しいファイルを作成できます。
たとえば、
index.html
style.css
script.js
README.md
などを作成できます。
ファイル名の拡張子によって、VSCodeが言語を自動的に判別することもあります。
新しいフォルダを作成する
Explorerの「New Folder」を使えば、新しいフォルダを作成できます。
Web制作では、
css
js
images
fonts
などのフォルダを作成することがあります。
ファイルを移動する
Explorerでは、ドラッグ＆ドロップでファイルを別のフォルダへ移動できます。
ただし、HTMLやCSS、JavaScriptなどで相対パスを使っている場合、ファイルを移動すると参照先が変わる可能性があります。
たとえば、
<img src="images/logo.png">
のような記述がある場合、画像ファイルを別の場所へ移動するとパスの修正が必要になることがあります。
Editorでコードを編集する
Editorは、実際にソースコードを書くための中心的な領域です。
タブで複数ファイルを切り替える
複数のファイルを開くと、Editor上部にタブが表示されます。
たとえば、
index.html
style.css
script.js
を同時に開き、タブをクリックしながら切り替えられます。
Webブラウザのタブに近い感覚で利用できます。
Editorを分割する
VSCodeではEditorを複数に分割できます。
たとえば、
左：index.html
右：style.css
という状態にすれば、HTMLを確認しながらCSSを書くことができます。
フロントエンド開発では非常に便利な機能です。
ファイルタブをドラッグしたり、タブの右クリックメニューから分割したりすることで配置を変更できます。
Searchでプロジェクト全体を検索する
Searchは、プロジェクト内のファイルの内容を横断検索するための機能です。
Explorerが「ファイルやフォルダを管理する場所」なのに対し、Searchは「ファイルの中身を探す場所」と考えると分かりやすいでしょう。
文字列を検索する
たとえば、
header
と検索すると、プロジェクト内で「header」という文字列が使われている場所を一覧表示できます。
複数のHTMLやCSS、JavaScriptファイルを扱う場合に便利です。
文字列を一括置換する
Searchでは検索だけでなく置換もできます。
たとえば、
old-class
を、
new-class
へ変更するといった操作ができます。
一括置換は便利ですが、意図していない場所まで変更する可能性があります。
置換前に検索結果を確認することが重要です。
Source ControlでGitを操作する
VSCodeにはGitと連携するためのGUI機能が標準で用意されています。
ただし、GitそのものがVSCodeに内蔵されているわけではありません。
基本的には、PC側にGit本体をインストールしておく必要があります。
変更されたファイルを確認する
Git管理されているプロジェクトでファイルを変更すると、Source Controlに変更内容が表示されます。
たとえば、
M index.html
M style.css
と表示される場合があります。
「M」はModifiedを意味し、そのファイルが変更されていることを示します。
変更内容を比較する
Source Controlから変更されたファイルを開くと、変更前と変更後の内容を比較できます。
VSCodeのDiff Editorでは、画面幅や設定によって、
- 左右に並べるSide by Side表示
- 同じ画面内で確認するInline表示
などが利用されます。
どこを変更したのかを視覚的に確認できるため、コードレビューや修正内容の確認に便利です。
ステージしてコミットする
Gitでは、基本的に次の流れで変更を記録します。
ファイルを変更
↓
Stage
↓
Commit
VSCodeのSource Controlから変更ファイルをステージし、コミットメッセージを入力してコミットできます。
つまり、ターミナルで、
git add .
git commit -m "Update design"
と操作しなくても、基本的なGit操作をGUIから実行できます。
Run and Debugでプログラムをデバッグする
Run and Debugは、プログラムの実行やデバッグを行うための機能です。
プログラムの不具合を調べるときに役立ちます。
ブレークポイントを設定する
コードの行番号付近をクリックすると、ブレークポイントを設定できます。
たとえば、
const user = getUser();
console.log(user);
というコードがある場合、
const user = getUser();
の行で処理を一時停止できます。
その時点で変数の内容などを確認できるため、エラーの原因を調査しやすくなります。
Extensionsで機能を追加する
VSCodeは拡張機能を追加することで機能を増やせます。
Activity BarのExtensionsから拡張機能を検索し、インストールできます。
拡張機能で追加できる機能
拡張機能にはさまざまな種類があります。
たとえば、
- プログラミング言語のサポート
- Linter
- Formatter
- Git関連機能
- Docker関連機能
- AI支援機能
- テーマ
- アイコンテーマ
などがあります。
拡張機能によっては、Activity BarやSide Bar、Status Barなどに新しいGUIが追加される場合もあります。
拡張機能は必要なものを選ぶ
拡張機能は便利ですが、数を増やせば必ず便利になるわけではありません。
拡張機能によっては機能が重複したり、画面が複雑になったりする場合があります。
必要な機能を確認しながら導入するのがおすすめです。
Panelを使う
Panelは、Editorとは別に補助的な情報を確認するための領域です。
Problems
Problemsでは、コード内で検出されたエラーや警告を確認できます。
たとえば、
Problems 3
と表示されている場合、3件の問題が検出されている可能性があります。
項目をクリックすると、該当するコードの位置へ移動できます。
Output
Outputでは、VSCodeや拡張機能などが出力する情報を確認できます。
拡張機能が正常に動作しない場合の原因調査などにも使われます。
Debug Console
Debug Consoleは、デバッグ中の情報を確認するための機能です。
環境によっては、式や変数を入力して内容を確認することもできます。
統合Terminalを使う
VSCodeには統合Terminalが搭載されています。
そのため、コードを書きながら別のターミナルアプリへ切り替える必要がありません。
Terminalでコマンドを実行する
Windows環境では、設定に応じてPowerShellやCommand Promptなどを利用できます。
たとえばNode.jsのプロジェクトでは、
npm install
npm run dev
といったコマンドをVSCode内で実行できます。
Gitについても、
git status
git pull
git push
などを実行できます。
GUIとCLIを1つの画面で使い分けられるのは、VSCodeの大きな特徴です。
Terminalは複数開ける
VSCodeでは、複数のTerminalを開くこともできます。
さらにTerminalを分割して、
左：開発サーバー
右：Git操作
といった使い方も可能です。
Status Barを活用する
Status Barには、現在のファイルやワークスペースに関するさまざまな情報が表示されます。
言語モードを変更する
VSCodeがファイルの種類を正しく認識していない場合は、Status Barから言語モードを変更できます。
たとえばJavaScriptとして扱いたい場合は、
JavaScript
を選択します。
インデントを変更する
Status Barからインデント設定を変更することもできます。
たとえば、
Spaces: 4
と表示されている部分から、スペース数などを変更できます。
Command Paletteを使う
VSCodeを効率よく使ううえで重要なのがCommand Paletteです。
Windows・Linuxのデフォルト設定では、
Ctrl + Shift + P
で開けます。
機能名からコマンドを探せる
Command Paletteでは、VSCodeのさまざまな操作を検索して実行できます。
たとえば、
Format Document
Preferences: Open Settings
Git: Clone
View: Toggle Terminal
View: Reset View Locations
などのコマンドがあります。
メニューのどこにある機能か分からない場合でも、Command Paletteで検索すれば見つけやすくなります。
VSCodeを使いこなすうえで、非常に重要な機能です。
VSCodeの設定画面をGUIで操作する
VSCodeの設定は、GUIから変更できます。
設定画面には検索機能もあるため、変更したい項目を探しやすくなっています。
GUIから変更できる主な設定
たとえば、次のような設定を変更できます。
- フォントサイズ
- 自動保存
- テーマ
- タブサイズ
- 行の折り返し
- ミニマップ
- Terminal
- Side Bar
- 拡張機能
設定ファイルを直接編集しなくても、多くの項目をGUIで変更できます。
VSCodeのGUIレイアウトをカスタマイズする
VSCodeは、GUIの配置を柔軟に変更できるのが特徴です。
Primary Side Barを右側へ移動する
Primary Side Barは一般的には左側にありますが、右側へ移動することもできます。
好みやディスプレイ環境に合わせて変更可能です。
Panelを移動する
Terminalなどを表示するPanelは、下側だけでなく、
- 上
- 下
- 左
- 右
へ移動できます。
横長のモニターではTerminalを右側に配置するなど、作業しやすい形に変更できます。
ビューをドラッグ＆ドロップする
VSCodeでは各ビューをドラッグ＆ドロップして移動できます。
たとえば、
Primary Side Bar：Explorer
Editor：コード
Secondary Side Bar：Chat
Panel：Terminal
といった配置にできます。
レイアウトを元に戻す
ビューの配置を変更しすぎて元に戻せなくなった場合は、Command Paletteから、
View: Reset View Locations
を実行できます。
ビューの配置を初期状態へ近い形に戻したい場合に便利です。
VSCodeのGUIを効率よく使うショートカット
GUIだけでもVSCodeは使用できますが、よく使う操作だけショートカットを覚えると作業速度が上がります。
覚えておきたい基本ショートカット
Windows・Linuxのデフォルト設定では、次のショートカットが便利です。
| 操作 | ショートカット |
|---|---|
| Command Palette | Ctrl + Shift + P |
| Primary Side Barの表示切替 | Ctrl + B |
| Quick Open | Ctrl + P |
| ファイル内検索 | Ctrl + F |
| プロジェクト内検索 | Ctrl + Shift + F |
| Settings | Ctrl + , |
| Terminalの表示切替 | `Ctrl + “ |
ショートカットはユーザーが変更できるため、環境によって異なる場合があります。
現在の割り当てを確認したい場合は、Keyboard Shortcuts画面を確認するとよいでしょう。
初心者がVSCodeのGUIを覚える順番
VSCodeには非常に多くの機能があります。
最初からすべて覚える必要はありません。
まずは次の順番で覚えると理解しやすいでしょう。
最初にExplorerとEditorを覚える
まず、
Explorer
↓
Editor
の使い方を覚えます。
ファイルを開き、コードを編集できれば基本的な作業を始められます。
次にSearchとTerminalを覚える
次に、
Search
Terminal
を覚えると作業効率が上がります。
プロジェクト全体の検索やコマンド実行ができるようになります。
Gitやデバッグへ進む
慣れてきたら、
Source Control
Run and Debug
Extensions
Command Palette
を覚えるとよいでしょう。
この段階まで進めば、VSCodeの主要なGUI機能をかなり活用できるようになります。
VSCodeのGUIを使うメリット
VSCodeのGUIには、初心者から上級者まで利用しやすいさまざまなメリットがあります。
初心者でも操作しやすい
ファイル作成や検索、Git操作などを視覚的に行えます。
コマンド操作に慣れていない場合でも、基本的な開発作業を始めやすいでしょう。
GUIとCLIを併用できる
VSCodeではGUIとCLIのどちらか一方を選ぶ必要はありません。
たとえばGitの場合、
Source Control
を使うことも、
git status
git add .
git commit
git push
と操作することもできます。
作業内容によって使いやすい方法を選べます。
レイアウトの自由度が高い
Primary Side Bar、Secondary Side Bar、Editor、Panelなどを移動したり、表示・非表示を切り替えたりできます。
ノートPCと大型モニターで異なるレイアウトを使うなど、自分の環境に合わせて調整できます。
拡張機能でGUIを増やせる
VSCodeは拡張機能によって新しい機能や画面を追加できます。
そのため、単なるテキストエディターではなく、用途に合わせて開発環境を拡張していける点が大きな特徴です。
まとめ
VSCodeのGUIは、Editorを中心に、Activity Bar、Primary Side Bar、Secondary Side Bar、Panel、Status Barなどで構成されています。
基本的には、
Activity Barで機能を選ぶ
↓
Side Barでファイルや情報を確認する
↓
Editorでコードを書く
↓
PanelやTerminalで実行・確認する
という流れで使うと理解しやすいでしょう。
初心者の場合は、まずExplorer、Editor、Search、Terminalの使い方から覚えるのがおすすめです。
その後、Source Control、Run and Debug、Extensions、Command Paletteへと利用範囲を広げることで、VSCodeをより効率的に活用できます。
また、VSCodeはGUIのレイアウトを自由に変更できるため、単に用意された画面を使うだけでなく、自分が作業しやすい環境へカスタマイズできる点も大きな魅力です。
以上、VSCodeのGUIとはについてでした。
最後までお読みいただき、ありがとうございました。
