コードリファクタリング
リファクタリング(英語)とは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。 リファクタリングは、コードを堅牢な dry(英語) 状態に保ち、保守しやすくできます。 WebStorm は、影響を受けるコード参照を自動で追跡し修正する、 さまざまなコードリファクタリングを提供しています。
ゴールやワークフローの違いがあっても、すべての WebStorm リファクタリングにはいくつかの必須ステップが必要です。 以下は、コードのリファクタリング時に実行する主な手順の概要です。
リファクタリングを実行
リファクタリングするアイテムを選択します。 エディターで プロジェクト ツールウィンドウまたは式 / シンボルでファイル / フォルダーを選択できます。
選択可能なリファクタリングのリストを開くには、 Ctrl+Alt+Shift+T を押します。

または、特定のリファクタリング用のキーボードショートカットを使用することもできます。
リファクタリングを元に戻す必要がある場合は、 Ctrl+Z を押します。
提案されたリファクタリングの変更をプレビューする
一部のリファクタリングでは、WebStorm で変更を適用する前にプレビューできます。
リファクタリングプレビュー ダイアログで プレビュー をクリックすると、潜在的な変更 (リファクタリングが実行される使用箇所のリスト) が表示されます。

開いた 検索ツールウィンドウで、行われる変更を確認します。 Delete を除外したり、不要と思われる Ctrl+X の変更を削除したりできます。

リファクタリング実行 をクリックして、変更を続行します。
競合の解決
WebStorm がリファクタリングで問題に遭遇した場合、衝突のリストとその簡単な説明が表示されるダイアログを開きます。

問題を無視して続行するには、 強制的にリファクタリング をクリックします。
検索ウィンドウで開く をクリックして、 検索 ツールウィンドウの競合エントリを開き、さらに処理します。
検索 ツールウィンドウで、 リファクタリング を選択してリファクタリングを適用するか、 キャンセル をクリックしてエディターに戻ることができます。

リファクタリング設定を構成する
設定 ダイアログ(Ctrl+Alt+S )で、 を選択します。
コード編集 ページの リファクタリング セクションでリファクタリングオプションを調整し、 OK をクリックします。
ファイルとフォルダーのコピー、名前の変更、移動
これらのリファクタリングを使用すると、同じ名前または新しいものでファイルとフォルダーのコピーを作成し、同じ親フォルダーまたは新しいフォルダーに保存したり、ファイルやフォルダーを別の場所に移動したりすることができます。
ファイルとフォルダーのリファクタリングは、あらゆる種類のアプリケーションで利用できます。
ファイルまたはフォルダーをコピーする
プロジェクト ツールウィンドウでコピーするファイルまたはフォルダーを選択して F5 を押すか、コンテキストメニューまたはメインメニューから を選択します。
または、コピーするファイルまたはフォルダーを プロジェクト ツールウィンドウで選択し、 Ctrl キーを押したまま新しいフォルダーにドラッグします。
表示されるダイアログで、ファイルまたはフォルダーの新しい名前と、該当する場合は新しい親フォルダーを指定します。
コピー後にファイル、ディレクトリ、パッケージを自動的に開くには、 コピーをエディターで開く チェックボックスを選択します。
ファイルまたはフォルダーの名前を変更する
プロジェクト ツールウィンドウで、名前を変更するファイルまたはフォルダーを選択してコンテキストメニューから を選択するか、 Shift+F6 を押します。
表示されるダイアログで、ファイルまたはフォルダーの新しい名前を入力します。

