VS Codeを開いてみたけど、ボタンが多くて、どこを押せばいいのか分からない…。
このページでは、画面のボタンを番号つきの画像で、ひとつずつ説明します。左端のボタン、上の文字を入れるところ、エージェント、右上のボタン、下の帯まで、順番に見ていきます。
全部を覚えなくて大丈夫です。最初によく使うのは、左端のエクスプローラーと拡張機能、右側のAIの欄くらい。気になったボタンを、あとで調べる辞書のように使ってください。
このページのゴール画面のどこに何があるか分かる
🗺️ 画面は、7つの場所に分かれている
まずは全体の地図から。VS Codeの画面は、大きく7つの場所に分かれています。
VS Codeの画面の全体図
VS CodeのWeb版（ブラウザで動く版）で撮影し、枠と番号を追記した画像です。パソコン版も、場所の並びは同じです。画像を押すと拡大できます。- ① 左端のボタン列
- 正式には「アクティビティ バー」。押すと、となりの②の中身が切り替わります。
- ② サイド バー
- ファイルの一覧や検索の結果などが出る欄。①で選んだものが表示されます。
- ③ エディター
- ファイルを開いて、書いたり直したりする場所。上に、開いているファイルのタブが並びます。
- ④ パネル（下の欄）
- 「ターミナル」（コマンドを打つ欄）や「問題」「出力」が出ます。Gitの回で使います。
- ⑤ ステータス バー（下の帯）
- 今開いているファイルの状態が、小さな文字で並びます。
- ⑥ コマンド センター
- 上の、文字を入れるところ。ファイルやVS Codeの機能を名前で探せます。
- ⑦ レイアウトのボタン
- 左・下・右の欄を、出したりしまったりします。
🧭 左端のボタン列
画面のいちばん左に、縦に並んだボタンです。押すと、となりの欄（サイド バー）の中身が切り替わります。
左端のボタン、上から順に
筆者のパソコン版VS Code（1.146）の画面に、番号と名前を追記しました。⑥⑦⑧は、入れた拡張機能によって出るボタンです。真ん中の何もない部分は省略しています。画像を押すと拡大できます。- ① エクスプローラー
- 開いたフォルダの中のファイルが並びます。いちばんよく使うボタンです。ファイルを押すと、真ん中のエディターで開きます。
Mac：⌘＋Shift＋E Windows：Ctrl＋Shift＋E - ② 検索
- フォルダの中のすべてのファイルから、言葉を探します。見つけた言葉を、まとめて置き換えることもできます。
Mac：⌘＋Shift＋F Windows：Ctrl＋Shift＋F - ③ ソース管理
- Gitで記録する前の変更が並ぶ場所です。区切りの記録（コミット）も、ここから行います。Git・GitHubの回で使います。
Mac：Control＋Shift＋G Windows：Ctrl＋Shift＋G - ④ 実行とデバッグ
- プログラムを動かして、どこでおかしくなるかを調べる場所です。メモや文章を書くだけなら使いません。
Mac：⌘＋Shift＋D Windows：Ctrl＋Shift＋D - ⑤ 拡張機能
- 日本語パックやAIなど、VS Codeに機能を足す場所です。日本語にする回で最初に使います。
Mac：⌘＋Shift＋X Windows：Ctrl＋Shift＋X - ⑥ テスト（フラスコのマーク）
- プログラムが正しく動くかを確かめる「テスト」を動かす場所です。Pythonなどの拡張機能を入れると出てきます。最初は使いません。
- ⑦ Python
- 「Python Environments」という拡張機能のボタンで、Pythonを動かす環境を管理します。Pythonを使わない人の画面には出ません。
- ⑧ Claude Code（白い星のマーク）
- Claude Codeとの、これまでの会話の一覧です。Claude Codeの拡張機能を入れると出てきます。
- ⑨ アカウント（下の丸いマーク）
- GitHubなど、VS Codeにログインしているアカウントです。ログインやログアウトも、ここから行います。
- ⑩ 管理（歯車のマーク）
- 設定・キーボードのショートカット・テーマ（画面の色）・更新の確認などのメニューです。文字の大きさの設定も、ここから開きます。
📁 エクスプローラーの中
左端の①エクスプローラーを押すと出る欄です。フォルダの中身のほかに、いくつかの欄が上下に並んでいます。
エクスプローラーの中の欄
筆者の画面に番号を追記しました。開いているファイルの名前はぼかしています。画像を押すと拡大できます。- ① その他の操作（…）
- 「開いているエディター」「アウトライン」「タイムライン」など、どの欄を出すかを選べます。
- ② 開いているエディター
- 今開いているファイルの一覧です。×で閉じられます。タブが増えすぎたときに便利です。
- ③ フォルダ名（例：01_ai_news）
- 開いたフォルダの中身です。「＞」を押すと、中のファイルが見えます。フォルダ名にマウスを合わせると、新しいファイル・新しいフォルダを作るボタンが出ます。
- ④ アウトライン
- 開いているファイルの見出しの一覧です。Markdownのファイルなら「#」で書いた見出しが並び、押すとその場所へ移動します。
- ⑤ タイムライン
- 開いているファイルの、保存やGitで記録した履歴です。前の状態と見比べられます。くわしくはGit・GitHubの回で。
🔎 上の入力欄と、エージェント
画面のいちばん上の段です。まん中の文字を入れるところは、VS Codeの「検索窓」のようなものです。
いちばん上の段のボタン
筆者のパソコン版VS Code（1.146）の画面に、番号を追記しました。入力欄のまん中の空いた部分は「…」で省略しています。画像を押すと拡大できます。- ① 前に戻る
- 直前に見ていたファイルや場所へ戻ります。ブラウザの「戻る」と同じ感覚です。
Mac：Control＋− Windows：Alt＋← - ② 次に進む
- ①で戻ったあと、また先へ進みます。
Mac：Control＋Shift＋− Windows：Alt＋→ - ③ コマンド センター（上の文字を入れるところ）
- 開いているフォルダの名前が出ています。押して文字を入れると、こんなことができます。
- ファイル名を入れる：そのファイルを開けます（Mac：⌘＋P Windows：Ctrl＋P と同じ）
- 先頭に「>」を付ける：VS Codeのすべての機能（コマンド）を、名前で探せます（Mac：⌘＋Shift＋P Windows：Ctrl＋Shift＋P と同じ）
- 「?」を入れる：ここで何ができるかの一覧が出ます
ボタンの場所を忘れても、ここに名前を入れれば見つかります。 - ④ チャット（吹き出しとキラキラ）
- VS Codeに最初から入っているAIチャット（GitHub Copilot）の欄を、出したりしまったりします。CodexやClaude Codeとは別のAIです。Copilotを使わないなら、押さなくて大丈夫です。
- ⑤ ▾（チャットのメニュー）
- ④のチャットを開く、エージェント ウィンドウで開く、など、チャットに関するメニューが出ます。
- ⑥ エージェント ウィンドウを開く（六角形のマーク）
- AIエージェントとの作業を、ふだんの編集画面とは別の、専用のウィンドウでまとめて見るための画面を開きます。最近のVS Codeに加わった新しい画面です。この連載のようにClaude CodeやCodexを右の欄で使うなら、押さなくても大丈夫です。
🧩 ファイルの上のボタンと、AIの切り替え
開いているファイルのタブの右側にも、ボタンが並びます。AIの拡張機能を入れると、ここにAIを開くボタンが増えます。
タブの横のボタンと、右の欄のタブ
筆者のパソコン版の画面に、番号を追記しました。②③④は、それぞれの拡張機能を入れたときに出るボタンです。画像を押すと拡大できます。- ① タブ
- 開いているファイルです。押して切り替え、マウスを合わせると出る×で閉じます。名前の横に●が付いていたら、まだ保存していない印です。
- ② Claude Codeを開く（オレンジの星）
- Claude Codeの会話の画面を開きます。Claude Codeの回で使います。
- ③ Gemini Code Assist（白いキラキラ）
- 開いているファイルについて、Geminiに頼めることのメニュー（スマート アクション）です。Gemini Code Assistを入れてログインしているときに出ます。使える条件はGeminiの回で確かめてください。
- ④ Codexを開く（OpenAIのマーク）
- Codexの画面を開きます。Codexの回で使います。
- ⑤ エディターを右に分割
- 今のファイルを左右に並べて表示します。別のファイルと見比べながら書くときに便利です。
- ⑥ その他の操作（…）
- タブをまとめて閉じる、などのメニューです。
- ⑦⑧ 右の欄のタブ（Claude Code・Codex）
- AIの拡張機能を入れると、右の欄（セカンダリ サイド バー）にタブとして並びます。押して、使うAIを切り替えます。
🪟 右上のボタン
画面の右上には、欄を出したりしまったりするボタンと、右の欄（AI）のボタンが並びます。
右上のボタンと、Claude Codeの欄のボタン
筆者のパソコン版の画面で、右の欄にClaude Codeを開いているところです。⑦〜⑨はClaude Codeのボタンで、Codexを開いているときは別のボタンが並びます。画像を押すと拡大できます。- ① レイアウトのカスタマイズ
- どの欄を出すか、左右どちらに置くかなどを、まとめて選べます。
- ② 左の欄を出す・しまう
- プライマリ サイド バー（エクスプローラーなど）です。書く場所を広くしたいときに。
Mac：⌘＋B Windows：Ctrl＋B - ③ 下の欄を出す・しまう
- パネル（ターミナルなど）です。
Mac：⌘＋J Windows：Ctrl＋J - ④ 右の欄を出す・しまう
- セカンダリ サイド バー（Claude Code・Codex）です。AIの欄が消えたら、まずここを押します。
Mac：⌘＋Option＋B Windows：Ctrl＋Alt＋B - ⑤ 右の欄を広げる（四角い枠）
- 右の欄を大きく広げます。もう一度押すと元に戻ります。
- ⑥ 右の欄を閉じる（×）
- 右の欄をしまいます。④のボタンで、また出せます。
- ⑦ しおり
- Claude Codeの返事の下にある、しおりのボタンで残した返事の一覧です。あとで読み返したい答えを取っておけます。
- ⑧ 過去の会話（時計のマーク）
- 前の会話（セッション）を、一覧から開き直せます。
- ⑨ 新しい会話（吹き出しと＋）
- 新しい会話を始めます。話題が変わったら新しくすると、AIが前の話に引っぱられにくくなります。
📏 下の帯（ステータス バー）
画面のいちばん下の、細い帯です。今のファイルの状態が並び、押すと変更できるものもあります。
下の帯に並ぶもの
Web版で撮影し、番号を追記しました。途中の項目は「…」で省略しています。画像を押すと拡大できます。- ① リモート（><のマーク）
- 別のパソコンやサーバーにつないで作業するときの入口です。最初は使いません。
- ② 問題（⊗と⚠の数）
- エラーと警告の数です。押すと、下の欄に「問題」の一覧が出ます。
- ③ 行・列
- 文字を入れる位置（カーソル）が、何行目の何文字目か。押すと、行の番号を入れてそこへ移動できます。
- ④ スペース
- Tabキーで字下げしたときに入る、空白の数です。
- ⑤ UTF-8
- 文字コード（文字の保存のしかた）です。文字化けしたときは、ここから開き直せます。
- ⑥ LF
- 改行の種類です。ふだんは触らなくて大丈夫です。
- ⑦ { }（言語の状態）
- そのファイルの種類で使える機能の状態です。
- ⑧ Markdown（言語モード）
- ファイルの種類です。押すと変えられます。種類によって、色分けや入力の手助けが変わります。
- ⑨ Copilot の状態
- VS Codeに入っているAI（Copilot）の状態です。使わないなら気にしなくてOK。
- ⑩ 通知（ベル）
- 拡張機能の更新やエラーなど、お知らせがたまる場所です。
💡 ボタンが見つからないときは
- マウスを合わせて、少し待つ。ボタンの名前が出てきます。
- 名前で探す。Macは⌘＋Shift＋P、WindowsはCtrl＋Shift＋Pを押し、「拡張機能」「サイド バー」のように機能の名前を入れます。
- 欄が消えたら、右上のボタン。左・下・右の欄は、右上の②③④で出し直せます。
ここまでできたらOK
左端のボタンを押して、となりの欄が切り替わるのを確かめた。
全体の流れへ戻る →