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

JavaScript のリファクタリング

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

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

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

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

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

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

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

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

抽象クラス 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...");
                        }
                    }
                

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

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

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

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

関数、クラス、または変数の名前を変更する

エディターで、名前を変更するシンボルを選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。
開いた名前変更ダイアログで、シンボルの新しい名前を入力します。
必要に応じて、コメントと文字列内を検索およびテキスト出現箇所を検索チェックボックスを選択して、コメント、文字列リテラル、テキストの関数またはクラスの使用方法を変更します。
必要に応じて、変更をプレビューして適用します。

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

エディターでパラメーターを選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。
選択したパラメーターを囲む赤いキャンバスのあるフィールドに、新しいパラメーター名を入力します。
リファクタリングを実行するには、Enter を押します。

クラスの名前を保持し、準拠するファイルを含む

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

Rename refactoring for classes: renaming the file accordingly

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

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

これは、新しいファイルを作成したばかりで、その中にクラスやインターフェースを入力し始めたときに、より良い名前が付けられた場合に便利です。インテンションアクションを呼び出すには、キャレットを目的のクラスの名前に置き、Alt+Enter を押します。

抽出リファクタリング

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

パラメーターの導入

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

関数 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 コメントブロックが生成されます。これは、カスタムデフォルトパラメーター値を指定する必要がある場合に役立ちます。JSDoc 公式サイト(英語)の詳細を参照してください。
新しいパラメーターの型（オプションまたは必須）を選択し、該当する場合はデフォルト値を指定します。
- オプションのパラメーターチェックボックスが選択されている場合、パラメーターはファンクション本体のデフォルト値で初期化されます。
  上のパラメーターの紹介の例 1 を参照してください。
- オプションのパラメーターチェックボックスをオフにすると、既定のパラメーター値が既存の関数呼び出しを介して渡されます。新しい関数シグネチャーに従ってすべての関数呼び出しが変更され、パラメーターの初期化が関数本体に追加されます。
  上のパラメーターの紹介の例 2 を参照してください。
最初は、IntelliJ IDEA はデフォルト値としてリファクタリングが呼び出される式を受け入れます。ほとんどの場合、変更する必要はありません。それでも必要な場合は、JSDoc コメントに @param <parameter name> - <default value> の形式で別のデフォルト値を指定してください。
リスト内でそれをダブルクリックして提案されたパラメーター名の 1 つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。
また、ES6 コードでは、i2 = i2 || 1; の代わりに新しいデフォルト関数のパラメーター構文 function calculate_sum(i, i2 = 1) が適用されます。https://developer.mozilla.orgWeb サイト(英語)のデフォルト機能パラメーターの詳細を参照してください。

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

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

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

デフォルトでは、IntelliJ IDEA はインプレースモードでパラメーター導入リファクタリングを実行します。パラメーターの導入ダイアログを使用するには、設定 / 環境設定ダイアログ 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 を押します。

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

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

定数の導入

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

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

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

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

                class AccountingDepartment {
                    name;

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

                    printMeeting() {...
                    }

                    generateReports() {...
                    }
                }
            

IntelliJ IDEA は、新しい定数をローカルとして導入し、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: スコープを選択せずに定数を導入する

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

                        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 を押します。

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

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

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

メソッドの抽出

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

以下の例では、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...");
                        }
                    }
                

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

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

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

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

IntelliJ IDEA では、インテンションアクション（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 を参照してください。
新しいコンポーネントの名前を入力します。この名前がすでに使用されているか無効である場合、IntelliJ IDEA は警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。

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

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

例 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: 関数の名前の変更、デフォルトパラメーターの追加、関数呼び出しへのパラメーターの伝播
この例では、関数 result() の名前が generate_result() に変更されています。デフォルトのパラメーター input が値 100 とともに追加されます。新しいパラメーターは、generate_result() で ES6 言語レベルの場合は function generate_result(input = 100) {}、ES5 の場合は input = input || 100 の形式で初期化されます。 input パラメーターは呼び出し側の関数 show_result() を通じて伝達されるため、それに応じて関数呼び出しが変更されます。

                    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 をクリックします。

変更をプレビューリファクタリング

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

最終更新日: 2021 年 1 月 25 日

JavaScript のリファクタリング

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

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

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

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

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

関数、クラス、または変数の名前を変更する

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

クラスの名前を保持し、準拠するファイルを含む

抽出リファクタリング

パラメーターの導入

パラメーターを導入する

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

変数の導入

変数を導入する

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

定数の導入

定数を導入する

フィールドの導入

フィールドを紹介する

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

メソッドの抽出

関数を抽出する

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

スーパークラスの抽出

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

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

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

元の割り当てを維持する

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

Vue コンポーネントの抽出

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

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

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

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

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

関数の名前を変更する

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

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

変更をプレビューリファクタリング

関連ページ：