VS Codeのミニマップとは
VS Codeのミニマップとは、現在開いているファイルの内容を縮小表示し、コード全体の構造や現在位置を把握しやすくする機能です。
通常はエディターの右側に表示され、長いHTMLやCSS、JavaScript、PHPなどを編集するときに役立ちます。
ファイルの行数が多くなると、通常のスクロールバーだけでは「現在どのあたりを編集しているのか」が分かりにくくなることがあります。
ミニマップを利用すれば、ファイル全体を視覚的に確認しながら、目的の場所へすばやく移動できます。
VS Codeの標準機能として搭載されているため、ミニマップを利用するために拡張機能をインストールする必要はありません。
ミニマップでできること
ミニマップを利用すると、主に以下のようなことができます。
- ファイル全体のおおまかな構造を確認する
- 現在表示している位置を把握する
- 離れた位置へすばやく移動する
- コード量や空行などからセクションの位置を推測する
- 長いファイルをスクロールする手間を減らす
特に数百行から数千行あるファイルでは、コード内を移動するためのナビゲーションとして便利です。
VS Codeでミニマップを表示・非表示にする方法
VS Codeでは、ミニマップを簡単に表示したり非表示にしたりできます。
画面の横幅を広く使いたい場合は非表示にし、長いファイルを編集するときだけ表示するといった使い方も可能です。
「表示」メニューから切り替える
VS Code上部のメニューから、次の順番で選択します。
表示（View）
↓
外観（Appearance）
↓
ミニマップ（Minimap）
ミニマップが有効になっている場合は、エディターの端に表示されます。
もう一度同じ項目を選択すると、ミニマップを非表示にできます。
コマンドパレットから切り替える
コマンドパレットからミニマップを切り替えることもできます。
Windows・Linuxでは、
Ctrl + Shift + P
macOSでは、
Command + Shift + P
を押してコマンドパレットを開きます。
続いて、
View: Toggle Minimap
を検索して実行します。
ミニマップが表示されている場合は非表示になり、非表示の場合は表示されます。
ミニマップを右クリックして設定する
ミニマップが表示されている場合は、ミニマップ付近を右クリックして関連設定を変更することもできます。
VS Codeではミニマップ周辺のコンテキストメニューから表示方法などを変更できるため、頻繁に設定を切り替える場合に便利です。
参考サイト
VS Codeの設定画面からミニマップを設定する方法
ミニマップは表示・非表示だけでなく、表示位置や大きさ、文字の描画方法なども変更できます。
Settingsを開く
Windows・Linuxでは、
Ctrl + ,
macOSでは、
Command + ,
を押すとSettingsを開けます。
Settingsを開いたら、検索欄に、
minimap
と入力します。
すると、ミニマップに関連する設定項目が一覧で表示されます。
editor.minimap.enabledで表示・非表示を設定する
ミニマップそのものを表示するかどうかを設定する項目です。
設定名は、
editor.minimap.enabled
です。
ミニマップを表示する場合
"editor.minimap.enabled": true
と設定します。
ミニマップを非表示にする場合
"editor.minimap.enabled": false
と設定します。
ノートPCなど画面の横幅が限られている環境では、ミニマップを非表示にすることでコード表示領域を広げられます。
editor.minimap.sideで表示位置を変更する
ミニマップをエディターの左右どちら側に表示するかも変更できます。
設定名は、
editor.minimap.side
です。
右側に表示する
"editor.minimap.side": "right"
と設定します。
一般的には右側に表示する設定が使われます。
左側に表示する
"editor.minimap.side": "left"
と設定します。
右側のスペースを広く使いたい場合や、作業環境に合わせて配置を変更したい場合に利用できます。
editor.minimap.sizeでミニマップの高さを調整する
ミニマップの縦方向の表示方法は、
editor.minimap.size
で変更できます。
主に、
proportional
fit
fill
の3種類があります。
proportional
"editor.minimap.size": "proportional"
proportionalでは、ファイルの行数に応じてミニマップの高さが決まります。
長いファイルの場合は、ミニマップ自体もスクロールすることがあります。
標準的なミニマップの表示方法として使いやすい設定です。
fit
"editor.minimap.size": "fit"
fitでは、ミニマップの高さがエディターの高さを超えないように調整されます。
ファイルが非常に長い場合は、必要に応じて行をサンプリングしながらファイル全体が収まるように表示されます。
長いファイル全体を俯瞰したい場合に適した設定です。
fill
"editor.minimap.size": "fill"
fillでは、ミニマップがエディターの縦幅全体を使用するように表示されます。
長いファイルだけでなく、比較的短いファイルでもミニマップを縦いっぱいに表示したい場合に利用できます。
editor.minimap.scaleで表示倍率を変更する
ミニマップの表示倍率は、
editor.minimap.scale
で変更できます。
たとえば、
"editor.minimap.scale": 1
のように設定します。
高DPIディスプレイなどでミニマップが見づらい場合は、表示倍率を調整することで見やすくなることがあります。
editor.minimap.showSliderでスライダーを設定する
ミニマップには、現在エディターで表示している範囲を示すスライダーがあります。
このスライダーの表示方法は、
editor.minimap.showSlider
で変更できます。
たとえば、
"editor.minimap.showSlider": "mouseover"
と設定すると、ミニマップへマウスポインターを重ねたときにスライダーが表示されます。
スライダーを利用すると、現在表示している範囲を視覚的に確認しやすくなります。
editor.minimap.renderCharactersで文字表示を変更する
ミニマップ上のコードを、小さな文字として表示するか、ブロック状に簡略化して表示するかを設定できます。
設定名は、
editor.minimap.renderCharacters
です。
文字を描画する
"editor.minimap.renderCharacters": true
と設定します。
コードの文字形状を縮小して表示するため、ファイルの形を細かく確認しやすくなります。
ブロック状に表示する
"editor.minimap.renderCharacters": false
と設定します。
文字の形を細かく描画せず、コードをブロック状に表示します。
コードの内容そのものよりも、ファイル全体の構造だけを確認したい場合に向いています。
settings.jsonからミニマップを設定する方法
GUIのSettings画面だけでなく、settings.jsonを直接編集してミニマップを設定することもできます。
settings.jsonを開く
コマンドパレットを開いて、
Preferences: Open User Settings (JSON)
を実行します。
すると、ユーザー設定用のsettings.jsonが開きます。
たとえば、次のように設定できます。
{
"editor.minimap.enabled": true,
"editor.minimap.side": "right",
"editor.minimap.size": "fit",
"editor.minimap.scale": 1,
"editor.minimap.renderCharacters": false
}
長いHTMLやCSS、JavaScriptなどを頻繁に編集する場合は、editor.minimap.sizeをfitにするとファイル全体を把握しやすくなります。
ミニマップの背景色を変更する方法
ミニマップは動作だけでなく、背景色などの外観も変更できます。
背景色を変更する場合は、
workbench.colorCustomizations
を利用します。
たとえば、
{
"workbench.colorCustomizations": {
"minimap.background": "#00000055"
}
}
のように設定できます。
#RRGGBBAA形式を使えば、色だけでなく透明度も指定できます。
なお、editor.minimap.*はミニマップの動作や配置を設定する項目ですが、workbench.colorCustomizationsはVS CodeのUIカラーを変更するための設定です。
役割が異なるため、分けて考えると分かりやすいでしょう。
User設定とWorkspace設定を使い分ける
VS Codeでは、ミニマップの設定をすべてのプロジェクトに適用することも、特定のプロジェクトだけに適用することもできます。
User設定
User設定は、基本的にVS Code全体へ適用される設定です。
たとえば、
"editor.minimap.enabled": false
をUser設定に指定すると、基本的にはすべてのプロジェクトでミニマップが非表示になります。
Workspace設定
Workspace設定は、現在開いているワークスペースに適用される設定です。
単一フォルダーのワークスペースでは、通常、
.vscode/settings.json
に設定が保存されます。
たとえば、User設定で、
"editor.minimap.enabled": false
としていても、Workspace設定で、
"editor.minimap.enabled": true
と設定すれば、そのワークスペースではミニマップを表示できます。
プロジェクトごとにミニマップの表示方法を変えたい場合に便利です。
VS Codeのミニマップの基本的な使い方
ミニマップは設定するだけでなく、ファイル内を移動するためのナビゲーションとして使うと便利です。
ミニマップをクリックして移動する
ミニマップ内の目的の位置をクリックすると、その場所付近へすばやく移動できます。
数百行以上離れた位置へ移動したい場合でも、スクロールホイールを何度も操作する必要がありません。
スライダーをドラッグして移動する
ミニマップ上には、現在画面に表示されている範囲を示すスライダーがあります。
このスライダーを上下へドラッグすることで、ファイル内をすばやく移動できます。
コードの密度から位置を把握する
ミニマップでは、コードの文字やブロックが縮小表示されます。
そのため、コード量やインデント、空行などによってファイル内の大まかな位置を判断できます。
たとえばHTMLでは、
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
のようにセクション間に空行があると、ミニマップ上でもコードのまとまりを把握しやすくなります。
ただし、ミニマップがheaderやmainといったHTML要素の意味を判断して専用表示しているわけではありません。
あくまでコードの形や密度から、位置を視覚的に判断するための機能です。
検索機能とミニマップを併用する
長いファイルでは、検索機能とミニマップを組み合わせると効率的にコードを探せます。
Windows・Linuxでは、
Ctrl + F
macOSでは、
Command + F
を使用すると、現在のファイル内を検索できます。
検索で目的のコードを特定しながら、ミニマップでファイル全体における現在位置を確認することで、長いファイルでも位置関係を把握しやすくなります。
ミニマップが邪魔な場合は非表示にしてもよい
ミニマップは便利な機能ですが、必ず表示する必要はありません。
特にノートPCや画面分割を多用する環境では、ミニマップの分だけコード表示領域が狭くなります。
その場合は、
"editor.minimap.enabled": false
として非表示にしても問題ありません。
普段は非表示にしておき、長いファイルを編集するときだけ、
View: Toggle Minimap
で表示する使い方も便利です。
VS Codeのおすすめミニマップ設定
Web制作やWeb開発で長いHTML、CSS、JavaScriptなどを扱う場合は、次のような設定から試すと使いやすいでしょう。
{
"editor.minimap.enabled": true,
"editor.minimap.side": "right",
"editor.minimap.size": "fit",
"editor.minimap.scale": 1,
"editor.minimap.renderCharacters": false
}
editor.minimap.sizeをfitにすることで、長いファイルでも全体を俯瞰しやすくなります。
また、editor.minimap.renderCharactersをfalseにすると、細かな文字を描画せず、シンプルなコードマップとして利用できます。
ファイル全体を把握したい場合
"editor.minimap.size": "fit"
がおすすめです。
標準的な表示を使いたい場合
"editor.minimap.size": "proportional"
が適しています。
短いファイルでも縦いっぱいに表示したい場合
"editor.minimap.size": "fill"
を利用できます。
VS Codeのミニマップを活用してコード内の移動を効率化しよう
VS Codeのミニマップは、ファイル全体のコードを縮小表示し、現在位置の確認やファイル内の移動を効率化するための機能です。
基本的な表示・非表示は、
表示 → 外観 → ミニマップ
または、
View: Toggle Minimap
から切り替えられます。
さらに、
editor.minimap.enabled
editor.minimap.side
editor.minimap.size
editor.minimap.scale
editor.minimap.showSlider
editor.minimap.renderCharacters
などの設定を変更すれば、作業環境に合わせてミニマップをカスタマイズできます。
特に数百行から数千行あるHTML、CSS、JavaScriptなどを扱う場合は、ミニマップを活用することで現在位置を把握しやすくなり、目的のコードへ移動する手間を減らせます。
一方、画面が狭い場合や短いファイルしか扱わない場合は、ミニマップを非表示にするのも選択肢です。
作業するファイルの長さやディスプレイサイズに合わせて、表示方法やサイズを調整すると使いやすくなるでしょう。
以上、VSCodeのミニマップの使い方や設定方法についてでした。
最後までお読みいただき、ありがとうございました。
