Visual Studio Code（VS Code）を使っていると、「あれ？エクスプローラーが消えた！」と焦ることはありませんか。
ファイルやフォルダを管理するために欠かせないエクスプローラーですが、誤操作や設定変更によって非表示になっていることがあります。
この記事では、Visual Studio Codeでエクスプローラーを表示する方法、表示されないときの原因と対処法、さらに便利な表示カスタマイズの方法まで、初心者にもわかりやすく解説します。
Visual Studio Codeのエクスプローラーとは
Visual Studio Code（以下、VS Code）のエクスプローラーとは、左側のサイドバーに表示されるファイル・フォルダの一覧画面のことです。
このエクスプローラーでは、以下のような操作が可能です。
- プロジェクトフォルダ内のファイル構造を一覧で確認できる
- ファイルの新規作成・削除・名前変更ができる
- ドラッグ＆ドロップでフォルダの移動ができる
- ファイルをダブルクリックしてすぐに編集できる
つまり、エクスプローラーはVS Codeで作業する上での“ナビゲーションの中心”です。
これが表示されていないと、どのファイルを編集しているのか分からず非常に不便になります。
エクスプローラーを表示する基本的な方法
VS Codeでエクスプローラーを表示する最も簡単な方法は、ショートカットキーまたはメニュー操作です。
① ショートカットキーで表示・非表示を切り替える
最も素早い方法は、以下のショートカットを使うことです。
- Windows / Linux：
Ctrl + Shift + E - Mac：
Command + Shift + E
このキーを押すたびに、エクスプローラーが「表示 ↔ 非表示」と切り替わります。
もし誤って押して非表示になっていた場合も、同じショートカットで簡単に元に戻せます。
② メニューから表示する
ショートカットに慣れていない方は、メニューから表示することもできます。
- 画面上部のメニューから「表示(View)」をクリック
- 「エクスプローラー(Explorer)」を選択
これで、左側のサイドバーにエクスプローラーが表示されます。
③ サイドバーのアイコンから表示する
VS Codeの左端には「サイドバーアイコン」が並んでいます。
その中にある「ファイルのアイコン（四角いページのようなマーク）」をクリックすると、エクスプローラーが開きます。
逆に、他の機能（検索、Git、拡張機能など）を選択していると、エクスプローラーが一時的に隠れているように見えることがあります。
この場合は、ファイルアイコンをクリックすればすぐに戻ります。
エクスプローラーが表示されないときの主な原因と対処法
エクスプローラーが見えない場合、単に「隠れている」だけでなく、設定やウィンドウのレイアウトに問題があることもあります。
ここでは代表的な原因と対処法を紹介します。
① サイドバー自体が非表示になっている
VS Codeでは、サイドバーを完全に非表示にできる機能があります。
この場合、エクスプローラーは存在しているのに画面に出ていません。
対処法：サイドバーの表示切り替え
- Windows / Linux：
Ctrl + B - Mac：
Command + B
このショートカットを押すと、サイドバー全体の表示が切り替わります。
もしサイドバーごと見えなくなっていた場合は、これで解決できます。
② ワークスペースやフォルダを開いていない
エクスプローラーは、開いているフォルダやワークスペースをもとに表示されます。
そのため、何も開いていない状態だと「空っぽの画面」になり、エクスプローラーが表示されないように見えます。
対処法：フォルダを開く
- メニューの「ファイル」→「フォルダーを開く」をクリック
- 作業したいフォルダを選択
これでエクスプローラーにファイル一覧が表示されるようになります。
③ ウィンドウレイアウトが崩れている
ウィンドウサイズを変更したり、複数の画面を表示していると、エクスプローラーの領域が極端に狭くなって見えないことがあります。
対処法：ウィンドウレイアウトのリセット
- メニューの「表示」→「エディター レイアウト」→「エディター レイアウトをリセット」
- または、ウィンドウ右上の「分割表示」アイコンをクリックしてリセット
これで、エクスプローラーの表示領域が元に戻る場合があります。
④ 拡張機能の影響
特定の拡張機能がUIの表示をカスタマイズしている場合、エクスプローラーが意図せず隠れることもあります。
対処法：一時的に拡張機能を無効化
- 左の「拡張機能」アイコンをクリック
- 最近インストールした拡張機能を無効にする
- VS Codeを再起動
これで改善する場合は、その拡張機能が原因です。
エクスプローラーをより使いやすくするカスタマイズ方法
VS Codeの魅力は、エクスプローラーの表示や動作を自由にカスタマイズできることです。
ここでは便利な設定をいくつか紹介します。
① ファイルを自動で開く設定
エクスプローラーでファイルをクリックしたとき、既定では「プレビュー表示」になります。
別タブで開きたい場合は、以下の設定を変更します。
- メニューから「ファイル」→「ユーザー設定」→「設定」
- 検索欄に「preview」を入力
- 「workbench.editor.enablePreview」のチェックを外す
これで、ファイルをクリックするたびに新しいタブで開くようになります。
② フォルダ構造を自動展開
フォルダをクリックすると中身を展開する「自動展開機能」も便利です。
設定で有効化するには：
- 「設定」画面で「explorer.autoReveal」を検索
- チェックを入れる
これで、編集中のファイルを自動的にエクスプローラーでハイライトしてくれます。
③ サイドバーの位置を右側に変更する
デフォルトでは左側にあるサイドバーを、右側に移動することも可能です。
- 「表示」→「外観」→「サイドバーを右に移動」
または Ctrl + Shift + P→ 「サイドバーを右に移動」で検索
左右の好みに合わせて作業効率を上げましょう。
④ アイコンテーマを変更して見やすくする
VS Codeでは、ファイルの種類ごとに異なるアイコンを表示できます。
特に多言語プロジェクトを扱う場合は、アイコンテーマを導入すると分かりやすくなります。
おすすめ拡張機能：
- VSCode Icons
- Material Icon Theme
これらを導入すると、HTML、CSS、Pythonなどのファイルが一目で識別できるようになります。
まとめ
Visual Studio Codeのエクスプローラーは、ファイル操作やプロジェクト管理に欠かせない機能です。
もし非表示になっていても、以下の手順で簡単に戻せます。
Ctrl + Shift + Eで表示を切り替え- サイドバー全体が消えている場合は
Ctrl + B - フォルダを開いていないときは「フォルダを開く」から操作
また、表示位置やアイコンテーマをカスタマイズすることで、より快適に開発を進めることができます。