リファクタリング

ソースコードのリファクタリングは、ランタイムの動作を変更せずにコードを再構築することで、プロジェクトの品質と保守性を向上させることができます。Visual Studio Code は、エディター内からコードベースを改善するために、メソッドの抽出や変数の抽出などのリファクタリング操作（リファクタリング）をサポートしています。

例えば、コードの重複（保守性の問題）を避けるためによく使われるリファクタリングは、メソッドの抽出リファクタリングです。これは、ソースコードを選択し、それを独自の共有メソッドに抽出することで、コードを他の場所で再利用できるようにします。

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

リファクタリングのための UI 要素と VS Code コマンドは、異なる言語間で同じです。この記事では、TypeScript 言語サービスを使った VS Code のリファクタリングサポートについて説明します。

コードアクション = クイックフィックスとリファクタリング

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

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

注: `editor.lightbulb.enable` 設定で、エディターのコードアクションの電球表示を完全に無効にできます。**クイックフィックス**コマンドと ⌘. (Windows、Linux では Ctrl+.) キーボードショートカットを使用して、クイックフィックスを開くことは依然可能です。

保存時のコードアクション

editor.codeActionsOnSave 設定を使用すると、ファイルを保存したときに自動的に適用される一連のコードアクション（例えば、インポートの整理など）を設定できます。ワークスペースファイルと有効な拡張機能に基づいて、IntelliSense が利用可能なコードアクションのリストを提供します。

editor.codeActionsOnSave には、1つまたは複数のコードアクションを設定できます。コードアクションは、リストされた順序で実行されます。

次の例は、保存時に複数のコードアクションを設定する方法を示しています。

// 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",
},

各コードアクションでサポートされる値は次のとおりです。

• explicit (デフォルト): 明示的に保存されたときにコードアクションをトリガーします。
• always: 明示的に保存されたとき、およびウィンドウまたはフォーカスの変更による自動保存時にコードアクションをトリガーします。
• never: 保存時にコードアクションをトリガーしません。

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

メソッドの抽出

抽出したいソースコードを選択し、ガターの電球アイコンを選択するか、(⌘. (Windows、Linux では Ctrl+.)) を押して、利用可能なリファクタリングを表示します。ソースコードの断片は、新しいメソッドとして、または様々な異なるスコープの新しい関数として抽出できます。抽出リファクタリング中に、意味のある名前を提供するよう求められます。

変数の抽出

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

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

シンボルの名前変更

名前変更はソースコードのリファクタリングに関連する一般的な操作であり、VS Code には個別の**シンボルの名前変更**コマンド（F2）があります。一部の言語は、ファイル全体でシンボルの名前変更をサポートしています。F2 を押し、新しい名前を入力して Enter を押します。すべてのファイル内のシンボルのすべてのインスタンスの名前が変更されます。

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

リファクタリングを適用すると、変更がコードに直接反映されます。**リファクタリングプレビュー**パネルで、リファクタリング操作によって適用される変更をプレビューできます。

**リファクタリングプレビュー**パネルを開くには、コードアクションコントロールを開き、リファクタリングにカーソルを合わせ、⌘Enter (Windows、Linux では Ctrl+Enter) を押します。

**リファクタリングプレビュー**パネルで任意の変更を選択すると、リファクタリング操作によって生じる変更の差分表示を確認できます。

提案されたリファクタリングの変更を適用またはキャンセルするには、**承諾**または**破棄**コントロールを使用します。

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

コードアクションのキーボードショートカット

`editor.action.codeAction` コマンドを使用すると、特定のコードアクションのキーボードショートカットを設定できます。例えば、このキーボードショートカットは、**関数の抽出**リファクタリングコードアクションをトリガーします。

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

コードアクションの種類は、拡張機能によって強化された `CodeActionProvider` API を使用して指定されます。種類は階層的であり、`“kind”: “refactor”` はすべてのリファクタリングコードアクションを表示し、`“kind”: “refactor.extract.function”` は**関数の抽出**リファクタリングのみを表示します。

上記のキーボードショートカットを使用すると、`“refactor.extract.function”` コードアクションが 1 つだけ利用可能な場合は、それが自動的に適用されます。複数の**関数の抽出**コードアクションが利用可能な場合、VS Code はそれらを選択するためのコンテキストメニューを表示します。

`apply` 引数を使用すると、コードアクションが自動的に適用される方法とタイミングを制御できます。

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

`apply` の有効な値

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

コードアクションのキーボードショートカットが `“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 でのデバッグについて学びます。

よくある質問

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

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