VSCodeリファクタリング完全ガイド|ショートカットから実践テクニックまで

VSCodeリファクタリング完全ガイド|ショートカットから実践テクニックまで

「変数名を直したいけど、どこに使っているかわからない」「コードが長くなりすぎて読みにくい」そんな悩みを抱えているエンジニアの方は多いはずです。VSCodeにはリファクタリングを支援する強力な機能が用意されており、言語サービス(Language Server)や拡張機能が対応していれば、ショートカット一つで安全な名前変更や関数の抽出などを実行できます。この記事では、ショートカット一覧から各機能の実践的な使い方、言語別の対応状況、トラブル対処法まで、VSCodeリファクタリングの全体像をわかりやすく解説します。

目次

VSCodeリファクタリングのショートカット一覧【早見表】

VSCodeリファクタリングのショートカット一覧【早見表】

VSCodeのリファクタリング機能を最大限に活用するには、ショートカットキーを覚えることが最短ルートです。

マウス操作でメニューを探す手間を省き、キーボード操作だけで主要なリファクタリングを即座に実行できます。

以下にWindows版・Mac版それぞれのショートカット早見表をまとめました。日常的に使う操作から応用的なものまで網羅しています。

Windows版ショートカットキー

Windows環境でよく使うリファクタリング関連のショートカットキーは以下のとおりです。

機能 ショートカットキー 説明
Rename Symbol(シンボル名変更) F2 変数・関数・クラス名をプロジェクト全体で一括変更(言語サービスの対応が必要)
リファクタリングのみ表示(Refactor) Ctrl + Shift + R Quick Fixを除き、リファクタリング候補のみを表示(対応している場合)
Quick Fix(コードアクション) Ctrl + . エラーや警告に対する修正候補を表示
Organize Imports Shift + Alt + O 不要なインポートの削除・並び替え(言語/拡張により挙動が異なる)
すべての出現箇所を選択 Ctrl + Shift + L 同じ文字列をすべて選択して同時編集
定義へ移動 F12 関数・変数の定義元へジャンプ
参照をすべて検索 Shift + F12 該当シンボルが使われている箇所をすべて表示
コマンドパレット表示 Ctrl + Shift + P 任意のリファクタリングコマンドを検索・実行

特に頻繁に使うのはF2とCtrl + .(ピリオド)です。この2つを覚えるだけで、日常的なリファクタリング作業の大半をカバーできます。

Mac版ショートカットキー

Mac環境では一部のキーがWindowsと異なります。以下の早見表を参考にしてください。

機能 ショートカットキー 説明
Rename Symbol(シンボル名変更) F2 変数・関数・クラス名をプロジェクト全体で一括変更(言語サービスの対応が必要)
リファクタリングのみ表示(Refactor) Ctrl + Shift + R Quick Fixを除き、リファクタリング候補のみを表示(対応している場合)
Quick Fix(コードアクション) Cmd + . エラーや警告に対する修正候補を表示
Organize Imports Shift + Option + O 不要なインポートの削除・並び替え(言語/拡張により挙動が異なる)
すべての出現箇所を選択 Cmd + Shift + L 同じ文字列をすべて選択して同時編集
定義へ移動 F12 関数・変数の定義元へジャンプ
参照をすべて検索 Shift + F12 該当シンボルが使われている箇所をすべて表示
コマンドパレット表示 Cmd + Shift + P 任意のリファクタリングコマンドを検索・実行

WindowsとMacで異なるのは主にCtrl → CmdAlt → Optionの置き換えです。

F2キーによるRename Symbolはどちらの環境でも共通のショートカットとして使えます。

ショートカットキーを変更したい場合は、「Ctrl + K → Ctrl + S(Mac: Cmd + K → Cmd + S)」でキーボードショートカット設定画面を開き、自分好みにカスタマイズできます。

VSCodeのリファクタリング機能とは?できること6つを解説

VSCodeのリファクタリング機能とは?できること6つを解説

VSCodeのリファクタリング機能とは、コードの外部的な動作を変えずに、内部構造を整理・改善するための支援機能(Code Action / Refactorings)です。

