VS Codeでアクティビティバーを表示・非表示する方法｜サイドアイコンの復活・整理

Visual Studio Code（VS Code）を使っていて、「左側のアイコンが急に消えた」「いつもあるファイルやGitのアイコンが見当たらない」と困ったことはありませんか？

この左側の縦に並んだアイコン群は アクティビティバー と呼ばれ、VS Codeのいろいろな機能（エクスプローラー、検索、ソース管理、拡張機能など）への入り口です。

この記事では、VS Codeのアクティビティバーを表示・非表示する方法や、アイコンを整理するやり方 を初心者向けにわかりやすく解説します。

アクティビティバーとは？
アクティビティバーの表示・非表示方法
サイドバー（パネル）の表示・非表示
1. サイドバー全体の切り替え
2. 個別パネルの切り替え
アクティビティバーのカスタマイズ
ワークスペース固有の設定
1. プロジェクトごとの設定
2. 作業タイプ別の最適化
高度なカスタマイズ
1. CSS/テーマでの見た目変更
2. アクティビティバーの位置変更
トラブルシューティング
実用的な設定例
1. 開発スタイル別の推奨設定
2. デバイス別の最適化
まとめ

アクティビティバーとは？

アクティビティバーの役割

アクティビティバーは、VS Codeの画面左端に縦に並んでいるアイコン群のことです。各アイコンをクリックすることで、対応する機能のサイドパネルが開きます。

標準で表示されるアイコン

基本アイコン

アイコン	名前	機能	ショートカット
📁	エクスプローラー	ファイル・フォルダの管理	`Ctrl + Shift + E`
🔍	検索	ファイル内検索・置換	`Ctrl + Shift + F`
⎇	ソース管理	Git操作	`Ctrl + Shift + G`
▶	実行とデバッグ	プログラムの実行・デバッグ	`Ctrl + Shift + D`
■	拡張機能	拡張機能の管理	`Ctrl + Shift + X`

拡張機能によって追加されるアイコン

拡張機能をインストールすると、追加のアイコンが表示される場合があります：

Docker：コンテナ管理
Azure：Azureリソース管理
LiveShare：リアルタイム共同編集
GitHub：GitHub統合機能

アクティビティバーとサイドバーの違い

アクティビティバー

画面左端の縦のアイコン列
機能の切り替えボタンの役割

サイドバー

アクティビティバーの右側に表示されるパネル
エクスプローラーや検索結果などの詳細表示

アクティビティバーの表示・非表示方法

コマンドパレットを使った方法

最も確実で分かりやすい方法です。

手順

Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
「View: Toggle Activity Bar Visibility」と入力
Enterキーで実行

実際の操作例

> View: Toggle Activity Bar Visibility

このコマンドを実行するたびに、アクティビティバーの表示・非表示が切り替わります。

メニューバーから操作する方法

Windows / Linux

上部メニューの「表示（View）」をクリック
「外観（Appearance）」を選択
「アクティビティバー」をクリック

macOS

上部メニューの「View」をクリック
「Appearance」を選択
「Activity Bar」をクリック

設定ファイルで制御する方法

settings.json での設定

Ctrl + ,（Mac: Cmd + ,）で設定画面を開く
右上の「設定（JSON）を開く」アイコンをクリック
以下を追加：

{
  "workbench.activityBar.visible": false
}

設定値：

true：アクティビティバーを表示
false：アクティビティバーを非表示

キーボードショートカットの設定

デフォルトではアクティビティバー専用のショートカットは設定されていませんが、カスタムで設定できます。

カスタムショートカットの設定方法

Ctrl + K, Ctrl + S（Mac: Cmd + K, Cmd + S）でキーボードショートカット設定を開く
「activity bar」で検索
「View: Toggle Activity Bar Visibility」を見つける
左の「+」をクリックして任意のキーを設定

サイドバー（パネル）の表示・非表示

サイドバー全体の切り替え

アクティビティバーとは別に、サイドバー全体の表示・非表示も制御できます。

ショートカット

OS	ショートカット
Windows / Linux	`Ctrl + B`
macOS	`Cmd + B`

動作の違い

アクティビティバーの非表示：左端のアイコン列のみ非表示
サイドバーの非表示：アクティビティバー + サイドパネル全体が非表示

