VSCodeの画面構成

VSCodeの画面は大きく分けて5つのエリアで構成されています。

画面構成

┌─────────────────────────────────────────┐
│            メニューバー                  │
├────────┬────────────────────────────────┤
│        │                                │
│  サイド│       エディタエリア            │
│  バー  │                                │
│        │                                │
│        ├────────────────────────────────┤
│        │       パネルエリア              │
├────────┴────────────────────────────────┤
│            ステータスバー                │
└─────────────────────────────────────────┘

各エリアの説明

1. サイドバー（左側）

よく使うアイコン：

• エクスプローラー: ファイル一覧を表示
• 検索: ファイル内検索
• ソース管理: Git操作
• 実行とデバッグ: テスト実行
• 拡張機能: 拡張機能の管理

2. エディタエリア（中央）

コードを書く場所です。複数のファイルをタブで開けます。

3. パネルエリア（下部）

• ターミナル: コマンドを実行
• 問題: エラーや警告を表示
• 出力: ログを表示

4. ステータスバー（最下部）

• 現在の行番号
• 文字コード
• 言語モード
• Git ブランチ名

パネルの開き方

ターミナルを開く方法：

• メニュー: 「表示」→「ターミナル」
• ショートカット: Ctrl + `（バッククォート）