ツイートシェアはてブ LINE Pocket

JavaScript のリファクタリング

リファクタリング(英語)とは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry(英語) に保ち、保守を容易にできます。

シンボルの移動リファクタリング

PhpStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScript トップレベルシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。

クラス、関数、変数を移動する

移動するシンボルを選択します。
F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 移動を選択します。あるいは、リファクタリング | リファクタリングを選択するか Ctrl+Alt+Shift+T を押してから、リストから移動を選択します。
モジュールメンバーの移動ダイアログが開きます。
宛先ファイルを指定し、移動するメンバーを選択します。
デフォルトでは、PhpStorm はメンバーの可視性を必要なレベルまで自動的に上げます。可視性レベルを変更しない場合は、可視性のそのままをクリックします。

クラスメンバーのプルアップリファクタリング

クラスメンバーをプルアップするリファクタリングは、現在のクラスからスーパークラスにクラス階層を上に移動します。

サンプル: クラスメソッドをスーパークラスに移動する

抽象クラス Department を拡張するクラス AccountingDepartment があるとします。この例では、クラスメンバーをプルアップするリファクタリングは printMeeting() メソッドを AccountingDepartment からそのスーパークラス Department に移動します。

                    class Department {
                        name;

                        printName() {
                            console.log("Department name: " + this.name);
                        }
                    }

                    class AccountingDepartment extends Department {
                        printMeeting() {
                            console.log("The Accounting Department meets each Monday at 10am.");
                        }

                        generateReports() {
                            console.log("Generating accounting reports...");
                        }
                    }
                

                    class Department {
                        name;

                        printName() {
                            console.log("Department name: " + this.name);
                        }

                        printMeeting() {
                            console.log("The Accounting Department meets each Monday at 10am.");
                        }
                    }

                    class AccountingDepartment extends Department {
                        generateReports() {
                            console.log("Generating accounting reports...");
                        }
                    }
                

クラスのメソッドをスーパークラスに移動する

メンバーをプルアップするクラス内の任意の場所にキャレットを配置します。
メインメニューまたはコンテキストメニューからリファクタリング | メンバーのプルアップを選択します。メンバーのプルアップダイアログが開きます。
リストから、メソッドを移動するスーパークラスを選択します。
メソッドをプルアップするには、引き上げるメンバーリストでそのメソッドの横にあるチェックボックスを選択します。

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

任意の言語のコンテキストで使用できるファイルとフォルダーの名前を変更するに加えて、クラス、メソッド、関数、変数、パラメーターの名前を変更することもできます。PhpStorm は、宣言内のシンボルの名前を変更し、デフォルトでは、現在のプロジェクトでのすべての使用箇所を変更します。

クラスとそのメソッドの名前を変更する

エディターで、キャレットを配置するか、名前を変更するクラスまたはメソッドを選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。
開いた名前変更ダイアログで、クラスまたはメソッドの新しい名前を入力します。
オプション:
- コメントと文字列内を検索およびテキスト出現箇所の検索チェックボックスを選択して、コメント、文字列リテラル、テキストでのクラスまたはメソッドの使用箇所の名前を変更します。
- デフォルトでは、クラスまたはメソッドの名前はプロジェクト全体で変更されます。リストから別のスコープを選択できます。

クラスの名前と含まれているファイルを準拠させてください

クラスの名前を変更すると、PhpStorm は同じ名前のファイルの名前を変更することを提案します。提案を受け入れると、PhpStorm は他のファイルのインポートステートメントでこのファイルの名前を更新します。

この提案を却下した場合は、後でファイル名の変更インテンションアクションを使用してファイルの名前を変更できます。別のインテンションアクションは、クラスを対応する名前の新しいファイルに移動することを提案します。推奨名の形式は、コードスタイル: JavaScript ページのファイル名規約リストから選択されたスタイルによって決まります。

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

これは、新しいファイルを作成したばかりで、そこにクラスまたはインターフェースを入力し始めたときに、より適切な名前を思いついた場合に便利です。インテンションアクションを呼び出すには、対象のクラスの名前にキャレットを置き、Alt+Enter を押します。

関数、変数、パラメーターの名前を変更する

関数、変数、パラメーターの名前変更リファクタリングはインプレースで実行される場合がありますが、Shift+F6 を押して名前変更ダイアログでリファクタリングスコープを構成できます。

デフォルトで名前変更ダイアログを開くには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コード編集に移動して、リファクタリングオプションを指定する領域でモーダルダイアログ内オプションを選択します。

