WebStorm 2026.1 Help

コードリファクタリング

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

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

リファクタリングを実行

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

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

    このポップアップをリファクタリング

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

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

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

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

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

    リファクタリングダイアログ
  2. 開いた 検索ツールウィンドウで、行われる変更を確認します。 Delete を除外したり、不要と思われる Ctrl+X の変更を削除したりできます。

    リファクタリングのプレビュー
  3. リファクタリング実行 をクリックして、変更を続行します。

競合の解決

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

競合のリファクタリングダイアログ
  • 問題を無視して続行するには、 強制的にリファクタリング をクリックします。

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

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

    リファクタリング競合ツールウィンドウ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      ファイルまたはフォルダーの名前を変更する
    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 のシグネチャーを変更する

    デフォルトのエクスポートを名前付きエクスポートに変換する

    エディターから:

    Alt+Enter - デフォルトのエクスポートを名前付きエクスポートに変換する

    JavaScript

    TypeScript

    JavaScript リファクタリング - デフォルトのエクスポートを名前付きエクスポートに変換する

    TypeScript リファクタリング - デフォルトのエクスポートを名前付きエクスポートに変換する

    名前付きエクスポートをデフォルトエクスポートに変換する

    エディターから:

    Alt+Enter - 名前付きエクスポートをデフォルトに変換する

    JavaScript

    TypeScript

    JavaScript リファクタリング - 名前付きエクスポートをデフォルトエクスポートに変換する

    TypeScript リファクタリング - 名前付きエクスポートをデフォルトエクスポートに変換する

    2026 年 6 月 8 日