TypeScriptのリファクタリング

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

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

名前の変更

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

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 = ...）への変換を行います。
引数を分割代入オブジェクトに変換 - 長い引数リストを取る関数を、単一の引数オブジェクトを取るように書き換えます。
getおよびsetアクセサーの生成 - 選択したクラスプロパティに対してゲッターとセッターを生成してカプセル化します。
関数の戻り値の型を推論 - 関数に明示的な戻り値の型アノテーションを追加します。
アロー関数に中括弧を追加/削除 - 1行のアロー関数を複数行に変換したり、元に戻したりします。

クイックフィックス

クイックフィックスは、簡単なコーディングエラーを修正するための提案される編集です。クイックフィックスの例には、次のものがあります。

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

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

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

このコマンドは、リファクタリングまたはクイック修正で修正されるソースコードを強調表示します。通常のコードアクションおよび非修正リファクタリングは、カーソル位置で引き続きアクティブにできます。

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

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

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は移動されたファイルを参照するすべてのインポートパスを自動的に更新できます。

js/ts.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 を含むすべてのプロバイダー）。
`"fixAll.eslint"` - ESLint のみを自動修正します。
`"addMissingImports"` - 保存時に不足しているすべてのインポートを追加します。

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

コード候補

VS Code は、Promise の `.then` 呼び出しのチェーンを `async` および `await` を使用するように変換するなど、いくつかの一般的なコードの簡略化を自動的に提案します。

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

次のステップ

詳細については、以下をお読みください。

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

5/28/2026