Refactoring settings: open settings in modal dialogs

エディターで、キャレットを配置するか、関数、変数、パラメーターを選択して名前を変更し、Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。
PhpStorm がコメントまたは文字列内のシンボルの使用箇所を検出した場合は、これらの使用箇所の名前も変更するかどうかを指定します。
キャンバスのあるフィールドに、関数、変数、パラメーターの新しい名前を入力します。
あるいは:
Shift+F6 をもう一度押して、名前変更ダイアログを開きます。
- コメントと文字列内を検索およびテキスト出現箇所の検索チェックボックスを選択して、コメント、文字列リテラル、テキストでのシンボルの使用箇所の名前を変更します。
- デフォルトでは、シンボルはプロジェクト全体で名前が変更されます。リストから別のスコープを選択できます。

定数名の変更

エディターで、キャレットを配置するか、名前を変更する定数を選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。
開いた名前変更ダイアログで、定数の新しい名前を入力します。
オプション:
- コメント、文字列リテラル、テキストでの定数の使用箇所の名前を変更するには、コメントと文字列内を検索およびテキスト出現箇所の検索チェックボックスを選択します。
- デフォルトでは、定数はプロジェクト全体で名前が変更されます。リストから別のスコープを選択できます。

シンボルの動的な使用箇所の名前を変更する

JavaScript は動的であるため、動的参照が有効な使用箇所であり、名前を変更する必要がある場合があります。ただし、多くの場合、動的な使用箇所の名前を変更することは、予期された動作ではありません。以下の例では、rename.test() で test() を test1() に変更することは正しいですが、hello.test() ではエラーになります。

class Rename{
    test() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test();
let b = hello.test();
            

class Rename{
    test1() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test1();
let b = hello.test();
            

class Rename{
    test1() {
        return 12345;
    }
}

let rename = new Rename();
let hello = window["Test"];

let a = rename.test1();
let b = hello.test1();
            

PhpStorm は、複雑なリファクタリングを適用する前に、常にプレビューウィンドウを表示します。

抽出リファクタリング

PhpStorm は、パラメーター、変数、定数、フィールド、メソッド、関数を導入するためのさまざまな抽出リファクタリングを提供します。これらのリファクタリングのいずれかを実行するには、リファクタリングする式を選択し、リファクタリング | <target> を選択します。式全体を選択することも、式内の任意の場所にキャレットを置くこともできます。PhpStorm が選択を支援します。

パラメーターの導入

パラメーターの導入リファクタリングを使用して、関数呼び出しの式をパラメーターで置き換えます。PhpStorm はそれに応じて関数の宣言と呼び出しを更新します。新しいパラメーターのデフォルト値は、関数本体の中で初期化することも、関数呼び出しを渡すこともできます。

関数 calculate_sum(i) にハードコードされた 1 を含むコードがあるとします。パラメーターの導入リファクタリングを使用すると、このハードコードされた 1 を i2 パラメーターに置き換えることができます。オプションとして、または必要に応じて、新しい i2 パラメーターを抽出できます。

例 1: オプションのパラメーターの紹介

新しいパラメーター i2 がオプションのパラメーターとして抽出されます。新しいパラメーターは calculate_sum(i) の本体で初期化され、show_sum() の calculate_sum(i) の呼び出しは変更されません。

下のパラメーター型の選択 (オプション) を参照してください。

                        function calculate_sum(i) {
                            alert('Adding ' + 1 + ' to ' + i);
                            return 1 + i;
                        }

                        function show_sum() {
                            alert('Result: ' + calculate_sum(5));
                        }
                    

                        function calculate_sum(i, i2) {
                            i2 = i2 || 1;
                            alert('Adding ' + i2 + ' to ' + i);
                            return i2 + i;
                        }

                        function show_sum() {
                            alert('Result: ' + calculate_sum(5));
                        }
                    

例 2: 必須パラメーターの紹介

新しいパラメーター i2 が必須パラメーターとして抽出され、show_sum() 内の calculate_sum(i) の呼び出しがそれに応じて変更されます。

下のパラメーター型の選択 (必須) を参照してください。

                        function calculate_sum(i) {
                            alert('Adding ' + 1 + ' to ' + i);
                            return 1 + i;
                        }

                        function show_sum() {
                            alert('Result: ' + calculate_sum(5));
                        }
                    

                        function calculate_sum(i, i2) {
                            alert('Adding ' + i2 + ' to ' + i);
                            return i2 + i;
                        }

