リファクタリング

ソースコードのリファクタリングは、実行時の動作を変更することなくコードを再構築することで、プロジェクトの品質と保守性を向上させることができます。Visual Studio Code は、メソッドの抽出 (Extract Method) や 変数の抽出 (Extract Variable) といったリファクタリング操作（リファクタリング）をサポートしており、エディター内から直接コードベースを改善できます。

例えば、コードの重複（保守の悩みの種）を避けるために一般的に使われるリファクタリングとして、「メソッドの抽出」があります。これは、ソースコードを選択して独自の共有メソッドに切り出すことで、そのコードを他の場所で再利用できるようにするものです。

リファクタリングは言語サービスによって提供されます。VS Code は TypeScript 言語サービスを通じて、TypeScript および JavaScript のリファクタリングを組み込みでサポートしています。他のプログラミング言語のリファクタリングサポートは、言語サービスを提供する VS Code 拡張機能 によって有効になります。

UI 要素とリファクタリング用の VS Code コマンドは、どの言語でも共通です。この記事では、TypeScript 言語サービスを使用した VS Code でのリファクタリングサポートについて解説します。

Code Actions = クイックフィックスとリファクタリング

VS Code では、Code Actions を使用して、リファクタリングと（赤の波線で強調表示される）検出された問題に対するクイックフィックスの両方を提供できます。カーソルが波線の上にあるか、テキスト範囲が選択されている場合、VS Code はエディターに電球アイコンを表示し、Code Action が利用可能であることを示します。電球アイコンを選択するか、クイックフィックス (Quick Fix) コマンド ⌘. (Windows, Linux Ctrl+.) を使用すると、クイックフィックスとリファクタリングのコントロールが表示されます。

クイックフィックスを含めずリファクタリングのみを表示したい場合は、リファクタリング (Refactor) コマンド (⌃⇧R (Windows, Linux Ctrl+Shift+R)) を使用できます。

注: editor.lightbulb.enable 設定を使用して、エディター内の Code Action 電球を完全に無効にできます。その場合でも、クイックフィックスコマンドおよびキーボードショートカット ⌘. (Windows, Linux Ctrl+.) からクイックフィックスを開くことは可能です。

保存時の Code Actions

editor.codeActionsOnSave VS Codeで開く VS Code Insidersで開く 設定を使用すると、インポートの整理など、ファイルを保存したときに自動的に適用される Code Actions を設定できます。ワークスペースのファイルとアクティブな拡張機能に基づいて、IntelliSense が利用可能な Code Actions のリストを提供します。

editor.codeActionsOnSave VS Codeで開く VS Code Insidersで開く に対して、1つ以上の Code Actions を構成できます。Code Actions はリストされた順序で実行されます。

次の例は、保存時に複数の Code Actions を設定する方法を示しています。

// On explicit save, run sortImports source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

各 Code Action に対して、次の値がサポートされています。

• explicit（デフォルト）: 明示的に保存されたときに Code Actions をトリガーします。
• always: 明示的に保存されたとき、およびウィンドウやフォーカスの変更による自動保存時に Code Actions をトリガーします。
• never: 保存時に Code Actions をトリガーしません。

リファクタリングアクション

メソッドの抽出 (Extract Method)

抽出したいソースコードを選択し、左端の余白（ガター）にある電球を選択するか、(⌘. (Windows, Linux Ctrl+.)) を押して利用可能なリファクタリングを表示します。ソースコードの断片は、新しいメソッド、またはさまざまなスコープの新しい関数に抽出できます。抽出リファクタリング中、意味のある名前を付けるよう求められます。

変数の抽出 (Extract Variable)

TypeScript 言語サービスは、現在選択されている式に対して新しいローカル変数を作成する 「定数への抽出 (Extract to const)」 リファクタリングを提供しています。

クラスを操作している場合は、値を新しいプロパティに抽出することもできます。

シンボルの名前変更 (Rename symbol)

名前変更はソースコードのリファクタリングに関連する一般的な操作であり、VS Code には個別の 「シンボルの名前変更 (Rename Symbol)」 コマンド (F2) が用意されています。一部の言語では、ファイル間でのシンボルの名前変更をサポートしています。F2 を押し、希望する新しい名前を入力して Enter キーを押します。すべてのファイル内のそのシンボルのすべてのインスタンスが名前変更されます。

