WebStorm 2024.3 ヘルプ

コードリファクタリング

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

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

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

  1. リファクタリングするアイテムを選択します。エディターでプロジェクトツールウィンドウまたは式 / シンボルでファイル / フォルダーを選択できます。

  2. 選択可能なリファクタリングのリストを開くには、Ctrl+Alt+Shift+T を押します。

    Refactor This popup

    または、特定のリファクタリング用のキーボードショートカットを使用することもできます。

リファクタリングを元に戻す必要がある場合は、Ctrl+Z を押します。

提案されたリファクタリングの変更をプレビューする

一部のリファクタリングでは、WebStorm を使用して変更を適用する前に変更をプレビューできます。

  1. リファクタリングプレビューダイアログでプレビューをクリックすると、潜在的な変更 (リファクタリングが実行される使用箇所のリスト) が表示されます。

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

    Refactoring preview
  3. リファクタリング実行をクリックして、変更を続行します。

競合の解決

WebStorm があなたのリファクタリングで問題に遭遇すると、衝突のリストとそれらの簡単な説明があるダイアログを開きます。

Refactoring conflicts dialog
  • 問題を無視して続行するには、強制的にリファクタリングをクリックします。

  • 検索ウィンドウで開くをクリックして、検索ツールウィンドウの競合エントリを開き、さらに処理します。

  • 検索ツールウィンドウで、リファクタリングを選択してリファクタリングを適用するか、キャンセルをクリックしてエディターに戻ることができます。

    Refactoring conflicts tool window

    リファクタリング設定を構成する

    1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | コード編集を選択します。

    2. コード編集ページのリファクタリングセクションでリファクタリングオプションを調整し、OK をクリックします。

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

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

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

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

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

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

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

      コピー後にファイル、ディレクトリ、パッケージを自動的に開くには、コピーをエディターで開くチェックボックスを選択します。

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

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

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

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

      ファイル自体の名前を変更することに加えて、WebStorm はファイル名の使用箇所を探すこともできます。見つかった場合、ファイル名に加えた変更はこれらの用途にも適用できます。

      用途は、オン / オフできるオプションに対応するさまざまなカテゴリに割り当てられます。

      選択したオプションに関係なく、検索範囲(名前の出現箇所を検索する場所)は常に現在のエンティティ(ファイル、クラスなど)と現在のエンティティが依存するエンティティに制限されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    コピー

    プロジェクトツールウィンドウから:

    • リファクタリング | コピー

    • F5

    任意のコンテキスト

    ファイルを移動する

    フォルダーを移動

    プロジェクトツールウィンドウから:

    • リファクタリング | 移動

    • F6

    任意のコンテキスト

    シンボル移動

    エディターから:

    • リファクタリング | 移動

    • F6

    • JavaScript

    • TypeScript

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

    エディターから:

    • リファクタリング | メンバーのプルアップ

    • JavaScript

    • TypeScript

    ファイル名の変更

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

    プロジェクトツールウィンドウから:

    • リファクタリング | 名前の変更

    • Shift+F6

    • JavaScript

    • TypeScript

    シンボルの名前変更

    エディターから:

    • リファクタリング | 名前の変更

    • Shift+F6

    • JavaScript

    • TypeScript

    安全な削除

    プロジェクトツールウィンドウから:

    • リファクタリング | 安全な削除

    • Alt+Delete

    • JavaScript

    • TypeScript

    パラメーターの導入

    エディターから:

    • リファクタリング | 抽出 / 導入 | パラメーター

    • Ctrl+Alt+P

    JavaScript

    TypeScript

    フィールドの導入

    エディターから:

    • リファクタリング | 抽出 / 導入 | フィールド

    • Ctrl+Alt+F

    JavaScript

    TypeScript

    JavaScript でフィールドを導入する

    メソッドの抽出

    エディターから:

    リファクタリング | 抽出 / 導入 | メソッド

    Ctrl+Alt+M

    JavaScript

    TypeScript

    JavaScript での抽出メソッド

    変数の導入

    エディターから:

    リファクタリング | 抽出 / 導入 | 変数

    Ctrl+Alt+V

    JavaScript

    TypeScript

    スタイルシート

    JavaScript で変数を導入する

    TypeScript に変数を導入

    スタイルシートの変数の紹介

    定数の導入

    エディターから:

    リファクタリング | 抽出 / 導入 | 定数

    Ctrl+Alt+C

    JavaScript

    TypeScript

    JavaScript に定数を導入

    TypeScript に定数を導入

    スーパークラスの抽出

    エディターから:

    リファクタリング | 抽出 / 導入 | スーパークラス

    JavaScript

    TypeScript

    JavaScript でスーパークラスを抽出する

    TypeScript でのスーパークラスの抽出

    React コンポーネントを抽出

    エディターから:

    リファクタリング | 抽出 / 導入 | コンポーネントの抽出

    React

    React コンポーネントの抽出

    クラスコンポーネントに変換

    エディターから:

    リファクタリング | クラスコンポーネントに変換

    React

    関数をクラスコンポーネントに変換する

    関数コンポーネントに変換

    エディターから:

    リファクタリング | 関数コンポーネントに変換

    React

    クラスを機能コンポーネントに変換する

    Vue コンポーネントの抽出

    エディターから:

    リファクタリング | 抽出 / 導入 | Vue コンポーネントの抽出

    JavaScript

    Vue.js コンポーネントの抽出

    型エイリアスの抽出

    エディターから:

    リファクタリング | 抽出 | 型エイリアス

    TypeScript

    TypeScript での型エイリアスの抽出

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

    エディターで選択したコードブロックから:

    リファクタリング | インクルードファイルの抽出

    HTML、CSS

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

    ルールセットの抽出

    エディターから:

    Alt+Enter を押して、リストからルールセットの抽出を選択します。

    スタイルシート

    ルールセットの抽出

    インライン化

    リファクタリング | インライン化

    Ctrl+Alt+N

    JavaScript

    TypeScript

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

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

    シグネチャーの変更

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

    Ctrl+F6

    JavaScript

    TypeScript

    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 ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。を押して設定を...