                        function show_sum() {
                            alert('Result: ' + calculate_sum(5, 1));
                        }
                    

パラメーターを導入する

エディターで、パラメーターに変換する式内にキャレットを置き、Ctrl+Alt+P を押すか、コンテキストメニューからリファクタリング | パラメーターの導入を選択します。
または、次のいずれかを実行します。
- Ctrl+Alt+Shift+T を押してパラメーターの導入を選択します。
- リファクタリング | 抽出 | パラメーターに移動します。
現在のキャレット位置で複数の式が検出された場合は、式リストから必要な式を選択します。
選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。
最後に、リファクタリングを設定するためのポップアップが表示されます。
JSDoc の生成を選択すると、JSDoc(英語) コメントブロックが生成されます。これは、カスタムのデフォルトパラメーター値を指定する必要がある場合に役立ちます。
新しいパラメーターの型（オプションまたは必須）を選択し、該当する場合はデフォルト値を指定します。
- 省略可能なパラメーターチェックボックスが選択されている場合、パラメーターはファンクション本体のデフォルト値で初期化されます。
  上のパラメーターの紹介の例 1 を参照してください。
- 省略可能なパラメーターチェックボックスをオフにすると、既定のパラメーター値が既存の関数呼び出しを介して渡されます。新しい関数シグネチャーに従ってすべての関数呼び出しが変更され、パラメーターの初期化が関数本体に追加されます。
  上のパラメーターの紹介の例 2 を参照してください。
最初は、PhpStorm はデフォルト値としてリファクタリングが呼び出される式を受け入れます。ほとんどの場合、変更する必要はありません。それでも必要な場合は、JSDoc コメントに @param <parameter name> - <default value> の形式で別のデフォルト値を指定してください。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。
また、ES6 コードでは、i2 = i2 || 1; の代わりに新しいデフォルト関数のパラメーター構文 function calculate_sum(i, i2 = 1) が適用されます。https://developer.mozilla.orgWeb サイトのデフォルト関数型パラメーターの詳細を参照してください。

リファクタリングモードの選択

上記のようにエディター（インプレースモード）でパラメーターを抽出するか、パラメーターの導入ダイアログを使用できます。これらの 2 つのアプローチはかなり似ています。違いは次のとおりです。

リファクタリングの結果のプレビュー。
ダイアログで、プレビューをクリックして、検索ツールウィンドウの専用タブで予想される変更を確認できます。インプレースモードでは、この機能は使用できません。
デフォルトのパラメーター値の指定。
ダイアログで、PhpStorm は値フィールドにデフォルトのパラメーター値を提案します。ここで、提案を受け入れるか、別の値を指定できます。インプレースモードでは、PhpStorm は、リファクタリングが呼び出された式をデフォルトのパラメーター値として扱います。別の値を指定するには、JSDoc コメントブロックを使用する必要があります。

デフォルトでは、PhpStorm はインプレースモードで IntroduceParameter リファクタリングを実行します。パラメーターの抽出ダイアログを使用するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

変数の導入

変数の導入リファクタリングを使用して、式を関数スコープ変数 (var) またはブロックスコープ変数 (let) に置き換えます。このリファクタリングにより、ソースコードの読み取りと保守が容易になります。

return ステートメントに部分的にハードコードされた式を持つ関数があるとします。

                    Parenizor.method('toString', function ())
                    {
                        return '(' + this.getValue() + ')';
                    }
                

変数の導入リファクタリングを使用すると、'(' + this.getValue() + ')' 式を変数（たとえば string）で置き換えることができます。抽出された変数のスコープは、その宣言 var または let で使用されるステートメントと、新しい変数が宣言されるコンテキスト（関数の内部または外部）に依存します。

例 1: let ステートメント宣言を使用したブロックスコープ変数の紹介

変数 string は、return ステートメントの '(' + this.getValue() + ')' 式から抽出されます。新しい変数は、Parenizor.method('toString', function ()) 内の let ステートメントで宣言されています。

                        Parenizor.method('toString', function ())
                        {
                            return '(' + this.getValue() + ')';
                        }
                    

                        Parenizor.method('toString', function ())
                        {
                            let string = '(' + this.getValue() + ')';
                            return string;
                        }
                    

例 2: 変数を導入し、関数外で変数を宣言する

変数 appName は navigator.appName 式から抽出され、関数の外側で var ステートメントを使用して宣言されます。

                        var browserName = "N/A";
                        if (navigator.appName.indexOf("Netscape") != -1) {
                            browserName = "NS";
                        } else if (navigator.appName.indexOf("Microsoft") != -1) {
                            browserName = "MSIE";
                        } else if (navigator.appName.indexOf("Opera") != -1) {
                            browserName = "O";
                        }
                    

