Visual Studio Code（VS Code）でファイルを開いた後、「左のエクスプローラーが邪魔だから隠したい」「もっとコードを大きく表示したい」と思うことはありませんか？
そんなとき、エクスプローラー（左側のサイドバー）を閉じれば、作業スペースを広く使えます。
この記事では、VS Codeでエクスプローラーを閉じる方法と、便利なショートカット を初心者向けにわかりやすく紹介します。画面を有効活用して、より集中できる開発環境を作りましょう。
エクスプローラーとサイドバーの違い
エクスプローラーとは
エクスプローラーは、VS Codeの左側に表示されるファイルツリーのことです。プロジェクト内のフォルダやファイルを一覧表示し、クリックで開くことができます。
サイドバーとは
サイドバーは、エクスプローラーを含む左側のパネル全体のことです。以下の機能が含まれます：
- エクスプローラー（📁）：ファイル・フォルダ管理
- 検索（🔍）：プロジェクト内検索
- ソース管理（⎇）：Git操作
- 実行とデバッグ（▶）：プログラム実行・デバッグ
- 拡張機能（■）：Extensions管理
閉じる範囲の違い
| 操作 | 影響範囲 | 結果 |
|---|---|---|
| エクスプローラーのみ閉じる | ファイルツリーのみ | 他の機能（検索など）は表示されたまま |
| サイドバー全体を閉じる | 左側パネル全体 | すべての左側機能が非表示 |
エクスプローラーのみを閉じる方法
アクティビティバーからの操作
基本的な手順
- VS Code左端のアクティビティバーにある「📁」（エクスプローラー）アイコンをクリック
- エクスプローラーが表示される
- 同じアイコンをもう一度クリック
- エクスプローラーが閉じる
実際の操作例
初期状態：エクスプローラーが表示されている
↓
📁 アイコンをクリック
↓
エクスプローラーが閉じる（他の機能は利用可能）
↓
再度 📁 アイコンをクリック
↓
エクスプローラーが再表示される
メニューバーからの操作
Windows / Linux
- 上部メニューバーの「表示（View）」をクリック
- 「エクスプローラー」を選択
- チェックマークが外れてエクスプローラーが閉じる
macOS
- 上部メニューバーの「View」をクリック
- 「Explorer」を選択
- チェックマークが外れてエクスプローラーが閉じる
ショートカットキーでの操作
エクスプローラー専用ショートカット
Windows / Linux / macOS
Ctrl + Shift + E (Windows/Linux)
Cmd + Shift + E (macOS)
このショートカットは以下の動作をします：
- エクスプローラーが閉じている場合：エクスプローラーを開く
- エクスプローラーが開いている場合：エクスプローラーにフォーカスを移す
- エクスプローラーにフォーカスがある場合：エクスプローラーを閉じる
実用的な使い方
作業の流れ：
1. Ctrl + Shift + E でエクスプローラーを表示
2. ファイルを選択
3. Ctrl + Shift + E でエクスプローラーを閉じる
4. コード編集に集中
サイドバー全体を閉じる方法
最も便利なショートカット
基本ショートカット
Windows / Linux
Ctrl + B
macOS
Cmd + B
このショートカットは、サイドバー全体の表示・非表示を瞬時に切り替えます。
実際の使用例
作業開始時：
1. Ctrl + B でサイドバーを表示
2. エクスプローラーでファイルを選択
3. Ctrl + B でサイドバーを閉じる
4. 広い画面でコード編集
デバッグ時：
1. Ctrl + B でサイドバーを表示
2. デバッグパネルで設定
3. Ctrl + B でサイドバーを閉じる
4. 実行結果を大きな画面で確認
メニューバーからの操作
Windows / Linux
- 「表示（View）」メニューをクリック
- 「サイドバーを表示」を選択
- チェックマークの有無でオン・オフ切り替え
macOS
- 「View」メニューをクリック
- 「Show Side Bar」を選択
- チェックマークの有無でオン・オフ切り替え
コマンドパレットからの操作
より確実な方法として、コマンドパレットを使用できます：
手順
Ctrl + Shift + P（Mac:Cmd + Shift + P）でコマンドパレットを開く- 「View: Toggle Side Bar Visibility」と入力
- Enterキーで実行
この方法は、ショートカットが効かない場合の代替手段として有効です。
画面レイアウトの最適化
集中作業のための設定
ミニマル表示設定
より多くの画面スペースを確保するための設定：
{
"workbench.activityBar.visible": false,
"workbench.statusBar.visible": false,
"workbench.sideBar.visible": false,
"breadcrumbs.enabled": false
}
段階的な非表示
必要に応じて段階的に画面要素を非表示にする：
- 第1段階：サイドバーのみ非表示（
Ctrl + B） - 第2段階：アクティビティバーも非表示
- 第3段階：ステータスバーも非表示
- 第4段階：タブバーも非表示
デバイス別の最適化
小さなスクリーン（ノートPC）
{
"workbench.sideBar.location": "right",
"workbench.panel.defaultLocation": "right"
}
サイドバーを右側に移動して、コード領域を左寄せ。
大きなスクリーン（デスクトップ）
{
"workbench.sideBar.location": "left",
"workbench.panel.defaultLocation": "bottom"
}
標準的なレイアウトで広いスペースを活用。
ウルトラワイドモニター向け設定
3分割レイアウト
{
"workbench.editor.limit": 3,
"workbench.editor.openPositioning": "right"
}
複数ファイルを横に並べて比較・編集。
自動化とカスタマイズ
ファイル種別による自動制御
設定例
{
"workbench.editor.autoReveal": false,
"explorer.autoReveal": false
}
ファイルを開いてもエクスプローラーが自動展開されない設定。
ワークスペース別の設定
プロジェクト固有の設定
.vscode/settings.json に以下を設定：
{
"workbench.sideBar.visible": false,
"workbench.activityBar.visible": true
}
特定のプロジェクトでのみサイドバーを非表示。
拡張機能による自動化
推奨拡張機能
Auto Hide
- 一定時間操作がないとサイドバーを自動で隠す
- マウスオーバーで自動表示
Peacock
- ワークスペースごとに色分け
- 視覚的にプロジェクトを区別
効率的なワークフロー例
一般的な作業の流れ
ファイル選択 → 編集の流れ
1. Ctrl + Shift + E (エクスプローラーを表示)
2. ファイルを選択・開く
3. Ctrl + B (サイドバーを閉じる)
4. コード編集に集中
5. 別のファイルが必要になったら 1. に戻る
検索 → 編集の流れ
1. Ctrl + Shift + F (検索パネルを表示)
2. 検索実行・結果確認
3. Ctrl + B (サイドバーを閉じる)
4. 検索結果のファイルを編集
デバッグ時の効率的な操作
デバッグセッションでの画面管理
1. Ctrl + Shift + D (デバッグパネルを表示)
2. ブレークポイント設定
3. F5 (デバッグ開始)
4. Ctrl + B (サイドバーを閉じる)
5. 変数ウォッチは統合ターミナルで確認
Git 操作時の画面管理
コミット作業での効率化
1. Ctrl + Shift + G (ソース管理を表示)
2. 変更ファイルを確認
3. 差分を確認
4. Ctrl + B (サイドバーを閉じる)
5. コミットメッセージを入力
キーボード中心の操作
ショートカットキーの組み合わせ
エクスプローラー関連
| ショートカット | 動作 | 備考 |
|---|---|---|
Ctrl + Shift + E | エクスプローラー表示切替 | エクスプローラーのみ |
Ctrl + B | サイドバー表示切替 | 全体切替 |
Ctrl + 0 | サイドバーにフォーカス | 開いている場合のみ |
Ctrl + 1 | エディタにフォーカス | – |
ファイル操作
Ctrl + P : ファイル名で検索・開く
Ctrl + Tab : 開いているタブの切り替え
Ctrl + W : 現在のタブを閉じる
Ctrl + Shift + T : 閉じたタブを復元
マウスレス操作の実現
完全キーボード操作の例
目標：mouse.jsファイルを開いて編集
1. Ctrl + P (ファイル検索)
2. "mouse" と入力
3. Enter (ファイルを開く)
4. Ctrl + B (サイドバーを閉じる)
5. 編集開始
トラブルシューティング
エクスプローラーが閉じない場合
原因1：フォーカスの問題
症状： Ctrl + Shift + E を押してもエクスプローラーが閉じない
対処法：
- エクスプローラー内をクリックしてフォーカスを移す
- 再度
Ctrl + Shift + Eを実行
原因2：拡張機能の干渉
症状： ショートカットが全く効かない
対処法：
Ctrl + K, Ctrl + Sでキーボードショートカット設定を開く- 該当ショートカットに競合がないか確認
- 必要に応じて拡張機能を無効化
レイアウトが崩れる場合
ウィンドウサイズの問題
症状： サイドバーを閉じるとレイアウトが変になる
対処法：
{
"window.restoreWindows": "all",
"workbench.editor.restoreViewState": true
}
高DPI環境での問題
対処法：
{
"window.zoomLevel": 0,
"editor.fontSize": 14
}
カスタマイズ設定例
プログラマー向け設定
集中重視設定
{
"workbench.colorTheme": "One Dark Pro",
"workbench.sideBar.visible": false,
"workbench.activityBar.visible": true,
"workbench.statusBar.visible": true,
"breadcrumbs.enabled": false,
"workbench.editor.showTabs": true,
"workbench.editor.tabCloseButton": "off"
}
デザイナー向け設定
{
"workbench.colorTheme": "Material Theme",
"workbench.sideBar.visible": true,
"workbench.sideBar.location": "right",
"workbench.activityBar.visible": true,
"workbench.statusBar.visible": true,
"breadcrumbs.enabled": true
}
プロジェクト種別設定
フロントエンド開発
{
"workbench.sideBar.visible": true,
"workbench.panel.defaultLocation": "bottom",
"terminal.integrated.defaultLocation": "panel"
}
データ分析
{
"workbench.sideBar.visible": false,
"workbench.panel.defaultLocation": "right",
"jupyter.askForKernelRestart": false
}
まとめ
VS Codeのエクスプローラーを効率的に管理することで、作業効率が大幅に向上します。重要なポイントをまとめると：
基本的な閉じ方
- エクスプローラーのみ：
Ctrl + Shift + E（Mac:Cmd + Shift + E） - サイドバー全体：
Ctrl + B（Mac:Cmd + B） - メニューから：表示 → エクスプローラー / サイドバーを表示
効率的な使い方
- 作業開始：エクスプローラーでファイル選択
- 編集中：サイドバーを閉じて画面を広く使用
- ファイル変更：ショートカットで素早く切り替え
カスタマイズのコツ
- 画面サイズに応じた最適化
- プロジェクト種別による設定変更
- 自動化による作業効率向上
覚えておくべきショートカット
Ctrl + B：最も重要、サイドバー全体の切り替えCtrl + Shift + E：エクスプローラーのみの操作Ctrl + P：ファイル検索でエクスプローラーを使わずにファイルを開く
コメント