WebStorm 2019.2ヘルプ

コードのリファクタリング

リファクタリング(英語)は、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードをしっかりとしたdry(英語)に保ち、保守を容易にします。WebStormは、影響を受けるコード参照を自動的に追跡して修正する、さまざまなコードリファクタリングを提供しています。

ソース・コードのリファクタリング: 主なステップ

ゴールとワークフローの違いにもかかわらず、すべてのWebStormリファクタリングにはいくつかの必須ステップが必要です。以下は、コードのリファクタリング時に実行する主な手順の概要です。

リファクタリングするアイテムの選択

  • プロジェクトツールウィンドウで、移動、コピー、または名前を変更するファイルまたはフォルダーを選択します。

  • エディターで、リファクタリングする式またはシンボルを選択します。

    ws_refactoring_general_select_expression.png

リファクタリングの呼び出し

  • メインメニューまたは選択範囲のコンテキストメニューから、リファクタリング | <必須リファクタリング>を選択します。

  • 専用のショートカットを押します (下記の利用可能なリファクタリングの表を参照 )。

  • リファクタリングリストを開き(リファクタリング | リファクタリングを選択するか Ctrl+Shift+Alt+Tを押します)、必要なリファクタリングを選択します。

    ws_invoke_refactoring.png

推奨される変更のプレビュー、調整、適用

一部のリファクタリングでは、WebStormは変更をプレビューしてから適用するオプションを提供します。潜在的な変更をプレビューして必要な調整を行うには、リファクタリング固有のダイアログでプレビューをクリックします。WebStormは検索ツール・ウィンドウに専用のタブを開き、変更を行う予定です。

ws_ts_change_signature_preview

必要に応じて、リファクタリング中に一部の変更を除外することができます。リファクタリング後に競合が予想される場合、WebStormは遭遇した問題の簡単な説明を含むダイアログを表示します。

リファクタリングからエントリを除外するには

リストで選択し、Deleteを押します。

潜在的な競合を避けるため

  • 継続ボタンをクリックして競合を無視してください。その結果、リファクタリングが実行されますが、誤った結果につながる可能性があります。

  • ビューで表示ボタンをクリックして競合をプレビューします。WebStormは、検索ツール・ウィンドウ競合タブにある競合するすべてのエントリを表示し、問題のあるコード行に移動し、必要な修正を加えることができます。

  • リファクタリングをキャンセルしてエディターに戻ります。

変更を適用するには

提案された結果に満足したら、リファクタリング実行をクリックしてください。

ファイルとフォルダーのコピー、名前変更、移動

これらのリファクタリングを使用すると、同じ名前または新しいものでファイルとフォルダーのコピーを作成し、同じ親フォルダーまたは新しいフォルダーに保存したり、ファイルやフォルダーを別の場所に移動したりすることができます。

ファイルとフォルダーのリファクタリングは、あらゆる種類のアプリケーションで利用できます。

ファイルまたはフォルダーをコピーするには

  1. プロジェクトツールウィンドウでコピーするファイルまたはフォルダーを選択して F5 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | コピーを選択します。

    または、コピーするファイルまたはフォルダーをプロジェクトツールウィンドウで選択し、Ctrl キーを押したまま新しいフォルダーにドラッグします。

  2. 表示されるダイアログで、ファイルまたはフォルダーの新しい名前と、該当する場合は新しい親フォルダーを指定します。

ファイルまたはフォルダーの名前を変更するには

  1. プロジェクトツールウィンドウで、名前を変更するファイルまたはフォルダーを選択してコンテキストメニューからリファクタリング | 名前の変更を選択するか、Shift+F6を押します。

  2. 表示されるダイアログで、ファイルまたはフォルダーの新しい名前を入力します。

  3. コメント、文字列、およびテキスト(ファイル用)のファイルまたはフォルダーへの参照を更新するには、対応するチェックボックスを選択します。

  4. リファクタリングをクリックし、上の推奨される変更のプレビュー、調整、適用で説明したように、検索ツールウィンドウの専用タブで推奨される変更を調べます。期待どおりの結果が得られたら、リファクタリング実行をクリックしてください。

ファイルまたはフォルダーを移動するには

  1. プロジェクトツールウィンドウで、移動するファイルまたはフォルダーを選択してコンテキストメニューからリファクタリング | 移動を選択するか、F6を押します。

  2. 開いたダイアログで、新しい親フォルダーを指定します。既存のフォルダーを選択するか、作成する新しいフォルダーの名前を入力します。

  3. 移動したファイルまたはフォルダーへの参照を更新するには、参照の検索チェックボックスを選択します。

ファイルを安全に削除する (安全な削除)

ファイルの単純な削除(コンテキストメニューからのDelete または削除)とは異なり、このリファクタリングは、ソースコードで参照されているファイルを削除しないようにします。WebStormは削除するファイルの用途を探し、検出された使用箇所ダイアログに表示します。

ファイルに安全な削除を適用するには

  1. プロジェクトツールウィンドウで、削除するファイルを選択してコンテキストメニューからリファクタリング | 安全な削除を選択するか、Alt+Deleteを押します。

  2. 開いている安全な削除ダイアログで、対応するチェックボックスを選択して、コメントや文字列内のファイルの使用状況、およびファイル内でのテキストの出現状況を探します。

  3. 用途が検出されると、WebStormは検出された使用箇所ダイアログにリストします。

    • 見つかった使用箇所を表示せずにファイルを削除するには、削除をクリックします。

    • リファクタリングを停止するには、キャンセルをクリックします。

    • 潜在的な競合を調べるには、使用箇所の表示をクリックします。WebStormは、検索ツールウィンドウの専用のタブを開き、用途がリストされます。上記の推奨される変更のプレビュー、調整、適用に従って、探索し、潜在的な競合を分析し、コードを更新します。