                        var browserName = "N/A";
                        var appName = navigator.appName;
                        if (appName.indexOf("Netscape") != -1) {
                            browserName = "NS";
                        } else if (appName.indexOf("Microsoft") != -1) {
                            browserName = "MSIE";
                        } else if (appName.indexOf("Opera") != -1) {
                            browserName = "O";
                        }
                    

変数を導入する

エディターで、変数に変換する式を選択して Ctrl+Alt+V を押すか、コンテキストメニューからリファクタリング | 変数の導入を選択します。
または、次のいずれかを実行します。
- Ctrl+Alt+Shift+T を押して変数の導入を選択します。
- リファクタリング | 抽出 | 変数に移動します。
現在のキャレット位置で複数の式が検出された場合は、式リストから必要な式を選択します。
選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。
最後に、リファクタリングを設定するためのポップアップが表示されます。
リストから、新しい変数の宣言に使用するステートメントを選択します。
- 関数スコープ変数を導入するには、var を選択します。
- ブロックスコープ変数を導入するには、let を選択します。上記の例 2 を参照してください。
- const を選択して、定数を導入します。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

リファクタリングモードの選択

上記のように（インプレースモードで）エディターで変数を抽出するか、変数の抽出ダイアログを使用できます。デフォルトでは、PhpStorm はインプレースモードで IntroduceVariable リファクタリングを実行します。変数の抽出ダイアログを使用するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

定数の導入

定数の導入リファクタリングを使用して、式を定数に置き換えます。このリファクタリングにより、ソースコードの読み取りと保守が容易になります。また、値や目的についての説明なしにハードコードされた定数の使用を回避するのにも役立ちます。

クラス内では、読み取り専用フィールドを導入したり、複数のスコープが適している場合はスコープを選択したりできます。他のコンテキストでは、PhpStorm はローカル定数のみを導入します。

例 1: 導入された定数のスコープの選択

"Department name :" がハードコードされているメソッド printName() を持つクラス AccountingDepartment があるとします。

                class AccountingDepartment {
                    name;

                    printName() {
                        console.log("Department name: " + this.name);
                    }

                    printMeeting() {...
                    }

                    generateReports() {...
                    }
                }
            

PhpStorm は、新しい定数をローカルとして導入し、printName() 関数内で宣言するか、グローバルまたはモジュールとして宣言し、クラス外で宣言できます。

                        class AccountingDepartment {
                            name;

                            printName() {
                                const departmentName = "Department name: ";
                                console.log(departmentName + this.name);
                            }

                            printMeeting() {...
                            }

                            generateReports() {...
                            }
                        }
                    

Introducing a local constant and declaring it inside the enclosing method

                        const departmentName = "Department name: ";

                        class AccountingDepartment {
                            name;

                            printName() {
                                console.log(departmentName + this.name);
                            }

                            printMeeting() {...
                            }

                            generateReports() {...
                            }
                        }

                    

Introducing a global constant and declaring it outside a class

例 2: スコープを選択せずに定数を導入する

定数の導入リファクタリングがクラスの外部から呼び出されると、PhpStorm は自動的にローカル変数を導入し、現在の関数またはブロック内で宣言します。

                        let output = MyFunction(5, 8);
                        document.writeln("The value is .".output);
                    

                        let output = MyFunction(5, 8);
                        const Value = "The value is ";
                        document.writeln(Value.output);

                    

定数を導入する

エディターで、定数に変換する式を選択して Ctrl+Alt+C を押すか、コンテキストメニューからリファクタリング | 定数の導入を選択します。
または、次のいずれかを実行します。
- Ctrl+Alt+Shift+T を押して定数の導入を選択します。
- リファクタリング | 抽出 | 定数に移動します。
現在のキャレット位置で複数の式が検出された場合は、式リストから必要な式を選択します。
リファクタリングがクラス内から呼び出される場合は、読み取り専用フィールドを導入するか、新しい定数のスコープを選択します。例 1 を参照してください。
グローバル定数の場合、選択された式の複数の出現が見つかります。複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択します。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

フィールドの導入

フィールドの導入リファクタリングでは、新しいフィールドが宣言され、選択された式で初期化されます。元の式はフィールドの使用箇所に置き換えられます。

以下の例では、同じフィールド _calcArea が導入されています。例は、導入されたフィールドを初期化する 3 つの異なる方法を示しています。

例 1: 導入されたフィールドは、囲むメソッドで初期化されます