リファクタリングのプレビュー

リファクタリングを適用すると、変更が直接コードに実装されます。「リファクタリングのプレビュー (Refactor Preview)」 パネルでは、リファクタリング操作によって適用される変更内容をプレビューできます。

「リファクタリングのプレビュー」 パネルを開くには、Code Actions コントロールを開き、リファクタリング項目にカーソルを合わせてから、⌘Enter (Windows, Linux Ctrl+Enter) を押します。

「リファクタリングのプレビュー」 パネルで変更内容を選択すると、リファクタリング操作による変更結果の差分ビューを表示できます。

「適用 (Accept)」 または 「破棄 (Discard)」 コントロールを使用して、提案されたリファクタリングの変更を適用またはキャンセルします。

オプションとして、「リファクタリングのプレビュー」パネルで提案された変更の一部を選択解除することで、部分的にリファクタリングを適用することもできます。

Code Actions のキーボードショートカット

editor.action.codeAction コマンドを使用すると、特定の Code Actions に対してキーボードショートカットを設定できます。例えば、次のキーボードショートカットは 「関数の抽出 (Extract function)」 リファクタリング Code Action をトリガーします。

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

Code Action の種類 (kinds) は、拡張機能が強化された CodeActionProvider API を使用して指定します。種類は階層化されており、例えば "kind": "refactor" はすべてのリファクタリング Code Actions を表示しますが、"kind": "refactor.extract.function" は 「関数の抽出」 リファクタリングのみを表示します。

上記のキーボードショートカットを使用した場合、"refactor.extract.function" の Code Action が1つだけ利用可能であれば、自動的に適用されます。複数の 「関数の抽出」 Code Actions が利用可能な場合は、VS Code がコンテキストメニューを表示して選択を促します。

apply 引数を使用することで、Code Actions がどのように、いつ自動的に適用されるかを制御することもできます。

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function",
    "apply": "first"
  }
}

apply で有効な値

• first - 利用可能な最初の Code Action を常に自動的に適用します。
• ifSingle - （デフォルト）Code Action が1つだけ利用可能な場合に自動的に適用します。それ以外の場合はコンテキストメニューを表示します。
• never - Code Action が1つしか利用できない場合でも、常にコンテキストメニューを表示します。

Code Action のキーボードショートカットで "preferred": true を設定すると、推奨されるクイックフィックスとリファクタリングのみが表示されます。推奨されるクイックフィックスは根本的なエラーに対処するものであり、推奨されるリファクタリングは最も一般的な選択肢です。例えば、複数の refactor.extract.constant リファクタリングが存在し、それぞれがファイル内の異なるスコープに抽出する場合、推奨される refactor.extract.constant リファクタリングは、ローカル変数に抽出するものです。

このキーボードショートカットは "preferred": true を使用して、選択したソースコードを常にローカルスコープの定数に抽出するリファクタリングを作成します。

{
  "key": "shift+ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true,
    "apply": "ifSingle"
  }
}

リファクタリング対応の拡張機能

VS Code マーケットプレイスで、リファクタリングをサポートする拡張機能を見つけることができます。拡張機能ビュー (⇧⌘X (Windows, Linux Ctrl+Shift+X)) を開き、検索ボックスに「refactor」と入力します。インストール数や評価で並び替えて、人気の拡張機能を確認できます。

ヒント: 上記の拡張機能は動的にクエリされます。拡張機能のタイルを選択して説明やレビューを読み、自分にとって最適な拡張機能を決定してください。

次のステップ

• 入門ビデオ - コード編集 - コード編集機能に関する入門ビデオをご覧ください。
• コードナビゲーション - VS Code を使用してソースコード内を素早く移動する方法。
• デバッグ - VS Code でのデバッグについて学びます。

よくある質問

コードにエラーがあるのに電球が表示されないのはなぜですか？

電球（Code Actions）は、カーソルがエラーを示しているテキスト上にある場合にのみ表示されます。テキストにカーソルを合わせるとエラーの説明が表示されますが、クイックフィックスやリファクタリングのための電球を表示するには、カーソルを移動するかテキストを選択する必要があります。