WebStormでサポートされているリファクタリング

コピー

プロジェクトツールウィンドウから:
リファクタリング | コピー
F5

任意のコンテキスト

ファイルまたはフォルダーをコピーする

ファイルを移動する
フォルダーを移動する

プロジェクトツールウィンドウから:
リファクタリング | 移動
F6

任意のコンテキスト

ファイルまたはフォルダーの移動

シンボル移動

エディターから:
リファクタリング | 移動
F6

JavaScript
TypeScript

Moving a class, a function, or a variable in JavaScript
Moving a class, a function, or a variable in TypeScript

クラスメンバーをプルアップする

エディターから:
リファクタリング | メンバーのプル・アップ

JavaScript
TypeScript

Moving class members to a supeerclass in JavaScript
Moving class members to a superclass in TypeScript

ファイルの名前を変更
フォルダーの名前を変更する

プロジェクトツールウィンドウから:
リファクタリング | 名前の変更
Shift+F6

JavaScript
TypeScript

ファイルまたはフォルダーの名前を変更する

記号の名前を変更する

エディターから:
リファクタリング | 名前の変更
Shift+F6

JavaScript
TypeScript

JavaScriptでリファクタリングの名前を変更する
Rename refactorings in TypeScript

安全な削除

プロジェクトツールウィンドウから:
リファクタリング | 安全な削除
Alt+Delete

JavaScript
TypeScript

ファイルを安全に削除する

パラメーターの導入

From the editor:
リファクタリング | 抽出 | パラメーター
Ctrl+Alt+P

JavaScript
TypeScript

JavaScriptでのパラメータの抽出
Extracting a parameter in TypeScript

フィールドの導入

エディターから:
リファクタリング | 抽出 | フィールド
Ctrl+Alt+F

JavaScript
TypeScript

JavaScriptでフィールドを抽出する

メソッドの抽出

エディターから:
リファクタリング | 抽出 | メソッド
Ctrl+Alt+M

JavaScript
TypeScript

JavaScriptでの抽出メソッド

変数の導入

エディターから:
リファクタリング | 変数の導入
Ctrl+Alt+V

JavaScript
TypeScript
Style Sheets

JavaScriptで変数を抽出する
TypeScriptの変数を抽出する
スタイルシート内の変数の抽出

スーパークラスの抽出

エディターから:
リファクタリング | 抽出 | スーパークラス

JavaScript
TypeScript

Extracting a superclass in JavaScript
Extracting a superclass in TypeScript

オブジェクトまたは配列の非構造化の抽出

エディターから:
リファクタリング | 抽出 | オブジェクトまたは配列の非構造化

JavaScript
TypeScript

Extracting an object or array destructuring in JavaScript
Extracting an object or array destructuring in TypeScript

Vue コンポーネントの抽出

エディターから:
リファクタリング | 抽出 | Vue コンポーネントの抽出

JavaScript

Extracting a Vue.js component

抽出エイリアス

エディターから:
リファクタリング | 抽出 | 型エイリアス

TypeScript

Extracting a type alias in TypeScript

インクルード・ファイルの抽出

エディターで選択したコードブロックから:
リファクタリング | インクルード・ファイルの抽出

HTML、CSS

インクルードファイルの抽出

ルールセットの抽出

From the editor:
press Alt+Enter and select ルールセットの抽出 from the list.

スタイル・シート

Extracting a ruleset

インライン化

リファクタリング | インライン化
Ctrl+Alt+N

JavaScript
TypeScript

JavaScriptのインラインリファクタリング
TypeScriptのインラインリファクタリング

シグネチャーの変更

リファクタリング | シグネチャーの変更
Ctrl+F6

JavaScript
TypeScript

JavaScriptのシグネチャーを変更する
TypeScriptのシグネチャーを変更する
最終更新日: 2019年9月12日

関連事項

関連ページ:

検索ツール・ウィンドウ

検索ツールウィンドウには、次の検索結果が表示されます。パス内検索/置換、使用箇所の検索、リファクタリング・プレビュー、各検索の結果は、別のタブに表示されるか、または新規タブで開くダイアログ設定に応じて、現在のタブの内容を置き換えます。デフォルトでは、ウィンドウが画面の下部に表示されます。ツールバーに...

JavaScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。シンボルの移動リファクタリング:ファイルやフォルダーを移動するだけでなく、WebStormではJavaScriptのトップレベルのシンボルを移...

TypeScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。移動リファクタリング:ファイルやフォルダーを移動するだけでなく、WebStormではTypeScriptの最上位シンボルを移動できます。シンボ...

スタイル・シート

WebStormを使用すると、Sass、Less、SCSS、Stylusなど、CSSおよびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。スタイルシートのドキュメントを参照したり、ルールセットを作成および移動したり、変数を抽出したりすることもできます。コード補完:WebStormは...

HTML

WebStormは、構文やエラーの強調表示、コードスタイル、構造の検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)などを含むHTMLの強力なサポートを提供します。HTML仕様は、WebStorm設定 のページのデフォルトHTML言語レベル設定で構成可能です。デフォルトでは...

インテンション・アクション

エディターで作業するときに、WebStormはコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDEがコードを改善する方法を見つけるとすぐに、現在の行の隣に黄色い電球のアイコンがエディターに表示されます。このアイコンをクリックすると、現在のコンテキストで利用可能...