                        class Rectangle {
                            constructor(height, width) {
                                this.height = height;
                                this.width = width;
                            }

                            get area() {
                                return this.calcArea();
                            }

                            calcArea() {
                                return this.height * this.width;
                            }
                        }
                    

                        class Rectangle {
                            constructor(height, width) {
                                this.height = height;
                                this.width = width;
                            }

                            _calcArea;

                            get area() {
                                this._calcArea = this.calcArea();
                                return this._calcArea;
                            }

                            calcArea() {
                                return this.height * this.width;
                            }
                        }                        

例 2: 抽出されたフィールドは宣言で初期化されます

                        class Rectangle {
                            constructor(height, width) {
                                this.height = height;
                                this.width = width;
                            }

                            get area() {
                                return this.calcArea();
                            }

                            calcArea() {
                                return this.height * this.width;
                            }
                        }
                    

                        class Rectangle {
                            constructor(height, width) {
                                this.height = height;
                                this.width = width;
                            }

                            _calcArea = this.calcArea();

                            get area() {
                                return this._calcArea;
                            }

                            calcArea() {
                                return this.height * this.width;
                            }
                        }                        

例 3: 抽出されたフィールドは、クラスのコンストラクターで初期化されます。

                        class Rectangle {
                            constructor(height, width) {
                                this.height = height;
                                this.width = width;
                            }

                            get area() {
                                return this.calcArea();
                            }

                            calcArea() {
                                return this.height * this.width;
                            }
                        }
                    

                        class Rectangle {
                            constructor(height, width) {
                                this._calcArea = this.calcArea();
                                this.height = height;
                                this.width = width;
                            }

                            _calcArea;

                            get area() {
                                return this._calcArea;
                            }

                            calcArea() {
                                return this.height * this.width;
                            }
                        }
                    

フィールドを紹介する

エディターで、フィールドに変換する式を選択して Ctrl+Alt+F を押すか、コンテキストメニューからリファクタリング | フィールドの導入を選択します。
または、次のいずれかを実行します。
- Ctrl+Alt+Shift+T を押してフィールドの導入を選択します。
- リファクタリング | 抽出 | フィールドに移動します。
ポップアップで、新しいフィールドを初期化する場所を選択します。
- 現在のメソッド、上記の例 1 を参照してください。
- フィールド宣言、上記の例 2 を参照してください。
- コンストラクター。上記の例 3 を参照してください。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

リファクタリングモードの選択

デフォルトでは、PhpStorm は、フィールドを右（インプレースモードで）エディターでリファクタリング紹介実行上記のように。

リファクタリング時にフィールドの抽出ダイアログを使用するには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | コード編集に移動し、リファクタリング領域でモーダルダイアログ内オプションを選択します。

メソッドの抽出

メソッドの抽出リファクタリングでは、抽出されたコードで名前付きのメソッドまたは関数を作成できます。メソッドの抽出リファクタリングが呼び出されると、PhpStorm は選択されたコードフラグメントの入力である変数と、それに対する出力である変数を検出します。検出された出力変数は、抽出されたメソッドまたは関数の戻り値として使用されます。

以下の例では、c = a + b; 式から関数を抽出しています。

例 1: 他の関数内の式からグローバルスコープ関数を抽出する

リファクタリングが呼び出される c = a + b; 式は、MyFunction() 関数内にあります。グローバル宛先スコープが選択されます。

例 1.1: 関数宣言を生成する

                        function MyFunction(a, b) {
                            c = a + b;
                            return (c * c);
                        }

                        result = MyFunction(4, 6);
                        document.write(result);
                    

                        function extracted(a, b) {
                            c = a + b;
                        }

                        function MyFunction(a, b) {
                            extracted(a, b);
                            return (c * c);
                        }

                        result = MyFunction(4, 6);
                        document.write(result);
                    

例 1.2: 抽出された関数が式の中で宣言されている

                        function MyFunction(a, b) {
                            c = a + b;
                            return (c * c);
                        }

                        result = MyFunction(4, 6);
                        document.write(result);
                    

                        let extracted = function (a, b) {
                            c = a + b;
                        };

                        function MyFunction(a, b) {
                            extracted(a, b);
                            return (c * c);
                        }

                        result = MyFunction(4, 6);
                        document.write(result);
                    

例 2: 関数外の式からグローバルスコープ関数を抽出する

リファクタリングが呼び出される c = a + b; 式は、関数の外部にあります。宛先スコープを選択することはできません。

例 2.1: 関数宣言を生成する

c = a + b;

