TypeScriptのリファクタリング

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

Visual Studio Codeは、TypeScript言語サービスを通じてTypeScriptのリファクタリングを組み込みでサポートしており、このトピックではTypeScript言語サービスによるリファクタリングのサポートについて説明します。

名前の変更

最も簡単なリファクタリングの1つは、メソッドまたは変数の名前変更です。TypeScriptプロジェクト全体でカーソル下のシンボルの名前を変更するには、F2を押します。

Renaming a method

リファクタリング

利用可能なTypeScriptのリファクタリングを表示するには、ソースコードの領域にカーソルを置き、右クリックしてエディターのコンテキストメニューを表示し、リファクタリングを選択するか、直接⌃⇧R (Windows, Linux Ctrl+Shift+R)を押します。

TypeScript refactoring

リファクタリングおよび個々のリファクタリングのキーボードショートカットの設定方法については、「リファクタリング」を参照してください。

利用可能なTypeScriptのリファクタリングには以下が含まれます。

メソッドまたは関数への抽出 - 選択したステートメントまたは式を、ファイル内の新しいメソッドまたは新しい関数として抽出します。

メソッドの抽出または関数の抽出リファクタリングを選択した後、抽出されたメソッド/関数の名前を入力します。
定数への抽出 - 選択した式をファイル内の新しい定数として抽出します。
インターフェースまたは型エイリアスへの型抽出 - 選択した複雑な型を、インターフェースまたは型エイリアスのいずれかとして抽出します。
新しいファイルへの移動 - ファイルのトップレベルスコープにある1つまたは複数のクラス、関数、定数、またはインターフェースを新しいファイルに移動します。新しいファイル名は、選択したシンボルの名前から推測されます。
名前付きインポートと名前空間インポート間の変換 - 名前付きインポート (import { Name } from './foo') と名前空間インポート (import * as foo from './foo') の間で変換します。
デフォルトエクスポートと名前付きエクスポート間の変換 - export default の使用から名前付きエクスポート (export const Foo = ...) へと変換します。
パラメーターを分割代入オブジェクトに変換 - 長い引数リストを取る関数を、単一の引数オブジェクトを取るように書き換えます。
ゲッターとセッターの生成 - 選択したクラスプロパティに対してゲッターとセッターを生成することで、カプセル化します。
関数の戻り値の型の推論 - 関数に明示的な戻り値の型アノテーションを追加します。
アロー関数からの波括弧の追加/削除 - 単一行のアロー関数を複数行に、またはその逆の変換を行います。

クイックフィックス

クイックフィックスは、単純なコーディングエラーに対処するために提案される編集です。クイックフィックスの例には以下が含まれます。

メンバーアクセスに不足している this を追加します。
スペルミスのプロパティ名を修正します。
到達不能なコードまたは未使用のインポートの削除
宣言

TypeScriptのエラーにカーソルを移動すると、VS Codeはクイックフィックスが利用可能であることを示す電球を表示します。電球をクリックするか、⌘. (Windows, Linux Ctrl+.) を押すと、利用可能なクイックフィックスとリファクタリングのリストが表示されます。

さらに、「コードアクションウィジェット: 近くのクイックフィックスを含める (editor.codeActionWidget.includeNearbyQuickFixes)」はデフォルトで有効になっている設定であり、その行のどこにカーソルがあっても、⌘. (Windows, Linux Ctrl+.) (コマンドID editor.action.quickFix) から行内の最も近いクイックフィックスをアクティブ化します。

このコマンドは、クイックフィックスでリファクタリングまたは修正されるソースコードをハイライト表示します。通常のコードアクションと修正以外のリファクタリングは、カーソル位置で引き続きアクティブ化できます。

未使用の変数と到達不能なコード

未使用のTypeScriptコード (例えば、常に真である if ステートメントの else ブロックや参照されていないインポートなど) は、エディターでフェードアウトして表示されます。

Unreachable source code faded out

この未使用のコードは、コードの上にカーソルを置き、クイックフィックスコマンド (⌘. (Windows, Linux Ctrl+.)) をトリガーするか、電球をクリックすることで、すぐに削除できます。

未使用コードのフェードアウトを無効にするには、"editor.showUnused" を false に設定します。TypeScriptのみで未使用コードのフェードアウトを無効にすることもできます。

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

インポートの整理

「インポートの整理」ソースコードアクションは、TypeScriptファイル内のインポートをソートし、未使用のインポートを削除します。

インポートの整理は、ソースアクションコンテキストメニューから、または⇧⌥O (Windows, Linux Shift+Alt+O) キーボードショートカットを使用して実行できます。

TypeScriptファイルを保存する際に、以下の設定を行うことでインポートを自動的に整理することもできます。

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

ファイル移動時のインポートの更新

TypeScriptプロジェクト内の他のファイルによってインポートされているファイルを移動または名前変更すると、VS Codeは、移動されたファイルを参照するすべてのインポートパスを自動的に更新できます。

typescript.updateImportsOnFileMove.enabled 設定がこの動作を制御します。有効な設定値は次のとおりです。

"prompt" - デフォルトです。ファイル移動ごとにパスを更新するかどうかを尋ねます。
"always" - 常にパスを自動的に更新します。
"never" - パスを自動的に更新せず、プロンプトも表示しません。

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

editor.codeActionsOnSave 設定を使用すると、ファイルを保存する際に実行されるコードアクションのセットを構成できます。例えば、以下の設定を行うことで、保存時にインポートの整理を有効にできます。

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

現在、以下の列挙型がサポートされています。

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

editor.codeActionsOnSave を、実行するコードアクションの配列として設定することもできます。

ソースアクションには以下のようなものがあります。

"organizeImports" - 保存時にインポートの整理を有効にします。
"fixAll" - 保存時の自動修正は、(ESLintを含むすべてのプロバイダーに対して) 1回のラウンドですべての可能な修正を計算します。
"fixAll.eslint" - ESLintのみ自動修正します。
"addMissingImports" - 保存時に不足しているすべてのインポートを追加します。

詳細については、「TypeScript」を参照してください。

コードの提案

VS Codeは、Promiseに対する .then 呼び出しの連鎖を async および await を使用するように変換するなど、一般的なコードの簡素化を自動的に提案します。

提案を無効にするには、"typescript.suggestionActions.enabled" を false に設定します。

次のステップ

さらに読む

TypeScriptの編集 - VS CodeのTypeScript向け編集機能について学びます。
TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。

07/09/2025