VSCodeで定義や参照先へジャンプする方法

VSCode（Visual Studio Code）には、関数・変数・クラス・メソッドなどの定義元や参照先へ素早く移動できるコードナビゲーション機能があります。

大規模なプロジェクトでは、エクスプローラーからファイルを1つずつ探すよりも、定義や参照先へ直接ジャンプしたほうが効率的にコードを読み進められます。

特に覚えておきたいのは、「定義へ移動」「参照を表示」「定義をPeek表示」「実装へ移動」の4つです。

ただし、これらの機能は使用しているプログラミング言語やLanguage Server、拡張機能の対応状況によって利用できる範囲が異なります。

VSCodeで定義元へジャンプする方法

F12で定義へ移動する

VSCodeで最も基本的なコードナビゲーション機能が「Go to Definition（定義へ移動）」です。

調べたい関数名や変数名、クラス名などにカーソルを合わせて、

F12

を押します。

例えば、JavaScriptで次のようなコードがあるとします。

function calculateTotal(price, quantity) {
    return price * quantity;
}

const total = calculateTotal(1000, 3);

下側のcalculateTotalにカーソルを合わせてF12を押すと、

function calculateTotal(price, quantity) {

という定義部分へジャンプできます。

関数の処理内容を確認したい場合や、クラスがどこで定義されているのか調べたい場合に便利です。

Ctrl＋クリックでも定義へ移動できる

マウスを使って定義へ移動することもできます。

WindowsやLinuxでは、

Ctrl + クリック

macOSでは、

Cmd + クリック

を使用します。

シンボルにカーソルを合わせながら修飾キーを押すとリンクのように表示され、そのままクリックすると定義元へ移動できます。

キーボード操作に慣れていない場合は、まずこの方法から使い始めてもよいでしょう。

右クリックメニューから定義へ移動する

ショートカットを覚えていなくても、右クリックメニューから定義へ移動できます。

関数名やクラス名などを右クリックし、

Go to Definition

または日本語表示の場合は「定義へ移動」に相当する項目を選択します。

ショートカットを忘れた場合にも使いやすい方法です。

定義を移動せずに確認する方法

Peek Definitionを使う

定義元の内容を少し確認したいだけの場合、毎回別ファイルへ移動すると作業の流れが途切れやすくなります。

そのような場合は「Peek Definition」を使うと便利です。

Windowsでは、

Alt + F12

を使用します。

macOSでは、

Option + F12

Linuxではデフォルト設定で、

Ctrl + Shift + F10

が使われます。

Peek Definitionを実行すると、現在のエディター内に小さなウィンドウが表示され、定義内容をその場で確認できます。

定義へ移動とPeek Definitionの違い

「Go to Definition」と「Peek Definition」は似ていますが、用途が異なります。

Go to Definitionは定義元へ直接移動します。

一方、Peek Definitionは現在の画面を大きく離れずに、定義内容だけを確認できます。

処理内容を少し見るだけならPeek Definition、定義側のコードを編集したい場合はGo to Definitionという使い分けが便利です。

VSCodeで参照先を確認する方法

Shift＋F12で参照を表示する

関数や変数がどこで使われているのか確認したい場合は「Go to References」を使用します。

対象のシンボルにカーソルを合わせて、

Shift + F12

を押します。

例えば、次のようなコードがあるとします。

function calculateTotal(price, quantity) {
    return price * quantity;
}

const total1 = calculateTotal(1000, 3);
const total2 = calculateTotal(500, 5);
const total3 = calculateTotal(2000, 2);

calculateTotalにカーソルを合わせてShift + F12を押すと、その関数が使われている場所を一覧で確認できます。

「参照へ移動」ではなく「参照を表示」と考える

Shift + F12は、1か所の参照先へ直接ジャンプする機能というより、対象シンボルがどこで使用されているかを一覧表示する機能です。

そのため、「参照へ移動」というよりも「参照を表示する」「参照箇所を検索する」と理解したほうが実際の動作に近いでしょう。

関数を修正する前に参照箇所を確認しておけば、変更による影響範囲も把握しやすくなります。

実装先へジャンプする方法

Ctrl＋F12で実装へ移動する

インターフェースや抽象メソッドの具体的な実装先を確認したい場合は「Go to Implementation」を使用します。

WindowsやLinuxでは、

Ctrl + F12

macOSでは、

Cmd + F12

を使用します。

例えばTypeScriptで、

interface UserRepository {
    findUser(id: number): User;
}

というインターフェースがあり、

class DatabaseUserRepository implements UserRepository {
    findUser(id: number): User {
        // データベースから取得
    }
}

という実装があるとします。

UserRepositoryや対象メソッドからGo to Implementationを実行すると、具体的な実装先を確認できます。

インターフェースを多用するTypeScriptやJava、C#などでは特に便利です。

型定義へジャンプする方法

Go to Type Definitionを使う

変数そのものの定義ではなく、その変数がどの型として定義されているか確認したい場合は「Go to Type Definition」を使用します。

例えばTypeScriptで、

const user = getUser();

というコードがあり、userの型が、

interface User {
    id: number;
    name: string;
}

だった場合、Go to Type Definitionを使うことでUser型の定義へ移動できます。

標準では専用ショートカットが割り当てられていないため、右クリックメニューやコマンドパレットから実行する方法が分かりやすいでしょう。

必要であれば、Keyboard Shortcutsから自分でショートカットを設定することもできます。

定義と宣言の違いにも注意する

Go to DefinitionとGo to Declarationは別の機能

プログラミング言語によっては、「定義」と「宣言」が別々に存在します。

例えばC++では、

int calculate(int a, int b);

が宣言で、

int calculate(int a, int b) {
    return a + b;
}

が定義です。

VSCodeや対応拡張機能では、「Go to Definition」と「Go to Declaration」が別々の機能として用意されている場合があります。

特にCやC++などを扱う場合は、定義と宣言の違いも理解しておくとコードを追いやすくなります。

ジャンプしたあと元の場所へ戻る方法

WindowsではAlt＋←で戻れる

定義へ何度もジャンプしていると、元のコードへ戻りたくなることがあります。

Windowsでは、

Alt + ←

で前の場所へ戻れます。

反対に、

Alt + →

で次の位置へ進めます。

例えば、

main.js
↓
service.js
↓
repository.js

と移動した場合、Alt + ←を押すことで、1つ前の位置へ順番に戻れます。

F12とAlt + ←はセットで覚えておくと非常に便利です。

Linuxではショートカットが異なる

Linuxでは、ナビゲーション履歴の標準ショートカットがWindowsと異なります。

そのため、記事やマニュアルを見る際は、使用しているOSのショートカットを確認することが重要です。

VSCodeのショートカットは設定から変更できるため、自分が使いやすいキーに割り当てる方法もあります。

ファイル内の関数やクラスへジャンプする方法

Ctrl＋Shift＋Oでファイル内シンボルを検索する

現在開いているファイルの中から関数、クラス、メソッドなどを探したい場合は「Go to Symbol in File」を使用します。

WindowsやLinuxでは、

Ctrl + Shift + O

macOSでは、

Cmd + Shift + O

です。

例えば、数千行あるソースコードでも、検索欄に関数名を入力すれば目的のシンボルへすぐ移動できます。

「:」でシンボルを種類ごとに整理できる

Go to Symbolを開いたあと、

:

を入力すると、クラスやメソッドなどの種類ごとにシンボルをグループ化して確認できます。

大きなファイルの構造を把握したい場合にも役立ちます。

プロジェクト全体からシンボルを探す方法

Ctrl＋Tでワークスペース内を検索する

現在のファイルだけではなく、プロジェクト全体から関数やクラスを検索したい場合は「Go to Symbol in Workspace」を利用できます。

WindowsやLinuxでは、

Ctrl + T

macOSでは、

Cmd + T

です。

例えば、UserControllerというクラスがどのファイルにあるか分からない場合でも、Ctrl + Tを押してクラス名を入力すれば検索できます。

ただし、この機能も使用している言語やLanguage Serverがワークスペース内シンボル検索に対応している必要があります。

コマンドパレットからジャンプ機能を実行する方法

Ctrl＋Shift＋Pでコマンドを検索する

ショートカットを忘れた場合は、コマンドパレットから各機能を実行できます。

WindowsやLinuxでは、

Ctrl + Shift + P

macOSでは、

Cmd + Shift + P

を押します。

コマンドパレットを開いたら、例えば次のようなコマンドを検索できます。

Go to Definition
Go to References
Go to Implementation
Go to Type Definition

日本語表示のVSCodeでは、日本語に翻訳されたコマンド名が表示される場合があります。

ショートカットを覚えていない段階では、コマンドパレットから検索する方法も便利です。

VSCodeで定義へジャンプできない原因

対象言語がコードナビゲーションに対応していない

VSCodeの定義ジャンプは、単純な文字列検索で動作しているわけではありません。

使用しているプログラミング言語のLanguage ServiceやLanguage Server、拡張機能などがソースコードを解析し、その解析結果をもとに定義や参照先を特定します。

そのため、使用している言語がコードナビゲーションに対応していなければ、F12を押しても定義へジャンプできない場合があります。

必要な拡張機能が入っていない

言語によっては、VSCodeに拡張機能を追加する必要があります。

代表的な例としては、Python、C/C++、Java、Go、Rustなどがあります。

一方、JavaScriptやTypeScriptについては、VSCodeに標準搭載されている言語機能を利用できます。

定義ジャンプが動作しない場合は、まず対象言語に必要な拡張機能が導入されているか確認するとよいでしょう。

ファイル単体ではなくプロジェクトフォルダーを開く

複数ファイルにまたがるプロジェクトでは、ファイルを1つだけ開くのではなく、プロジェクトのルートフォルダーをVSCodeで開くほうが適切です。

単一ファイルでも定義ジャンプできる場合はありますが、複数ファイル間の依存関係やインポート関係を正しく解析するには、プロジェクト全体をワークスペースとして開いたほうが安定します。

プロジェクト設定を確認する

言語によっては、プロジェクト設定ファイルがコード解析に影響します。

例えば、

tsconfig.json
jsconfig.json
pom.xml
build.gradle
CMakeLists.txt

などです。

TypeScriptの場合、対象ファイルがtsconfig.jsonの解析対象から外れていると、期待どおりに定義や参照先を検索できない場合があります。

インポートエラーを確認する

例えば、

import { calculateTotal } from "./utils";

というコードがあり、"./utils"が正しく解決できていなければ、calculateTotalの定義元も正常に特定できない場合があります。

エディター上に赤い波線やエラーメッセージが表示されていないか確認しましょう。

Language Serverの解析が終わっていない

大規模なプロジェクトを開いた直後は、Language Serverや言語サービスがソースコードを解析している場合があります。

解析が完了する前は、一時的に定義や参照先が見つからないことがあります。

プロジェクトを開いた直後だけ動作しない場合は、解析の完了後にもう一度試すと改善することがあります。

ショートカットを変更する方法

Keyboard Shortcutsから変更できる

標準ショートカットが使いにくい場合は、自分好みに変更できます。

WindowsやLinuxでは、

Ctrl + K
Ctrl + S

の順番でキーを押すと、Keyboard Shortcutsを開けます。

これは同時押しではなく、

Ctrl + K

を押したあとに、

Ctrl + S

を押す連続入力形式のショートカットです。

検索欄から、

Go to Definition
Go to References
Go to Implementation

などを検索し、自分が使いやすいキーに変更できます。

VSCodeで覚えておきたいジャンプ系ショートカット

Windowsでよく使うショートカット

Windowsを中心に、特に利用頻度の高いものをまとめると次のとおりです。

操作	ショートカット	用途
定義へ移動	F12	関数・変数・クラスなどの定義元を開く
定義をPeek表示	Alt + F12	現在の画面内で定義を確認する
定義を横に開く	Ctrl + K → F12	定義を横のエディターに表示する
参照を表示	Shift + F12	シンボルが使用されている場所を確認する
実装へ移動	Ctrl + F12	インターフェースなどの実装を確認する
ファイル内シンボル	Ctrl + Shift + O	現在のファイル内から関数やクラスを探す
ワークスペース内シンボル	Ctrl + T	プロジェクト全体からシンボルを検索する
前の位置へ戻る	Alt + ←	ジャンプ前の場所へ戻る
次の位置へ進む	Alt + →	戻る前の場所へ進む
シンボル名を変更	F2	対応言語でシンボルをリネームする

OSによって標準ショートカットが異なる場合があるため、macOSやLinuxを使用している場合はKeyboard Shortcutsから現在の設定を確認すると確実です。

VSCodeでは定義・参照・実装を使い分けることが重要

定義は「どこで作られているか」を調べる

定義へ移動したい場合は、

F12

を使用します。

「この関数はどこで定義されているのか」「このクラスの中身を確認したい」といった場合に使用します。

参照は「どこで使われているか」を調べる

参照箇所を調べたい場合は、

Shift + F12

を使用します。

「この関数を呼び出している場所はどこか」「この変数はどこから使われているのか」といった確認に向いています。

実装は「具体的にどこで処理されているか」を調べる

インターフェースや抽象メソッドの具体的な実装を確認する場合は、

Ctrl + F12

を使用します。

定義、参照、実装の違いを理解しておくと、複雑なコードでも構造を追いやすくなります。

VSCodeではF12とShift＋F12から覚えるのがおすすめ

VSCodeのコードナビゲーション機能をすべて一度に覚える必要はありません。

まずは、

F12
→ 定義を確認

Shift + F12
→ 参照箇所を確認

Alt + ←
→ 元の場所へ戻る

という3つを覚えるだけでも、コードを読む効率は大きく向上します。

慣れてきたら、

Alt + F12
→ 定義をその場で確認

Ctrl + F12
→ 実装を確認

Ctrl + Shift + O
→ 現在のファイル内を検索

Ctrl + T
→ プロジェクト全体からシンボルを検索

といった機能も使ってみるとよいでしょう。

特に規模の大きなプロジェクトや他人が書いたコードを読む場合は、「F12で定義を確認する」「Shift + F12で参照箇所を確認する」「戻る操作で元のコードへ戻る」という流れを使いこなすことで、ソースコードを効率的に追えるようになります。

以上、VSCodeで定義や参照先へジャンプする方法についてでした。

最後までお読みいただき、ありがとうございました。