個別パネルの切り替え

各機能のパネルを個別に開くこともできます：

Ctrl + Shift + E  # エクスプローラー
Ctrl + Shift + F  # 検索
Ctrl + Shift + G  # ソース管理
Ctrl + Shift + D  # デバッグ
Ctrl + Shift + X  # 拡張機能

アクティビティバーのカスタマイズ

アイコンの表示・非表示設定

右クリックメニューから設定

アクティビティバー上で右クリック
表示したいアイコンにチェック、非表示にしたいアイコンのチェックを外す

設定可能な項目

エクスプローラー：ファイルツリー
検索：全文検索機能
ソース管理：Git統合
実行とデバッグ：デバッグ機能
拡張機能：Extensions
アカウント：Microsoft/GitHubアカウント
設定：設定画面への直接アクセス

アイコンの並び替え

ドラッグ&ドロップで並び替え

移動したいアイコンをクリックしたまま
任意の位置までドラッグ
希望の位置でドロップ

効率的な並び順の例

一般的な開発者向け：

📁 エクスプローラー
⎇ ソース管理
🔍 検索
▶ 実行とデバッグ
■ 拡張機能

Web開発者向け：

📁 エクスプローラー
⎇ ソース管理
🌐 Live Server（拡張機能）
🔍 検索
■ 拡張機能

拡張機能のアクティビティバー項目

拡張機能がアイコンを追加する例

GitHub Pull Requests and Issues：

GitHubのプルリクエスト管理アイコンを追加

Docker：

Dockerコンテナ管理アイコンを追加

Azure Account：

Azureサービス管理アイコンを追加

不要な拡張機能アイコンの削除

右クリックメニューで該当アイコンのチェックを外す
または拡張機能自体を無効化・アンインストール

ワークスペース固有の設定

プロジェクトごとの設定

VS Codeでは、プロジェクト（ワークスペース）ごとに異なるアクティビティバー設定を適用できます。

.vscode/settings.json での設定

プロジェクトフォルダ内に .vscode/settings.json を作成：

{
  "workbench.activityBar.visible": true,
  "workbench.sideBar.location": "right"
}

設定例

フロントエンド開発プロジェクト：

{
  "workbench.activityBar.visible": true,
  "workbench.colorTheme": "One Dark Pro"
}

Python データ分析プロジェクト：

{
  "workbench.activityBar.visible": false,
  "workbench.sideBar.location": "right"
}

作業タイプ別の最適化

ライティング・ドキュメント作成

{
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "workbench.editor.showTabs": false
}

ミニマルな表示でドキュメント作成に集中。

フルスタック開発

{
  "workbench.activityBar.visible": true,
  "workbench.sideBar.location": "left"
}

すべての機能にすぐアクセスできる標準設定。

高度なカスタマイズ

CSS/テーマでの見た目変更

カスタムCSSの適用

「Custom CSS and JS Loader」拡張機能を使用：

/* アクティビティバーの幅を変更 */
.monaco-workbench .activitybar {
    width: 60px !important;
}

/* アイコンサイズの調整 */
.monaco-workbench .activitybar .action-label {
    font-size: 20px !important;
}

テーマでの色変更

テーマのカスタマイズ設定：

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#1e1e1e",
    "activityBar.foreground": "#ffffff",
    "activityBarBadge.background": "#007acc"
  }
}

アクティビティバーの位置変更

右側への移動

残念ながら、VS Code標準ではアクティビティバーを右側に移動する機能はありません。ただし、以下の代替案があります：

サイドバー全体を右側に移動：

{
  "workbench.sideBar.location": "right"
}

コマンドパレットから：

View: Toggle Side Bar Position

トラブルシューティング

アクティビティバーが消えて戻らない

原因と対処法

原因1：設定で非表示になっている

対処法：

Ctrl + Shift + P → "View: Toggle Activity Bar Visibility"

原因2：拡張機能の影響

対処法：

セーフモードで起動（--disable-extensions）
問題のある拡張機能を特定
該当拡張機能を無効化または削除

原因3：設定ファイルの破損

対処法：

設定ファイルをリセット
%APPDATA%\Code\User\settings.json を一時的にリネーム
VS Code を再起動

アイコンが正しく表示されない