単なる検索置換とは異なり、コードの文脈(スコープや型情報)を理解した上で安全に変更を適用できる点が最大の特徴です(※利用できる内容は言語サービスや拡張機能の対応状況に依存します)。

VSCodeで標準的に使えるリファクタリング機能は主に以下の6つです。

  • Rename Symbol(シンボル名変更):変数・関数・クラス名をプロジェクト全体で一括変更
  • Extract Function(関数抽出):選択したコードブロックを新しい関数として切り出す(対応言語/拡張で利用可能)
  • Extract Variable(変数抽出):複雑な式を変数に置き換えて可読性を高める(対応言語/拡張で利用可能)
  • Inline Variable(変数のインライン化):一度しか使わない変数を削除してコードを簡潔にする(対応言語/拡張で利用可能)
  • Organize Imports(インポート整理):未使用のインポートを削除し、順序を整列する(言語/拡張により挙動が異なる)
  • Code Action / Quick Fix(コードアクション):エラーや警告に対して自動修正を提案する

これらの機能は右クリックメニューの「リファクタリング…」または「クイックフィックス」から呼び出せるほか、ショートカットキーでも素早くアクセスできます。

手動修正との違いとメリット

「検索して置換すればいいのでは?」と思う方もいるかもしれませんが、手動修正とVSCodeの自動リファクタリングには大きな違いがあります。

比較項目 手動修正(検索置換) VSCodeリファクタリング
変更範囲の精度 文字列一致で置換(誤置換リスクあり) スコープ/構文を考慮した変更(言語サービスが対応している範囲)
作業時間 ファイルをまたぐと時間がかかる プロジェクト全体を効率よく処理(対応している範囲)
見落とし・ミス 人為的なミスが発生しやすい 自動化により見落としを減らせる
コメント内の同名文字列 誤って変更してしまう場合がある 基本的にコードとコメントを区別して処理(機能/拡張により挙動は異なる)
関数抽出・変数化 手作業で実装が必要 選択するだけで自動生成(対応言語/拡張で利用可能)

特にチーム開発では、意図しない場所まで変更してしまうリスクを下げられる点がVSCodeリファクタリングの大きなメリットです。

また、変更前にプレビューで確認できるケースもあるため、安心して作業を進めやすくなります。

VSCodeリファクタリングの使い方【実践手順】

VSCodeリファクタリングの使い方【実践手順】

ここでは、VSCodeの主要なリファクタリング機能それぞれの具体的な操作手順を解説します。

実際のコード例とともに手順を確認し、すぐに実務で活用できる知識を身につけましょう。

変数名・関数名を一括変更する(Rename Symbol)

Rename Symbolは、変数や関数・クラスの名前をプロジェクト全体で安全に一括変更できる機能です。

操作手順は以下のとおりです。

  1. 変更したい変数名・関数名にカーソルを合わせる
  2. F2キーを押す(またはカーソルを置いた状態で右クリック →「シンボルの名前変更」を選択)
  3. 入力フィールドに新しい名前を入力する
  4. Enterキーで確定する(Shift + Enterでプレビュー付き確認も可能)

Rename/refactor a Variable name in Visual Studio Code | bobbyhadz

Shift + Enterでプレビュー画面を開くと、変更が適用されるすべての箇所がリスト表示されます。

Rename/refactor a Variable name in Visual Studio Code | bobbyhadz

このプレビュー機能を使えば、変更前に影響範囲を必ず確認できるため、意図しない修正を防ぐことができます。

VS CodeのRename Symbol機能について詳しく解説した動画も参考にしてみてください。

VS Code tips — Rename symbol with F2

参考:vscodeのjavascriptリファクタリング機能

コードを関数として抽出する(Extract Function)

Extract Functionは、繰り返し使うコードや長くなりすぎた処理ブロックを、独立した関数として切り出す機能です(対応言語/拡張で利用可能)。

操作手順は以下のとおりです。

  1. 関数として切り出したいコードをマウスまたはキーボードで選択する
  2. 右クリックして「リファクタリング…」を選択する(またはCmd + . / Ctrl + .でコードアクションを開き、Refactorを選ぶ)
  3. メニューから「Extract to function in module scope」または「Extract to inner function」を選択する
  4. 新しい関数名を入力してEnterで確定する

