VSCode(Visual Studio Code)には、コード内のメソッドや関数、クラスなどへ素早く移動するためのナビゲーション機能が用意されています。
大規模なプログラムでは、対象のメソッドを手作業で探していると時間がかかります。
VSCodeの「定義へ移動」や「シンボル検索」などを利用すれば、目的のコードへすぐにジャンプできます。
なお、VSCodeではメソッド、関数、クラス、変数、型などをまとめて「シンボル」として扱います。
そのため、メソッドへ移動する機能の多くは、メソッド以外のシンボルを探す場合にも利用できます。
F12でメソッドの定義へジャンプする
「定義へ移動」を利用する
VSCodeでメソッドへジャンプする基本的な方法が「Go to Definition(定義へ移動)」です。
調べたいメソッド名にカーソルを合わせて、次のキーを押します。
F12
例えば、次のようなJavaScriptコードがあるとします。
function calculateTotal(price, quantity) {
return price * quantity;
}
const total = calculateTotal(1000, 3);
calculateTotal(1000, 3) の calculateTotal にカーソルを合わせてF12を押すと、VSCodeが定義を認識できる場合は、
function calculateTotal(price, quantity) {
の位置へジャンプします。
F12はメソッドだけでなく、関数、クラス、変数、型などの定義を確認するときにも利用できます。
Ctrl+クリックでも定義へ移動できる
標準的な設定では、マウス操作でも定義へ移動できます。
WindowsやLinuxでは、
Ctrl + クリック
macOSでは、
Command + クリック
を使用します。
メソッド名をCtrlキーまたはCommandキーを押しながらクリックすると、その定義位置へ移動できます。
ただし、VSCodeの editor.multiCursorModifier の設定によっては、Ctrl/Command+クリックとAlt+クリックの役割が入れ替わる場合があります。
Ctrl+クリックで移動できない場合は、キーボードショートカットやマルチカーソルの設定を確認するとよいでしょう。
Alt+F12で定義をその場に表示する
Peek Definitionを利用する
メソッドの定義へ完全に移動するのではなく、現在のコードを表示したまま内容だけ確認したい場合は「Peek Definition」が便利です。
Windowsでは、
Alt + F12
macOSでは、
Option + F12
Linuxの標準設定では、
Ctrl + Shift + F10
を使用します。
実行すると、現在のエディター内に小さなウィンドウが表示され、その中でメソッドの定義を確認できます。
例えば、
const total = calculateTotal(1000, 3);
の calculateTotal に対してPeek Definitionを実行すると、元のコードから離れずに、
function calculateTotal(price, quantity) {
return price * quantity;
}
の内容を確認できます。
コードを読みながらメソッドの処理内容だけ確認したいときに便利です。
Ctrl+Shift+Oで現在のファイル内のメソッドを探す
Go to Symbol in Fileを利用する
現在開いているファイルの中から特定のメソッドを探したい場合は、「Go to Symbol in File」が便利です。
WindowsやLinuxでは、
Ctrl + Shift + O
macOSでは、
Command + Shift + O
を押します。
実行すると、現在のファイルに含まれるメソッド、関数、クラスなどのシンボルが一覧表示されます。
例えば、次のようなコードがあるとします。
class UserService {
getUser() {
}
createUser() {
}
updateUser() {
}
deleteUser() {
}
}
Ctrl + Shift + O を押すと、
UserService
getUser
createUser
updateUser
deleteUser
といった候補から目的のシンボルを検索できます。
検索欄に、
update
などと入力すれば、updateUser に候補を絞り込めます。
長いファイルの中から特定のメソッドへ移動したい場合に非常に便利です。
「:」を入力すると種類ごとに整理できる
シンボル検索画面で、
:
を入力すると、シンボルを種類ごとにグループ化して表示できる場合があります。
メソッド、関数、クラスなどが多数含まれるファイルでは、目的のコードを見つけやすくなります。
Ctrl+Tでプロジェクト全体からメソッドを探す
ワークスペース内のシンボルを検索する
メソッド名は分かっているものの、どのファイルに定義されているのか分からない場合は、ワークスペース全体のシンボル検索が便利です。
WindowsやLinuxでは、
Ctrl + T
macOSでは、
Command + T
を使用します。
例えば、
getUser
と入力すると、対応している言語や拡張機能では、ワークスペース内に存在する同名のメソッドや関数などが候補として表示されます。
例えば、
UserService.getUser
AdminService.getUser
ApiClient.getUser
といった候補が表示されることがあります。
目的の項目を選択すると、対象ファイルを開いてその位置へジャンプできます。
大規模なプロジェクトでは、ファイルを一つずつ探すより効率的です。
なお、この機能は使用している言語や言語拡張機能がワークスペースシンボル検索に対応している必要があります。
Ctrl+Pからメソッドを検索する
「@」を利用してファイル内シンボルを探す
VSCodeでは、Quick Openからシンボルを検索することもできます。
WindowsやLinuxでは、
Ctrl + P
macOSでは、
Command + P
を押します。
Quick Openが表示されたら、
@
を入力します。
例えば、
@calculateTotal
と入力すれば、現在のファイル内にある calculateTotal というシンボルを検索できます。
これは Ctrl + Shift + O で利用できるファイル内シンボル検索と同系統の機能です。
普段からQuick Openを多用している場合は、こちらの操作方法も覚えておくと便利です。
アウトラインからメソッドへジャンプする
Outlineビューを利用する
VSCodeのエクスプローラーには「Outline」というビューがあります。
Outlineには、現在開いているファイル内の、
- クラス
- メソッド
- 関数
- プロパティ
- 変数
などが一覧表示されます。
例えば、
class UserService {
getUser() {}
createUser() {}
updateUser() {}
}
というコードであれば、Outline上に、
UserService
├ getUser
├ createUser
└ updateUser
のように表示されます。
目的のメソッドをクリックすれば、その定義位置へ移動できます。
ショートカットを覚えなくても利用できるため、マウス操作を中心にVSCodeを利用している場合にも便利です。
Breadcrumbsからメソッドへ移動する
エディター上部のパンくずリストを利用する
VSCodeのエディター上部には「Breadcrumbs(パンくずリスト)」を表示できます。
例えば、
src > services > UserService.js > UserService > getUser
のように、現在開いているファイルやクラス、メソッドの階層を確認できます。
Breadcrumbsのクラス名やメソッド名を選択すると、同じファイル内の別のシンボルへ移動できます。
現在のコードがどのクラスやメソッドに属しているかを確認しながら移動したい場合に便利です。
Ctrl+F12でメソッドの実装へジャンプする
Go to Implementationを利用する
インターフェースや抽象メソッドを利用している場合は、定義ではなく実際の実装コードを確認したいことがあります。
その場合は「Go to Implementation」を利用します。
WindowsやLinuxでは、
Ctrl + F12
macOSでは、
Command + F12
です。
例えば、TypeScriptで次のようなインターフェースがあるとします。
interface UserRepository {
findUser(id: number): User;
}
実装クラスが、
class DatabaseUserRepository implements UserRepository {
findUser(id: number): User {
// データベースから取得する処理
}
}
となっている場合、findUser からGo to Implementationを実行すると、具体的な実装へ移動できます。
インターフェースや抽象クラスを多用するプログラムでは特に便利です。
Shift+F12でメソッドの参照箇所を探す
Go to Referencesを利用する
「このメソッドがどこで使われているのか」を確認したい場合は、「Go to References」を利用します。
ショートカットは、
Shift + F12
です。
例えば、
function calculateTotal() {
}
の calculateTotal にカーソルを合わせてShift+F12を押すと、このシンボルが参照されている場所を確認できます。
メソッドの場合は、呼び出されている場所を調べる用途にも利用できます。
コードを変更する前に影響範囲を確認したい場合にも役立ちます。
なお、Go to Referencesはメソッド専用の機能ではありません。
関数、クラス、変数、型など、さまざまなシンボルの参照箇所を確認できます。
ジャンプした位置から元の場所へ戻る
「戻る」と「進む」を使う
F12などで別の場所へジャンプしたあと、元のコードへ戻りたい場合があります。
Windowsでは、
Alt + ←
Linuxでは、
Ctrl + Alt + -
macOSでは、
Control + -
で前の位置へ戻れます。
例えばWindowsなら、
F12
↓
メソッドの定義へジャンプ
↓
Alt + ←
↓
元の位置へ戻る
という操作ができます。
反対に、ジャンプ履歴を先へ進みたい場合は、Windowsでは、
Alt + →
を利用できます。
Linuxでは、
Ctrl + Shift + -
macOSでは、
Control + Shift + -
です。
コードリーディングでは、F12と「戻る」を組み合わせると非常に効率よく移動できます。
VSCodeでメソッドへジャンプできない原因
使用している言語のサポートが不足している
F12による「定義へ移動」は、単純な文字列検索ではありません。
VSCodeの言語機能がコードを解析し、そのシンボルがどこで定義されているかを判断しています。
そのため、使用しているプログラミング言語によっては、対応する拡張機能や言語サーバーが必要です。
例えば、
- Python
- PHP
- Java
- C#
- C++
- Go
などでは、適切な言語拡張機能を導入することでコードナビゲーションを利用しやすくなります。
一方、JavaScriptやTypeScriptには、VSCodeに言語機能が標準搭載されています。
プロジェクトのフォルダーを開いていない
単一ファイルだけをVSCodeで開いている場合でも、F12が正常に機能することはあります。
ただし、プロジェクト全体の構成を解析する必要がある場合は、プロジェクトのルートフォルダーを開いたほうが正しく定義を解決しやすくなります。
例えば、
File
↓
Open Folder
からプロジェクトフォルダーを開きます。
特に、
- import
- 外部モジュール
- tsconfig.json
- pyproject.toml
- Composer設定
- ワークスペース設定
などを利用しているプロジェクトでは、ルートフォルダーを開くことが重要になる場合があります。
必要な依存関係がインストールされていない
外部ライブラリやパッケージの定義へ移動したい場合は、必要な依存関係がインストールされていないと、定義場所を正しく解決できないことがあります。
Node.jsプロジェクトであれば、
npm install
PHPプロジェクトであれば、
composer install
などで依存関係を準備します。
ただし、依存関係のインストールは、すべてのF12エラーに共通する必須条件ではありません。
主に外部パッケージの定義が見つからない場合の確認項目として考えるとよいでしょう。
言語機能や拡張機能が正常に動作していない
拡張機能や言語サーバーが一時的に正常動作していない場合、F12による定義移動が利用できなくなることがあります。
その場合は、
Ctrl + Shift + P
でCommand Paletteを開き、
Developer: Reload Window
を実行すると改善する場合があります。
使用している言語によっては、言語サーバーを再起動するためのコマンドが用意されていることもあります。
ショートカットが変更されている
VSCodeではキーボードショートカットを自由に変更できます。
そのため、F12を押しても反応しない場合は、既定のショートカットが変更されている可能性もあります。
Command Paletteから、
Preferences: Open Keyboard Shortcuts
を開き、
Go to Definition
などを検索すると、現在割り当てられているキーを確認できます。
VSCodeで覚えておきたいメソッド移動のショートカット
VSCodeでコードリーディングを頻繁に行う場合は、以下のショートカットを覚えておくと便利です。
| 操作 | Windows | Linux | macOS |
|---|---|---|---|
| 定義へ移動 | F12 | F12 | F12 |
| 定義をプレビュー | Alt + F12 | Ctrl + Shift + F10 | Option + F12 |
| ファイル内のシンボル検索 | Ctrl + Shift + O | Ctrl + Shift + O | Command + Shift + O |
| ワークスペース内のシンボル検索 | Ctrl + T | Ctrl + T | Command + T |
| 実装へ移動 | Ctrl + F12 | Ctrl + F12 | Command + F12 |
| 参照先を表示 | Shift + F12 | Shift + F12 | Shift + F12 |
| Quick Open | Ctrl + P | Ctrl + P | Command + P |
| Command Palette | Ctrl + Shift + P | Ctrl + Shift + P | Command + Shift + P |
| 前の位置へ戻る | Alt + ← | Ctrl + Alt + - | Control + - |
| 次の位置へ進む | Alt + → | Ctrl + Shift + - | Control + Shift + - |
ショートカットは、OSやユーザーのキーバインド設定によって変更されている場合があります。
VSCodeでメソッドへ効率よくジャンプする使い分け
呼び出しているメソッドの定義を確認したい場合
最も基本的なのは、
F12
です。
対象メソッドの定義そのものへ移動したい場合に使用します。
現在のファイル内からメソッドを探したい場合
長いファイルの中から目的のメソッドを探す場合は、
Ctrl + Shift + O
が便利です。
メソッド名を入力するだけで素早く移動できます。
プロジェクト全体からメソッドを探したい場合
どのファイルに定義されているのか分からない場合は、
Ctrl + T
を利用します。
ワークスペース全体からシンボルを検索できます。
定義へ移動せず内容だけ確認したい場合
現在のコードから離れずに定義を確認したい場合は、Peek Definitionを利用します。
Windowsでは、
Alt + F12
です。
メソッドが使われている場所を確認したい場合
メソッドの参照箇所を調べる場合は、
Shift + F12
を利用します。
コード変更による影響範囲を調べる場合にも便利です。
VSCodeのジャンプ機能を活用してコードリーディングを効率化しよう
VSCodeには、メソッドや関数、クラスなどを効率よく探すためのコードナビゲーション機能が豊富に用意されています。
特に覚えておきたいのは、
F12
Ctrl + Shift + O
Ctrl + T
Shift + F12
の4つです。
呼び出し元から定義へ移動する場合はF12、現在のファイル内から探す場合はCtrl+Shift+O、プロジェクト全体から探す場合はCtrl+T、参照箇所を確認する場合はShift+F12というように使い分けると効率的です。
また、F12でジャンプしたあとに「戻る」ショートカットを利用すれば、元のコードと定義を行き来しながらスムーズにコードを読み進められます。
これらの機能を使いこなすことで、ファイル数やコード量の多いプロジェクトでも、目的のメソッドを探す時間を減らし、開発やデバッグ、コードリーディングを効率化できます。
以上、VSCodeでメソッドへジャンプする方法についてでした。
最後までお読みいただき、ありがとうございました。










