「VSCodeの下に出てくるパネルって何？」
「ターミナルと出力とデバッグコンソールって、何が違うの？」
「パネルが邪魔！表示位置を変えたい」
VSCodeを使っていると、画面下部に「ターミナル」「問題」「出力」「デバッグコンソール」などのタブが並んでいますよね。
でも、初めての方には「これって何に使うの？」「違いがよくわからない」と思うかもしれません。
この記事では、VSCodeのパネルとは何か、各パネルの役割、表示・非表示の方法、位置の変更方法など、パネルに関するすべてを初心者の方にもわかりやすく解説します。
VSCodeのパネルとは
パネル（Panel）とは、VSCodeの画面下部（デフォルト）に表示される情報表示エリアのことです。
パネルの基本構造
パネルには、主に以下の4つのタブがあります。
- 問題（PROBLEMS） – コードのエラーや警告を表示
- 出力（OUTPUT） – 拡張機能やツールのログを表示
- デバッグコンソール（DEBUG CONSOLE） – デバッグ実行時の情報を表示
- ターミナル（TERMINAL） – コマンドラインを実行
他にも、拡張機能によって「ポート」「タスク」などのタブが追加されることがあります。
パネルとエディタの違い
- エディタ（Editor）：コードを書く場所
- パネル（Panel）：情報を見る場所
パネルは、あなたが書いたコードに関する様々な情報を表示してくれる「情報ウィンドウ」なんです。
パネルの基本操作
まず、パネルの基本的な表示・非表示の方法を見ていきましょう。
パネルを表示する
方法1：ショートカットキー
Windows/Linux:
Ctrl + JMac:
Cmd + Jこのショートカットキーで、パネルの表示・非表示を切り替えられます。
方法2：メニューから
画面上部のメニューから「表示」→「パネル」を選択
パネルを閉じる（非表示にする）
パネルを表示したときと同じショートカットキー（Ctrl + J または Cmd + J）をもう一度押せば、パネルが閉じます。
または、パネル右上の「×」ボタンをクリックでも閉じられます。
パネルのサイズを変更する
パネルの上端（エディタとの境界線）にマウスカーソルを合わせると、カーソルが上下矢印に変わります。
そのままドラッグすれば、パネルのサイズを自由に変更できます。
パネルを最大化する
パネル右上の「↑」アイコンをクリックすると、パネルがウィンドウいっぱいに広がります。
もう一度クリックすれば、元のサイズに戻ります。
ショートカットキー（最大化の切り替え）：
最大化機能にショートカットキーは標準で割り当てられていないので、よく使う場合は自分で設定しましょう。
コマンド：workbench.action.toggleMaximizedPanel
パネルの表示位置を変更する
パネルは、画面下部（デフォルト）だけでなく、右側や左側にも配置できます。
パネルを右側に表示
手順：
- パネルのタブ（「ターミナル」「問題」など）の上で右クリック
- 「パネルを右に移動」または「Move Panel Right」を選択
これで、パネルが画面右側に表示されます。
使いどころ：
- デュアルモニターで作業するとき
- ターミナルを広く使いたいとき
- 縦長のコードを見やすくしたいとき
パネルを左側に表示
右クリックメニューから「パネルを左に移動」を選択
パネルを下部に戻す
右クリックメニューから「パネルを下に移動」を選択
どの位置が使いやすい？
下部（デフォルト）：
- 一般的な配置
- 横長の画面に向いている
- エディタの縦幅を広く使える
右側：
- デュアルモニターに最適
- ターミナル作業がメインのとき
- コードとターミナルを同時に見たいとき
左側：
- ファイルツリーとターミナルを同時に見たいとき（あまり使われない）
各パネルの詳しい説明
それぞれのパネルが何に使われるのか、詳しく見ていきましょう。
1. 問題（PROBLEMS）
役割：コードのエラーや警告を表示する
VSCodeが自動的にコードをチェックして、問題点を教えてくれます。
表示されるもの：
- エラー（Error）：赤色で表示。このまま実行できない重大な問題
- 警告（Warning）：黄色で表示。動くけど改善した方がいい問題
- 情報（Info）：青色で表示。参考情報
表示方法：
ショートカットキー：
- Ctrl + Shift + M（Windows/Linux）
- Cmd + Shift + M（Mac）
または、メニューから「表示」→「問題」
使い方の例：
# 例：Pythonでエラーがある場合
def hello()
print("Hello") # インデントエラーこのコードを書くと、「問題」パネルに「インデントエラー」と表示されます。
使いどころ：
- コードを書いたら、まず「問題」パネルをチェック
- エラーや警告がないか確認する習慣をつける
- 表示された問題をクリックすると、該当箇所にジャンプできる
2. 出力（OUTPUT）
役割：拡張機能やツールのログを表示する
VSCodeの拡張機能や、Git、Pythonなどのツールが「今何をしているか」を記録する場所です。
表示されるもの：
- 拡張機能の動作ログ
- Gitのコマンド実行結果
- 言語サーバーの動作状況
- その他のツールの出力
表示方法：
ショートカットキー：
- Ctrl + Shift + U（Windows/Linux）
- Cmd + Shift + U（Mac）
または、メニューから「表示」→「出力」
ドロップダウンリストで出力元を選択：
「出力」パネルには、右側にドロップダウンリストがあります。
ここで、どのツールの出力を見るかを選択できます。
- Git：Gitのコマンド実行ログ
- Python：Python拡張機能のログ
- 拡張機能ホスト：拡張機能全般のログ
- その他
使いどころ：
- 拡張機能がうまく動かないとき
- Gitのコマンドがエラーになったとき
- デバッグ情報を確認したいとき
注意：
普段はあまり使わないパネルです。何か問題が起きたときに「そういえばこんなのがあったな」と思い出せれば十分です。
3. デバッグコンソール（DEBUG CONSOLE）
役割：デバッグ実行中にプログラムと対話する
デバッグ実行（F5）をしているときに使う特別なパネルです。
表示されるもの：
- デバッグ実行中のプログラムの出力
- 変数の値
- デバッグコマンドの実行結果
表示方法：
ショートカットキー：
- Ctrl + Shift + Y（Windows/Linux）
- Cmd + Shift + Y（Mac）
または、メニューから「表示」→「デバッグコンソール」
使い方の例：
デバッグ実行中に、このパネルで以下のようなことができます。
変数の値を確認：
// デバッグコンソールに入力
name
// 結果：'John'式を評価：
// デバッグコンソールに入力
age + 10
// 結果：35使いどころ：
- ブレークポイントでプログラムを止めているとき
- 変数の値を確認したいとき
- その場で式を計算して結果を見たいとき
ターミナルとの違い：
- ターミナル：あなたがOSに命令する場所
- デバッグコンソール：デバッグ実行中のプログラムと対話する場所
4. ターミナル（TERMINAL）
役割：コマンドラインを実行する
これが一番よく使うパネルです。
表示されるもの：
- コマンドプロンプト（Windows）
- PowerShell（Windows）
- Bash（Mac/Linux）
- その他のシェル
表示方法：
ショートカットキー：
- Ctrl + `（バッククォート）（Windows/Linux）
- Cmd + `（Mac）
または、メニューから「表示」→「ターミナル」
できること：
- プログラムの実行（
python app.pyなど） - パッケージのインストール（
npm installなど） - Gitコマンドの実行
- その他あらゆるコマンド操作
複数のターミナルを開く：
新しいターミナルを追加：
- ターミナル右上の「+」ボタンをクリック
- または Ctrl + Shift +
**（Windows/Linux）、**Cmd + Shift +（Mac）
ターミナルを切り替える：
- ターミナル右上のドロップダウンリストから選択
ターミナルを分割：
- ターミナル右上の「分割」アイコンをクリック
これで、1つのパネル内で複数のターミナルを並べて表示できます。
ターミナルを削除：
- ターミナル右上の「ゴミ箱」アイコンをクリック
使いどころ：
- コードを実行するとき
- サーバーを起動するとき
- パッケージをインストールするとき
- Gitでバージョン管理するとき
パネル間の切り替え方法
複数のパネルを素早く切り替える方法です。
マウスで切り替え
パネル上部のタブ（「問題」「出力」など）をクリックするだけ。
キーボードで切り替え
残念ながら、デフォルトではパネル間を切り替えるショートカットキーは設定されていません。
でも、自分で設定できます！
設定方法：
- Ctrl + K → Ctrl + S（MacはCmd + K → Cmd + S）でキーボードショートカット設定を開く
- 以下のコマンドを検索して、好きなキーを割り当てる
前のパネルに移動：
- コマンド：
workbench.action.previousPanelView
次のパネルに移動：
- コマンド：
workbench.action.nextPanelView
例：Ctrl + Alt + 5 と 6 に設定
keybindings.jsonに以下を追加：
[
{
"key": "ctrl+alt+5",
"command": "workbench.action.previousPanelView"
},
{
"key": "ctrl+alt+6",
"command": "workbench.action.nextPanelView"
}
]各パネルに直接ジャンプ
各パネルを直接開くショートカットキーは、標準で設定されています。
問題：
- Ctrl + Shift + M（Windows/Linux）
- Cmd + Shift + M（Mac）
出力：
- Ctrl + Shift + U（Windows/Linux）
- Cmd + Shift + U（Mac）
デバッグコンソール：
- Ctrl + Shift + Y（Windows/Linux）
- Cmd + Shift + Y（Mac）
ターミナル：
- Ctrl + `（Windows/Linux）
- Cmd + `（Mac）
ターミナルをエディタ領域に移動する
ターミナルを、エディタと同じ領域に移動できます。
移動方法
方法1：メニューから移動
- ターミナル右上の「…」（3点アイコン）をクリック
- 「ターミナルをエディタ領域へ移動」または「Move Terminal into Editor Area」を選択
方法2：ドラッグで移動
ターミナルのタブをドラッグして、エディタ領域にドロップ
方法3：コマンドパレットから
- Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドパレットを開く
- 「Create New Terminal in Editor Area」と入力して実行
パネルに戻す
エディタ領域に移動したターミナルを、パネルに戻すこともできます。
- ターミナルタブ上で右クリック
- 「ターミナルをパネルへ移動」または「Move Terminal into Panel」を選択
デフォルトでエディタ領域に開く設定
ターミナルを常にエディタ領域で開きたい場合は、設定を変更できます。
設定方法：
- Ctrl + ,（MacはCmd + ,）で設定を開く
- 検索ボックスに「terminal default location」と入力
- 「Terminal > Integrated: Default Location」を「editor」に変更
または、settings.jsonに以下を追加：
{
"terminal.integrated.defaultLocation": "editor"
}これで、次回からターミナルがエディタ領域で開きます。
エディタ領域に移動するメリット
- タブで管理できる
- コードとターミナルを並べて表示しやすい
- 複数のターミナルを自由に配置できる
- パネルを別の用途に使える
ターミナルを別ウィンドウに表示する
ターミナルを完全に別のウィンドウとして表示することもできます。
方法
- ターミナル右上の「…」（3点アイコン）をクリック
- 「ターミナルを新しいウィンドウに移動」または「Move Terminal into New Window」を選択
これで、ターミナルが独立したウィンドウになります。
デュアルモニター環境で、1つの画面をターミナル専用にしたいときに便利です。
よくある質問
Q1. パネルが表示されない
A: Ctrl + J（MacはCmd + J）を押してみてください。
パネルが非表示になっているだけかもしれません。
Q2. ターミナルと出力とデバッグコンソールの違いがわからない
A: 簡単に言うと：
- ターミナル：あなたがコマンドを打つ場所（万能）
- 出力：拡張機能やツールのログを見る場所（情報確認用）
- デバッグコンソール：デバッグ実行中にプログラムと対話する場所（デバッグ専用）
基本的にはターミナルを使えばOKです。
Q3. パネルのサイズが小さすぎる
A: パネルの上端をドラッグして、サイズを大きくしてください。
または、パネル右上の「↑」アイコンで最大化できます。
Q4. ターミナルで日本語が文字化けする
A: ターミナルのエンコーディング設定を確認してください。
設定方法：
settings.jsonに以下を追加：
{
"terminal.integrated.defaultProfile.windows": "PowerShell",
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"args": ["-NoExit", "-Command", "chcp 65001"]
}
}
}Q5. デバッグ実行したらターミナルが表示されてしまう
A: launch.jsonの設定を変更してください。
.vscode/launch.jsonファイルを開いて、consoleの設定を確認：
{
"console": "internalConsole" // デバッグコンソールに出力
}または
{
"console": "integratedTerminal" // ターミナルに出力
}デバッグコンソールに出力したい場合は、"internalConsole"に設定してください。
Q6. パネルのタブが多すぎて邪魔
A: 使わないタブは非表示にできます。
設定から「panel.hidden」で検索して、非表示にしたいパネルを選択してください。
Q7. エディタとターミナルを素早く切り替えたい
A: 以下のショートカットキーが便利です。
ターミナルにフォーカス：
- コマンド：
Terminal: Focus Terminal（デフォルトでは割り当てなし）
エディタにフォーカス：
- Ctrl + 1（Windows/Linux）
- Cmd + 1（Mac）
よく使う場合は、ショートカットキーを設定しましょう。
Q8. ターミナルが複数あって混乱する
A: ターミナル右上のドロップダウンリストで現在のターミナル一覧が見られます。
不要なターミナルは、ゴミ箱アイコンで削除しましょう。
また、ターミナルに名前をつけることもできます。
名前の変更方法：
ターミナルのタブを右クリック→「名前の変更」
Q9. ターミナルの色やフォントを変えたい
A: 設定で変更できます。
フォントサイズ：
- 設定で「terminal font size」と検索
- または settings.jsonに
"terminal.integrated.fontSize": 14
配色：
- 設定で「workbench.colorCustomizations」と検索
- ターミナルの配色をカスタマイズできます
Q10. パネルを完全に消したい
A: Ctrl + J（MacはCmd + J）で非表示にできます。
ただし、ターミナルなどは頻繁に使うので、完全に消すよりは、必要なときに表示する方が便利です。
まとめ：パネルを使いこなそう！
VSCodeのパネルについてまとめます。
4つの主要パネル：
- 問題：エラーや警告を表示（Ctrl + Shift + M）
- 出力：拡張機能やツールのログ（Ctrl + Shift + U）
- デバッグコンソール：デバッグ実行時に使用（Ctrl + Shift + Y）
- ターミナル：コマンドライン実行（Ctrl + `）
基本操作：
- パネルの表示/非表示：Ctrl + J
- サイズ変更：境界線をドラッグ
- 最大化：パネル右上の「↑」アイコン
表示位置の変更：
- 右クリック→「パネルを右に移動」「パネルを左に移動」「パネルを下に移動」
ターミナルの高度な使い方：
- エディタ領域に移動：ドラッグまたはメニューから
- 別ウィンドウに表示：メニューから選択
- 複数のターミナルを開く：「+」ボタン
- ターミナルを分割：「分割」アイコン
よく使うショートカット：
- パネル表示切り替え：Ctrl + J
- ターミナル表示：Ctrl + `
- 問題表示：Ctrl + Shift + M
パネルをうまく使いこなせば、VSCodeでの作業効率が格段に上がります。
特にターミナルと問題パネルは頻繁に使うので、ショートカットキーを覚えておくと便利ですよ。
ぜひ、この記事を参考に、快適なVSCode環境を作ってみてください！
コメント