コメント、文字列、テキスト(ファイル用)のファイルまたはフォルダーへの参照を更新するには、対応するチェックボックスを選択します。
WebStorm は、ファイル自体の名前変更に加えて、その名前の使用箇所も検索できます。 見つかった場合、ファイル名に加えた変更は、それらの使用箇所にも適用されます。
使用箇所は、有効化または無効化できるオプションに対応するカテゴリにグループ化されます。
選択したオプションに関係なく、検索範囲(名前の出現箇所を検索する場所)は常に現在のエンティティ(ファイル、クラスなど)と現在のエンティティが依存するエンティティに制限されます。
リファクタリング をクリックし、上の 推奨される変更のプレビュー、調整、適用で説明したように、 検索 ツールウィンドウの専用タブで推奨される変更を調べます。 期待どおりの結果が得られたら、 リファクタリング実行 をクリックしてください。
ファイルまたはフォルダーを移動する
プロジェクト ツールウィンドウで、移動するファイルまたはフォルダーを選択してコンテキストメニューから を選択するか、 F6 を押します。
開いたダイアログで、新しい親フォルダーを指定します。 既存のフォルダーを選択するか、作成する新しいフォルダーの名前を入力します。
移動したファイルまたはフォルダーへの参照を更新するには、 参照を検索 チェックボックスを選択します。
ファイルを安全に削除する (安全な削除)
ファイルの単純な削除(コンテキストメニューからの Delete または )とは異なり、このリファクタリングは、ソースコードで参照されているファイルを削除しないようにします。 WebStorm は削除対象ファイルの用途を探し、 検出された使用箇所 ダイアログに表示します。
プロジェクト ツールウィンドウで、削除するファイルを選択してコンテキストメニューから を選択するか、 Alt+Delete を押します。
開いている 安全な削除 ダイアログで、対応するチェックボックスを選択して、コメントや文字列内のファイルの使用状況、およびファイル内でのテキストの出現状況を探します。
用途が検出された場合、WebStorm はそれらを 検出された使用箇所 ダイアログにリストします。
見つかった使用箇所を表示せずにファイルを削除するには、 強制的に削除 をクリックします。
リファクタリングを停止するには、 キャンセル をクリックします。
潜在的な競合を調べるには、 使用箇所の表示 をクリックします。 WebStorm は、 検索 ツールウィンドウの専用タブを開き、用途がリストされます。 上記の 推奨される変更のプレビュー、調整、適用に従って、探索し、潜在的な競合を分析し、コードを更新します。
WebStorm でサポートされているリファクタリング
コピー | プロジェクト ツールウィンドウから:
| 任意のコンテキスト | |
ファイルを移動する フォルダーを移動 | プロジェクト ツールウィンドウから:
| 任意のコンテキスト | |
シンボル移動 | エディターから:
|
| |
クラスメンバーをプルアップする | エディターから: |
| |
ファイル名の変更 フォルダーの名前を変更する | プロジェクト ツールウィンドウから:
|
| |
シンボルの名前変更 | エディターから:
|
| |
安全な削除 | プロジェクト ツールウィンドウから:
|
| |
パラメーターの導入 | エディターから:
| JavaScript TypeScript | |
フィールドの導入 | エディターから:
| JavaScript TypeScript | |
メソッドの抽出 | エディターから: Ctrl+Alt+M | JavaScript TypeScript | |
変数の導入 | エディターから: Ctrl+Alt+V | JavaScript TypeScript スタイルシート | |
定数の導入 | エディターから: Ctrl+Alt+C | JavaScript TypeScript | |
スーパークラスの抽出 | エディターから: | JavaScript TypeScript | |
React コンポーネントを抽出 | エディターから: | React | |
クラスコンポーネントに変換 | エディターから: | React | |
関数コンポーネントに変換 | エディターから: | React | |
Vue コンポーネントの抽出 | エディターから: | JavaScript | |
型エイリアスの抽出 | エディターから: | TypeScript | |
インクルードファイルの抽出 | エディターで選択したコードブロックから: | HTML、CSS | |
ルールセットの抽出 | エディターから: Alt+Enter を押して、リストから ルールセットの抽出 を選択します。 | スタイルシート | |
インライン化 | Ctrl+Alt+N | JavaScript TypeScript | |
シグネチャーの変更 | リファクタリング | シグネチャーの変更 Ctrl+F6 | JavaScript TypeScript | |
デフォルトのエクスポートを名前付きエクスポートに変換する | エディターから: Alt+Enter - デフォルトのエクスポートを名前付きエクスポートに変換する | JavaScript TypeScript | |
名前付きエクスポートをデフォルトエクスポートに変換する | エディターから: Alt+Enter - 名前付きエクスポートをデフォルトに変換する | JavaScript TypeScript |