                        function extracted() {
                            c = a + b;
                        }

                        extracted();
                    

例 2.2: 抽出された関数は式の中で宣言されます

c = a + b;

                        let extracted = function () {
                            c = a + b;
                        };
                        extracted();
                    

例 3: 囲み関数内の定義を持つ関数を抽出する

リファクタリングが呼び出される c = a + b; 式は、MyFunction() 関数内にあります。機能 MyFunction 宛先スコープが選択されています。

                        function MyFunction(a, b) {
                            c = a + b;
                            return (c * c);
                        }

                        result = MyFunction(4, 6);
                        document.write(result);
                    

                        function MyFunction(a, b) {
                            function extracted() {
                                c = a + b;
                            }

                            extracted();
                            return (c * c);
                        }

                        result = MyFunction(4, 6);
                        document.write(result);

                    

関数を抽出する

エディターで、関数に変換するコードフラグメントを選択し、Ctrl+Alt+M を押すか、コンテキストメニューからリファクタリング | メソッドの抽出を選択します。
または、次のいずれかを実行します。
- Ctrl+Alt+Shift+T を押してメソッドの抽出を選択します。
- リファクタリング | 抽出 | メソッドに移動します。
選択されたコードフラグメントは、一連のステートメントまたはコードのどこかで使用される式です。
選択した式が関数内にある場合は、リストから宛先スコープを選択してください。
- global を選択すると、抽出された関数は関数の外部で宣言されます。上記の例 1 を参照してください。
- 現在の囲み関数内で抽出された関数を定義するには、関数 <現在の包含関数名> を選択します。上記の例 3 を参照してください。
その他のオプションを含むメソッドの抽出ダイアログを開くには、もう一度 Ctrl+Alt+M を押します。このダイアログでは、抽出された関数を生成された関数宣言で宣言する(英語)か、式内で宣言するかを選択できます。上記の例を参照してください。

デフォルトで関数抽出ダイアログを開く

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

スーパークラスの抽出

スーパークラスの抽出リファクタリングは、現在のクラスのメンバーに基づいて新しい抽象クラスを作成します。作成されたクラスは自動的に拡張されます。

クラス AccountingDepartment を持っていて、そこからの printName() メソッドが再利用されることを期待しているとします。

                    class AccountingDepartment {
                        name;

                        printName() {
                            console.log("Department name: " + this.name);
                        }

                        printMeeting() {
                            console.log("The Accounting Department meets each Monday at 10am.");
                        }

                        generateReports() {
                            console.log("Generating accounting reports...");
                        }
                    }
                

スーパークラス Department を抽出し、その中に printName と Name フィールドを含めることができます。

                    class Department {
                        name;

                        printName() {
                            console.log("Department name: " + this.name);
                        }
                    }

                    class AccountingDepartment extends Department {
                        printMeeting() {
                            console.log("The Accounting Department meets each Monday at 10am.");
                        }

