Visual Studio Code（VSCode）でプログラミングをしていると、ファイルが長くなってメソッドや関数がどこにあるか分からなくなることがあります。
この記事では、VSCodeでメソッド一覧を素早く表示して、効率的にコードを書く方法をご紹介します。
メソッド一覧を表示する3つの方法
VSCodeには、メソッドや関数の一覧を表示する機能が複数用意されています。
それぞれの特徴を理解して、状況に応じて使い分けましょう。
1. ショートカットキーで素早く表示
最も素早くメソッド一覧を表示する方法は、ショートカットキーを使うことです。
Windows/Linux
Ctrl + Shift + OMac
Cmd + Shift + Oこのショートカットを押すと、現在開いているファイル内のメソッド、関数、クラス、変数などのシンボル一覧が画面上部に表示されます。
カテゴリ別に整理して表示
シンボル一覧が表示された状態で、コロン（:）を入力すると、シンボルがカテゴリごとに整理されます。
例えば、クラス、メソッド、関数、変数などがグループ分けされて見やすくなります。
Ctrl + Shift + O を押した後、: を入力一覧から素早く移動
表示された一覧から目的のメソッドを選んで Enter キーを押すと、そのメソッドの定義位置にジャンプできます。
矢印キー（↑↓）で項目を選択できるので、マウスを使わなくても操作可能です。
2. コマンドパレット経由で実行
ショートカットキーを覚えていない場合は、コマンドパレットから実行することもできます。
- コマンドパレットを開く
- Windows/Linux:
Ctrl + Shift + P - Mac:
Cmd + Shift + P
- 「Go to Symbol in Editor」と入力
- コマンドを選択して実行
この方法は、ショートカットキーより手順が多いですが、機能名を覚えておけばいつでも実行できます。
3. アウトラインビューで常時表示
アウトラインビューを使うと、シンボル一覧を常に表示したままコーディングできます。
アウトラインビューの表示場所
デフォルトでは、エクスプローラー（左サイドバー）の下部に「OUTLINE」というセクションがあります。
ファイルを開くと、そのファイル内のシンボルが自動的に表示されます。
アウトラインビューを右サイドバーに移動
左サイドバーは表示領域が狭くて見づらい場合があります。
そんなときは、アウトラインビューを右サイドバーに移動させると便利です。
- 右サイドバーを表示
Ctrl + Alt + B（Windows/Linux）- または画面右上の表示切替ボタンをクリック
- 左サイドバーの「OUTLINE」を右サイドバーにドラッグ&ドロップ
これで、より広い領域でシンボル一覧を確認できます。
アウトラインビューのフィルタリング
アウトラインビューでは、表示するシンボルの種類を選択できます。
- アウトラインビューの右上にある「Filter」アイコンをクリック
- 表示したいシンボルの種類を選択
- 変数を非表示にしたい場合は「Variable」のチェックを外す
- メソッドだけを表示したい場合は「Method」だけにチェック
これにより、必要な情報だけに絞り込んで表示できます。
ワークスペース全体でメソッドを検索
現在開いているファイルだけでなく、プロジェクト全体からメソッドを検索することもできます。
Windows/Linux
Ctrl + TMac
Cmd + Tこのショートカットを押すと、ワークスペース全体のシンボルを検索できるウィンドウが開きます。
メソッド名の一部を入力すると、該当するシンボルが一覧表示されます。
プロジェクト内のどこにメソッドが定義されているか分からないときに便利です。
コマンドパレットからの実行
- コマンドパレットを開く（
Ctrl + Shift + PまたはCmd + Shift + P） - 「Go to Symbol in Workspace」と入力
- コマンドを選択して実行
メソッド一覧が表示されないときの対処法
言語によっては、メソッド一覧が正しく表示されないことがあります。
これは、VSCodeがその言語のシンタックスを認識するための拡張機能が必要なためです。
PHPファイルの場合
PHPファイルでメソッド一覧を表示するには、専用の拡張機能をインストールする必要があります。
PHP Intelephenseをインストール
- 拡張機能ビューを開く（
Ctrl + Shift + XまたはCmd + Shift + X） - 検索欄に「php」と入力
- 「PHP Intelephense」を見つけてインストール
インストール後、VSCodeを再起動すると、PHPファイルでもメソッド一覧が表示されるようになります。
PHP IntelliSenseも選択肢の一つ
「PHP IntelliSense」という拡張機能もあります。
こちらは関数内の変数は表示されませんが、よりシンプルな表示が好みの場合はこちらを選ぶとよいでしょう。
C#ファイルの場合（Unity開発など）
Unity開発などでC#を使用している場合、以下の対処法を試してみてください。
- C#の拡張機能がインストールされているか確認
- 拡張機能ビューで「C#」を検索
- Microsoft製の「C#」拡張機能をインストール
- VSCodeを再起動
- プロジェクトファイル（.csprojなど）が正しく読み込まれているか確認
それでも表示されない場合は、出力パネル（Ctrl + Shift + U）でエラーメッセージを確認しましょう。
その他の言語
JavaScript、TypeScript、Python、Goなど、多くの言語はデフォルトでシンボル検索に対応しています。
それ以外の言語を使用している場合は、その言語用の拡張機能をインストールすることで、メソッド一覧機能が使えるようになります。
よくある質問
メソッドだけを表示して変数を非表示にできますか?
はい、可能です。
アウトラインビューの右上にある「Filter」アイコンをクリックして、「Variable」のチェックを外してください。
これにより、変数が非表示になり、メソッドや関数だけが表示されます。
タブを切り替えるたびにアウトラインが展開されるのを防げますか?
現在、自動展開を無効にする設定はありません。
ただし、アウトラインビューの右上にある「Collapse All」（すべて折りたたむ）ボタンを使うと、手動ですべてのシンボルを折りたたむことができます。
アウトラインビューで一部のメソッドが表示されません
これは以下のような原因が考えられます。
- メソッドが別のファイルに存在する
アウトラインビューは現在開いているファイルのシンボルのみを表示します。
別のファイルのメソッドは、そのファイルを開く必要があります。 - 言語の拡張機能が正しく動作していない
VSCodeがその言語のシンタックスを正しく解析できていない可能性があります。
該当する言語の拡張機能を再インストールしてみてください。 - シンボルがフィルタで非表示になっている
フィルタ設定を確認して、必要なシンボルタイプが表示されるようになっているか確認してください。
その他の便利なナビゲーション機能
メソッド一覧以外にも、VSCodeには便利なナビゲーション機能があります。
定義へジャンプ
メソッドや変数の定義位置にジャンプできます。
F12キーを押す- または
Ctrlキーを押しながらシンボルをクリック
参照を検索
そのメソッドがどこで使われているか一覧表示できます。
Shift + F12キーを押す- または右クリックメニューから「Find All References」を選択
前の位置に戻る
定義ジャンプなどで移動した後、元の位置に戻れます。
Windows/Linux
Alt + ←Mac
Ctrl + -ブレッドクラム機能
エディタ上部に表示されるブレッドクラムでも、現在の位置を確認したりシンボルを選択したりできます。
ブレッドクラムをクリックすると、そのスコープ内のシンボル一覧がドロップダウン表示されます。
まとめ
VSCodeでメソッド一覧を表示する方法をご紹介しました。
素早く表示する方法
Ctrl + Shift + O（Windows/Linux）またはCmd + Shift + O（Mac）- コロン（:）を追加でカテゴリ別に整理
常時表示する方法
- アウトラインビューを使用
- 右サイドバーに移動すると見やすい
- フィルタ機能で表示内容を調整
プロジェクト全体を検索
Ctrl + T（Windows/Linux）またはCmd + T（Mac）
これらの機能を使いこなせば、大きなファイルでも迷わずに目的のメソッドを見つけられます。
言語によっては専用の拡張機能が必要なので、メソッド一覧が表示されない場合は拡張機能をインストールしましょう。
効率的なコーディングのために、ぜひこれらの機能を活用してください。
コメント