抽出した関数には、元のコードで使っていた変数が引数として自動的に設定されます。

また、元の場所には抽出した関数の呼び出しコードが自動生成されるため、手動でのコピー&ペーストは一切不要です。

この機能はJavaScript・TypeScriptで特に充実しており、モジュールスコープへの抽出や内部関数への抽出など、複数の選択肢から適切なものを選べます。

参考:エディタの機能を知って身につけるリファクタリング 〜VS Codeで楽々リファクタリング

複雑な式を変数に切り出す(Extract Variable)

Extract Variableは、長い計算式や複雑な条件式を意味のある変数名に置き換えて、コードの可読性を高める機能です(対応言語/拡張で利用可能)。

操作手順は以下のとおりです。

  1. 変数に切り出したい式(例:user.age >= 18 && user.isVerified)を選択する
  2. 右クリック →「リファクタリング…」を選択する(またはCmd + . / Ctrl + .
  3. メニューから「Extract to constant in enclosing scope」を選択する
  4. 変数名を入力してEnterで確定する

例えば、calculateTax(price * quantity * discountRate)のような複雑な式は、const totalPrice = price * quantity * discountRate;のように変数化することで、コードの意図が一目でわかるようになります。

変数名には処理の意味を表す名前を付けることが、コードの可読性向上の鍵です。

参考:エディタの機能を知って身につけるリファクタリング 〜VS Codeで楽々リファクタリング

不要な変数を削除する(Inline Variable)

Inline Variableは、一度しか使われない中間変数を削除し、その変数の値を直接使用している箇所にインライン展開する機能です(対応言語/拡張で利用可能)。

操作手順は以下のとおりです。

  1. インライン化したい変数名にカーソルを合わせる
  2. 右クリック →「リファクタリング…」を選択する(またはCmd + . / Ctrl + .
  3. メニューから「Inline Variable」を選択する
  4. 変数宣言が削除され、使用箇所に値が直接展開される

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

const result = getValue(); return result;という記述は、Inline Variableを使うとreturn getValue();と簡潔にまとめることができます。

ただし、変数に複数箇所で参照されている場合や、副作用のある式が代入されている場合は慎重に使用してください。

インポートを自動整理する(Organize Imports)

Organize Importsは、ファイル内のインポート文を自動的に整理する機能です。未使用のインポートを削除し、並び替えます(言語や拡張機能により、対応状況・挙動が異なります)。

操作手順は以下のとおりです。

  1. エディタで対象ファイルを開く
  2. Windowsの場合はShift + Alt + O、Macの場合はShift + Option + Oを押す
  3. または、右クリックメニューから「インポートの整理」を選択する

さらに、ファイル保存時に自動でインポートを整理する設定も可能です。

settings.jsonに以下を追加することで、保存時に自動実行されます。

{
"editor.codeActionsOnSave": {
"source.organizeImports": "explicit"
}
}

この設定を有効にすることで、インポートの整理を意識しなくても常にクリーンな状態を保ちやすくなります。

コードアクション(Quick Fix)の活用法

コードアクション(Quick Fix)は、VSCodeが検出したエラーや警告に対して、修正候補を自動提示する機能です。

操作手順は以下のとおりです。

  1. 波線が表示されているエラー・警告箇所にカーソルを合わせる
  2. 電球アイコン(💡)をクリック、またはWindowsはCtrl + .、MacはCmd + .を押す
  3. 提示された修正候補の中から適切なものを選択する

新人エンジニア向けVSCodeがより便利になる知識part2

Quick Fixでできる主な操作は以下のとおりです。

  • 未定義変数・関数の自動宣言
  • 不足しているインポートの自動追加
  • 型エラーの修正提案
  • 未使用変数の削除
  • アクセシビリティの改善提案

新人エンジニア向けVSCodeがより便利になる知識part2

Quick Fixはリファクタリングの入口として最も使いやすい機能です。エラーを見つけたらまずCtrl + .(Cmd + .)を試す習慣を付けましょう。

【言語別】VSCodeリファクタリング機能の対応状況

【言語別】VSCodeリファクタリング機能の対応状況

VSCodeのリファクタリング機能は、使用する言語によって対応状況が異なります。

自分が普段使う言語でどの機能が利用できるか、事前に把握しておくことでスムーズに開発を進められます。

JavaScript / TypeScript

JavaScript・TypeScriptはVSCodeのリファクタリング機能が最も充実している言語です。

VSCodeに組み込まれたTypeScript Language Serviceが高精度な解析を行うため、拡張機能なしで以下の機能が利用できます。

  • Rename Symbol:クロスファイルでの一括名前変更に対応
  • Extract Function / Extract Method:モジュールスコープ・クラスメソッドへの抽出
  • Extract Variable / Extract Constant:式の変数化
  • Inline Variable:変数のインライン展開
  • Organize Imports:未使用インポートの削除・並び替え
  • Move to New File:クラスや関数を別ファイルに移動
  • Convert to Arrow Function:通常関数をアロー関数に変換
  • Add/Remove Braces from Arrow Function:アロー関数の括弧の追加・削除

TypeScriptでは型情報を活用するため、JavaScript単体よりもさらに精度の高いリファクタリングが可能です。

参考:vscodeのjavascriptリファクタリング機能

Python

Pythonでは、Pylance拡張機能(Microsoft公式)をインストールすることでリファクタリング機能が大幅に強化されます。

Pylanceを導入した場合に使える主なリファクタリング機能は以下のとおりです。

  • Rename Symbol:変数・関数・クラス名のプロジェクト全体での一括変更
  • Extract Variable:選択した式を変数に切り出す
  • Extract Method:選択したコードを新しいメソッドとして抽出
  • Organize Imports:インポートの整理(環境により、isort等の拡張機能/ツールが必要な場合あり)

ただし、Pythonは動的型付け言語のため、JavaScript/TypeScriptと比較するとクロスファイルのRename Symbolの精度がやや劣る場合があります。

複雑なリファクタリングを行う場合は、Rope(Pythonリファクタリングライブラリ)を使ったpylsp-ropeなどのツールと組み合わせることも選択肢の一つです。

参考:Visual Studio で Python コードをリファクタリングする – Microsoft

その他の言語(Java・Go・C#)

Java・Go・C#など他の言語でも、専用の拡張機能をインストールすることでリファクタリング機能を利用できます。

言語 推奨拡張機能 主なリファクタリング機能
Java Extension Pack for Java(Microsoft公式) Rename Symbol、Extract Method、Extract Variable、Move Class、Inline Variable
Go Go(Google公式) Rename Symbol、Extract Function、Fill Struct(構造体補完)
C# C# Dev Kit(Microsoft公式) Rename Symbol、Extract Method、Introduce Variable、Inline Variable、Move Type to File

Javaでは右クリックメニューから「Rename Symbol」を選択してコード全体のシンボル名を一括変更できます。

参考:Java VS Codeでリファクタリングを行う方法

VSCodeでリファクタリングできない原因と対処法

VSCodeでリファクタリングできない原因と対処法

VSCodeのリファクタリング機能が突然動作しなくなったり、メニューが表示されなかったりするケースは少なくありません。

よくある原因と対処法をケース別に解説します。

リファクタリングメニューが表示されない場合

右クリックメニューに「リファクタリング…」が表示されない場合、以下の原因が考えられます。

  • 言語サーバーが起動していない:拡張機能(Pylance・Java Extension Packなど)が無効化されていないか確認してください。
  • ファイルが保存されていない:未保存のファイル(Untitled)ではリファクタリング機能が使えない場合があります。一度保存してから試してください。
  • 言語モードが正しく認識されていない:エディタ右下に表示されている言語名(例:JavaScript)が正しいか確認してください。誤って「Plain Text」になっている場合はクリックして変更します。
  • 拡張機能の競合:複数の言語拡張機能が競合している可能性があります。拡張機能を一時無効化して確認してください。

対処法として、VSCodeを再起動するだけで解決するケースも多いです。まずは再起動を試みてください。

F2(Rename)が効かない・反応しない場合

F2キーを押してもRename Symbolが起動しない場合、以下を確認してください。

  • カーソル位置の確認:F2は変数名・関数名などのシンボル上にカーソルがある状態でのみ機能します。空白やコメント内では反応しません。
  • 言語サーバーの準備完了を待つ:ファイルを開いた直後は言語サーバーが起動中のため、数秒待ってから試してください。
  • Pythonの場合はPylanceを確認:環境によってはPylanceを有効化することで改善することがあります。
  • キーバインドの競合:他のアプリケーション(IMEなど)がF2キーを使用している場合、競合が起きることがあります。

VS CodeでF2キーで変数名を一括変更する方法

F2が使えない場合の代替手段として、右クリック →「シンボルの名前変更」からも同じ操作が実行できます。

関数抽出がグレーアウトして選択できない場合

「リファクタリング…」メニューを開いても、Extract FunctionやExtract Variableがグレーアウトして選択できない場合があります。

主な原因と対処法は以下のとおりです。

  • 選択範囲が不完全:完全な式や文を選択していないと機能しません。選択範囲を正確に指定してください。
  • 構文エラーの存在:ファイル内に構文エラーがある場合、リファクタリング機能が無効化されます。まず既存のエラーを修正してください。
  • 言語が非対応:使用中の言語でExtract Functionがサポートされていない場合があります。対応する拡張機能を確認してください。
  • 拡張機能のバージョン問題:古いバージョンの言語拡張機能では機能が限定されることがあります。最新版に更新してください。

それでも解決しない場合は、コマンドパレット(Ctrl + Shift + P / Cmd + Shift + P)で「Developer: Reload Window」を実行し、ウィンドウを再ロードすることも有効です。

VSCodeリファクタリングを強化するおすすめ拡張機能3選

VSCodeリファクタリングを強化するおすすめ拡張機能3選

VSCodeの標準機能に加え、拡張機能を活用することでリファクタリングの精度と速度をさらに高めることができます。

特に実務で効果を発揮するおすすめの拡張機能を3つ紹介します。

Abracadabra(JavaScript/TypeScript向け)

Abracadabraは、JavaScript・TypeScript専門のリファクタリング拡張機能です。

VSCodeの標準機能では対応していない高度なリファクタリング操作を多数サポートしています。

  • Flip If/Else:if-else文の条件を反転させる
  • Remove Redundant Else:不要なelseブロックを除去する
  • Merge If Statements:連続するif文をマージする
  • Convert to Arrow Function:関数をアロー関数に変換する
  • Negate Expression:論理式を否定する

右クリックメニューやショートカット(Ctrl + Shift + R)から呼び出せます。

書籍『リファクタリング』(Fowler著)で紹介されているテクニックをVSCodeで手軽に実践したい場合に特におすすめです。

SonarLint(コード品質チェック)

SonarLintは、コードの品質問題・バグ・セキュリティ脆弱性をリアルタイムで検出してくれる拡張機能です。

JavaScript・TypeScript・Python・Java・C#など主要言語に対応しており、リファクタリングが必要な箇所を自動で特定してくれます。

  • コードの臭い(Code Smell)の検出と改善提案
  • 重複コードの特定
  • 不要な複雑度の警告
  • セキュリティホットスポットの可視化

SonarLintの指摘事項に従ってリファクタリングを進めることで、コードレビューで指摘される問題を事前に解消できます。

無料で利用でき、SonarQubeとの連携も可能です。チーム全体のコード品質基準を統一する際に特に有効です。

Error Lens(エラー可視化)

Error Lensは、エラーや警告メッセージをコードの行末にインライン表示する拡張機能です。

通常のVSCodeでは、エラー内容を確認するためにホバーするか「問題」パネルを開く必要がありますが、Error Lensを使うとエラーメッセージがコード上に直接表示されます。

  • エラー・警告・情報をそれぞれ色分けして表示
  • Quick Fixが利用可能な箇所がすぐにわかる
  • リファクタリングが必要な箇所を視覚的に把握できる

SonarLintと組み合わせることで、コードの問題点を一目で把握しながらリファクタリングを進める環境が整います。

導入は無料で、設定から表示する診断レベルや色をカスタマイズすることも可能です。

実務で役立つVSCodeリファクタリング活用シーン

実務で役立つVSCodeリファクタリング活用シーン

VSCodeのリファクタリング機能は、日常の開発業務のさまざまな場面で活用できます。

特に効果的な3つの活用シーンを具体的に解説します。

コードレビュー指摘への素早い対応

プルリクエストのコードレビューで「この変数名をより具体的にしてほしい」「この処理を関数として切り出して」といった指摘を受けることは頻繁にあります。

VSCodeのリファクタリング機能を活用すれば、こうした指摘への対応時間を大幅に短縮できます。

  • 変数名の変更指摘:F2キーで即座にプロジェクト全体の名前を変更。手動で探して直す時間が不要。
  • 関数化の指摘:対象コードを選択してExtract Functionを実行(対応している場合)。新しい関数名を入力するだけで完了。
  • 不要なインポートの指摘:Organize Importsを実行するだけで未使用インポートが自動削除される(対応している場合)。

これらの作業を手動で行うと1件あたり数分かかる場合がありますが、VSCodeのリファクタリング機能を使えば短時間で対応しやすくなります

レビュー指摘が多いプロジェクトでは特に恩恵が大きく、修正→再レビューのサイクルを短縮できます。

レガシーコードの段階的な改善

長年にわたって改修が続いたレガシーコードは、一度に大きくリファクタリングしようとするとバグを生む危険があります。

VSCodeのリファクタリング機能を活用した段階的なアプローチが安全かつ効果的です。

  1. Step1:まずRename SymbolでわかりにくいシングルレターやAbbreviationの変数名を修正する
  2. Step2:長い関数をExtract Functionで小さな関数に分割し、各関数の責務を明確にする(対応している場合)
  3. Step3:複雑な条件式をExtract Variableで可読性の高い変数に置き換える(対応している場合)
  4. Step4:Organize Importsで未使用インポートを整理し、依存関係を最小化する(対応している場合)

この手順で段階的に進めることで、テストが通る状態を保ちながらコードを改善できます。

各ステップをコミット単位で管理することで、問題が発生した際の切り戻しも容易になります。

チーム開発での命名規則統一

チーム開発では、メンバーによって命名規則がバラバラになりがちです。

例えば「getUserData」「fetchUserInfo」「loadUser」のように同じ意味の処理に異なる名前が付いていると、コードの理解に時間がかかります。

VSCodeのRename Symbolを使えば、プロジェクト全体の命名を統一する作業を安全かつ効率的に実行できます。

  • チームで命名規則を合意してドキュメント化する
  • 既存コードの不統一な命名をRename Symbolで一括修正する
  • EditorConfigやESLintルールと組み合わせて新規コードの命名も統一する

Rename Symbolのプレビュー機能を使えば、変更前に全ファイルへの影響を確認できるため、チーム作業でも安心して実行できます。

参考:重宝しているVSCodeの2つの機能

まとめ

まとめ

本記事では、VSCodeのリファクタリング機能について、ショートカット一覧から実践的な使い方、言語別の対応状況、トラブル対処法、おすすめ拡張機能まで幅広く解説しました。

  • F2キー(Rename Symbol)は最もよく使うリファクタリング機能。プレビュー付きで安全に全ファイルの名前を一括変更できる(対応している場合)。
  • Extract Function / Extract Variableは右クリック →「リファクタリング…」またはコードアクションから実行でき、選択したコードを整理できる(対応している場合)。
  • JavaScript/TypeScriptが最も機能が充実しており、Python・Java・C#は専用拡張機能を追加することでより活用しやすい。
  • リファクタリングが動作しない場合は、言語サーバーの起動待ち・ファイル保存・言語モードの確認から試みると解決しやすい。
  • Abracadabra・SonarLint・Error Lensの拡張機能を追加することで、標準機能を超えた高度なリファクタリング環境を構築できる。

まずは日常業務でよく使うF2キーとCtrl + .(Cmd + .)のQuick Fixを活用することから始めてみてください。

VSCodeのリファクタリング機能を習慣的に使うことで、コードの品質を維持しながら開発スピードを着実に向上させることができます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次