                        generateReports() {
                            console.log("Generating accounting reports...");
                        }
                    }
                

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

スーパークラスを抽出するクラス内の任意の場所にキャレットを配置します。
メインメニューからリファクタリング | 抽出 | スーパークラスを選択するか、コンテキストメニューからリファクタリング | スーパークラスの抽出を選択します。スーパークラスの抽出ダイアログが開きます。
新しいスーパークラスの名前を指定し、そこに含めるクラスメンバーの横にあるチェックボックスを選択します。必要に応じて、抽象化したいメンバーにマークを付けます。
宛先ファイルフィールドに、新しいクラスが配置されるファイルの場所を指定します。デフォルトでは、フィールドにはリファクタリングが呼び出された現在のファイルへのパスが表示されます。
スーパークラスの抽出を選択します。PhpStorm は新しいクラスを作成し、ソースクラスを extends でマークします。
スーパークラスを作成し、ソースクラスへの参照をメソッドのパラメーター内のスーパークラスへの参照に置き換えるには、スーパークラスを抽出し、可能な限り使用するを選択します。PhpStorm は、検索ツールウィンドウのリファクタリングプレビューペインに提案された変更を表示します。

オブジェクトまたは配列の分割代入を導入

構造を分割すると、配列やオブジェクトの値を変数に簡単に解凍できます。この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要がある場合によく使用されます。詳細については、ES6 を探索する(英語)を参照してください。

PhpStorm では、インテンションアクション Alt+Enter を使用して分割代入を呼び出すことができます。オブジェクト / 配列の分割代入に置き換えるアクションを使用すると、元の割り当てが削除されます。割り当てを維持するには、オブジェクト / 配列の破壊を導入するを使用します。

元の割り当てを置き換える

配列またはオブジェクトの値にキャレットを置き、Alt+Enter を押します。
リストから、オブジェクトの分割代入に置換または配列の分割代入に置換を選択します。
配列またはオブジェクトからの値のいくつかが使用されていない場合、これらの要素はスキップされます。

元の割り当てを維持する

配列またはオブジェクトの値にキャレットを置き、Alt+Enter を押します。
リストから、オブジェクトの分割代入を導入するまたは配列の分割代入を導入するを選択します。
このインテンションアクションは、React クラスコンポーネントを操作するときに非常に便利です。

関数の分解パラメーターを生成する

関数のパラメーターにキャレットを置き、Alt+Enter を押します。
リストから、パラメーターをオブジェクトに変換するを選択します。

Vue コンポーネントの抽出

Vue コンポーネントの抽出リファクタリングを使用すると、コピーや貼り付けを行わずに、既存のコンポーネントから新しい Vue.js(英語) コンポーネントを抽出できます。このリファクタリングはインプレースでのみ機能するため、設定 Ctrl+Alt+S のエディター | コード編集ページでエディター内リファクタリングオプションが選択されていることを確認してください。

Vue.js コンポーネントを抽出する

抽出するコードフラグメントを選択し、コンテキストメニューからリファクタリング | Vue コンポーネントの抽出を選択するか、メインメニューからリファクタリング | 抽出 | Vue コンポーネントの抽出を選択します。
あるいは、専用のインテンションアクションを使用します。抽出するテンプレートフラグメントを選択し、Alt+Enter を押して、リストから Vue コンポーネントの抽出を選択します。詳細については、「Vue.js」を参照してください。
新しいコンポーネントの名前を入力します。この名前がすでに使用されているか無効な場合、PhpStorm は警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。

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

インラインリファクタリングは抽出リファクタリングとは逆です。

例 1: 変数のインライン化

変数のインライン化リファクタリングは、変数または定数の冗長な使用箇所をそのイニシャライザーに置き換えます。この型のリファクタリングは、ブロックスコープおよび関数スコープの変数でのみ使用できます。