フォントの問題

症状： アイコンが文字化けまたは空白で表示される

対処法：

VS Code を最新版にアップデート
システムフォントをリセット
VS Code の完全再インストール

高DPI環境での問題

Windows での対処法：

{
  "window.zoomLevel": 0,
  "window.titleBarStyle": "custom"
}

パフォーマンスの問題

アクティビティバーの動作が重い

原因：

多数の拡張機能
大量のファイルを含むワークスペース

対処法：

不要な拡張機能を無効化
ワークスペースから除外フォルダを設定
VS Code のパフォーマンス監視機能を使用

Developer: Reload With Extensions Disabled

実用的な設定例

開発スタイル別の推奨設定

ミニマリスト派

{
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "workbench.editor.showTabs": false,
  "breadcrumbs.enabled": false
}

ショートカットキーで必要な機能にアクセス。

機能重視派

{
  "workbench.activityBar.visible": true,
  "workbench.sideBar.location": "left",
  "workbench.panel.defaultLocation": "bottom"
}

すべての機能を画面上に表示して効率化。

チーム開発重視派

{
  "workbench.activityBar.visible": true,
  "git.enableSmartCommit": true,
  "git.autofetch": true
}

Git機能を前面に出した設定。

デバイス別の最適化

ノートPC（小画面）

{
  "workbench.activityBar.visible": false,
  "workbench.statusBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

画面スペースを最大限活用。

大型モニター

{
  "workbench.activityBar.visible": true,
  "workbench.sideBar.location": "left",
  "workbench.panel.defaultLocation": "right"
}

豊富な画面スペースを有効活用。

まとめ

VS Codeのアクティビティバーは、効率的な開発のための重要な要素です。重要なポイントをまとめると：

基本操作

表示切り替え：Ctrl + Shift + P → 「View: Toggle Activity Bar Visibility」
メニューから：表示 → 外観 → アクティビティバー
設定ファイル："workbench.activityBar.visible": true/false

カスタマイズ方法

アイコンの選択：右クリックで表示・非表示を切り替え
並び替え：ドラッグ&ドロップで自由に配置
ワークスペース設定：プロジェクトごとに異なる設定を適用

効率的な使い方

作業スタイルに応じて表示・非表示を切り替え
よく使う機能を上部に配置
画面サイズに応じて最適化

トラブル対策

消えた場合はコマンドパレットから復元
拡張機能の影響を確認
設定ファイルのリセットで解決

アクティビティバーとは？

アクティビティバーの役割

標準で表示されるアイコン

基本アイコン

拡張機能によって追加されるアイコン

アクティビティバーとサイドバーの違い

アクティビティバーの表示・非表示方法

コマンドパレットを使った方法

手順

実際の操作例

メニューバーから操作する方法

Windows / Linux

macOS

設定ファイルで制御する方法

settings.json での設定

キーボードショートカットの設定

カスタムショートカットの設定方法

おすすめのショートカット設定

サイドバー（パネル）の表示・非表示

サイドバー全体の切り替え

ショートカット

動作の違い

個別パネルの切り替え

アクティビティバーのカスタマイズ

アイコンの表示・非表示設定

右クリックメニューから設定

設定可能な項目

アイコンの並び替え

ドラッグ&ドロップで並び替え

効率的な並び順の例

拡張機能のアクティビティバー項目

拡張機能がアイコンを追加する例

不要な拡張機能アイコンの削除

ワークスペース固有の設定

プロジェクトごとの設定

.vscode/settings.json での設定

設定例

作業タイプ別の最適化

ライティング・ドキュメント作成

フルスタック開発

高度なカスタマイズ

CSS/テーマでの見た目変更

カスタムCSSの適用

テーマでの色変更

アクティビティバーの位置変更

右側への移動

トラブルシューティング

アクティビティバーが消えて戻らない

原因と対処法

アイコンが正しく表示されない

フォントの問題

高DPI環境での問題

パフォーマンスの問題

アクティビティバーの動作が重い

実用的な設定例

開発スタイル別の推奨設定

ミニマリスト派

機能重視派

チーム開発重視派

デバイス別の最適化

ノートPC（小画面）

大型モニター

まとめ

Youtube

カテゴリー別人気記事

コメント