コードリファクタリング
リファクタリング(英語)とは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した 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 |
関連ページ:

検索ツールウィンドウ
検索ツールウィンドウには、次の検索結果が表示されます。パス内検索 / 置換、使用箇所の検索、リファクタリングプレビュー、各検索の結果は、新規タブで開くダイアログの設定に応じて、別のタブに表示されるか、現在のタブの内容を置き換えます。デフォルトでは、ウィンドウは画面の下部に表示されます。ツールバーには、一連のボタン、結果ペイン、パス内置換およびリファクタリングプレビュー操作用の追加ボタンがあります。ツールバーボタン:オプションこのボタンをクリックして、シンボルに対応する使用箇所の検索ダイアログの...

JavaScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング:WebStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScript トップレベルシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、コン...

TypeScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。移動リファクタリング:WebStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、TypeScript の最上位シンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、メインメニューまた...

スタイルシート
WebStorm を使用すると、Sass、Less、SCSS、Stylus など、CSS およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。始める前に:設定で CSS プラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに CSS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。コ...

React
React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。始める前に:お使いのコンピューターに Node.js がインストールされていることを確認してください。React、JavaScript Debugge...

HTML
WebStorm は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。HTML ツールプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっている HTML ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。を押して設定を...