                    Parenizor.method('toString', function () {
                        var string = '(' + this.getValue() + ')';
                        return string;
                    }                            

                    Parenizor.method('toString', function () {
                        return '(' + this.getValue() + ')';
                    }
                

例 2: 関数のインライン化

メソッドのインライン化 / 関数のインライン化リファクタリングの結果、メソッドまたは関数の本体が呼び出し元の本体に配置されます。メソッド / 関数自体が削除されます。

以下の例では、Sum() の本体が Multiplication() と Division() の本体に配置されています。

                    function Sum(a, b) {
                        return a + b;
                    }

                    function Multiplication(a, b) {
                        c = Sum(a, b);
                        d = c * c;
                        return d;
                    }

                    function Division(a, b) {
                        c = Sum(a, b);
                        d = Multiplication(a, b);
                        result = c / d;
                        return result;
                    }
                

                    function Multiplication(a, b) {
                        c = a + b;
                        d = c * c;
                        return d;
                    }

                    function Division(a, b) {
                        c = a + b;
                        d = Multiplication(a, b);
                        result = c / d;
                        return result;
                    }

                

インラインで実行リファクタリング

エディターで、インライン化するシンボルにキャレットを置き、Ctrl+Alt+N を押すか、コンテキストメニューまたはメインメニューからリファクタリング | インライン化を選択します。
選択したシンボルに対応するインライン化ダイアログで、インラインリファクタリングを確認します。

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

ファンクション名の変更、パラメーターの追加、削除、並べ替え、名前の変更、呼び出しの階層を介した新しいパラメーターの伝播には、シグネチャーの変更リファクタリングを使用します。

また、パラメーターの導入リファクタリングを使用してパラメーターを追加することもできます。

以下の例は、シグネチャーの変更リファクタリングを実行するためのさまざまな方法を示しています。すべての場合において、関数 result() は generate_result() に名前変更され、新しいパラメーター input がこの関数に追加されています。例は、リファクタリング設定に応じて、関数呼び出し、呼び出し元の関数 show_result()、その他のコードの断片がどのように影響を受ける可能性があるかを示しています。

例 1: 関数の名前を変更し、パラメーターを追加し、その値を関数呼び出しに渡す

この例では、関数 result() が generate_result() に名前変更され、パラメーター input が追加され、値 100 がパラメーターとして関数呼び出しに渡されます。

                    function result() {
                    }

                    function show_result() {
                        alert('Result: ' + result());
                    }
                

                    function generate_result(input) {
                    }

                    function show_result() {
                        alert('Result: ' + generate_result(100));
                    }
                

例 2: 関数名の変更とデフォルトパラメーターの追加

この例では、関数 result() は generate_result() に名前変更されています。デフォルトパラメーター input が値 100 で追加されます。新しいパラメーターは、generate_result() で ES6 言語レベルの場合は function generate_result(input = 100) {}、ES5 の場合は input = input || 100 の形式で初期化されます。

                    function result() {
                    }

                    function show_result() {
                        alert('Result: ' + result());
                    }
                

                    function generate_result(input = 100) {
                    }

                    function show_result() {

                    alert('Result: ' + generate_result());
                    }

例 3: 関数の名前の変更、デフォルトパラメーターの追加、関数呼び出しへのパラメーターの伝播

                    function result() {
                    }

                    function show_result() {
                        alert('Result: ' + result());
                    }
                

                    function generate_result(input = 100) {
                    }

                    function show_result() {

                    alert('Result: ' + generate_result());
                    }

シグネチャーの変更を呼び出す

エディターで、リファクタリングする関数の名前内にキャレットを置き、Ctrl+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | シグネチャーの変更を選択します。「シグネチャーの変更」ダイアログが開きます。

関数の名前を変更する

シグネチャーの変更ダイアログ Ctrl+F6 で、名前フィールドを編集します。

関数パラメーターを管理する

シグネチャーの変更ダイアログ Ctrl+F6 では、パラメーターのテーブルとその右側のボタンを使用します。
- 新しいパラメーターを追加するには、 Alt+Insert をクリックして、新しいパラメーターの名前とそのデフォルト値、または関数呼び出しを介して渡される値を指定します。
  上記の例 1 および例 2 を参照してください。
- パラメーターを削除するには、対応する行のセルのいずれかをクリックして、 Alt+Delete をクリックします。
- パラメーターを並べ替えるには、 Alt+Up、 Alt+Down を使用します。
- パラメーターの名前を変更するには、名前フィールドを編集します。
- 必要に応じて、現在の関数を呼び出す関数に新しいパラメーターを伝達します。

呼び出しの階層に沿ってパラメーターを伝搬する

シグネチャーの変更ダイアログ Ctrl+F6 で、パラメーターを選択し、をクリックします。新規パラメーターを伝播するメソッドの選択ダイアログが開きます。左側のペインには、関数呼び出しの階層が表示されます。関数を選択すると、右側のペインのコードと、呼び出し元メソッドフィールドと呼び出し先メソッドフィールドにそれぞれ呼び出される関数のコードが表示されます。
上の例 3 を参照してください。
左側のペインで、パラメーターを伝播する機能の横にあるチェックボックスを選択し、OK をクリックします。

変更をプレビューしてリファクタリングを完了する

シグネチャーの変更ダイアログで、プレビューをクリックします。
検索ツールウィンドウのリファクタリングプレビュータブで、予想される変更を表示し、必要な調整を行い、準備ができたらリファクタリング実行をクリックします。

最終更新日: 2024 年 6 月 25 日

JavaScript のリファクタリング

シンボルの移動リファクタリング

クラス、関数、変数を移動する

クラスメンバーのプルアップリファクタリング

クラスのメソッドをスーパークラスに移動する

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

クラスとそのメソッドの名前を変更する

クラスの名前と含まれているファイルを準拠させてください

関数、変数、パラメーターの名前を変更する

定数名の変更

シンボルの動的な使用箇所の名前を変更する

抽出リファクタリング

パラメーターの導入

パラメーターを導入する

リファクタリングモードの選択

変数の導入

変数を導入する

リファクタリングモードの選択

定数の導入

定数を導入する

フィールドの導入

フィールドを紹介する

リファクタリングモードの選択

メソッドの抽出

関数を抽出する

デフォルトで関数抽出ダイアログを開く

スーパークラスの抽出

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

オブジェクトまたは配列の分割代入を導入

元の割り当てを置き換える

元の割り当てを維持する

関数の分解パラメーターを生成する

Vue コンポーネントの抽出

Vue.js コンポーネントを抽出する

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

インラインで実行リファクタリング

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

シグネチャーの変更を呼び出す

関数の名前を変更する

関数パラメーターを管理する

呼び出しの階層に沿ってパラメーターを伝搬する

変更をプレビューしてリファクタリングを完了する

関連ページ：