JavaScript のリファクタリング

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

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

ファイルやフォルダーの移動に加えて、RubyMine では JavaScript トップレベルシンボルも移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。

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

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

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

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

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

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

                    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...");
                        }
                    }
                
    

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

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

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

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

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

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

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

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

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

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

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

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

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

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

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

定数名の変更

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

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

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

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();
            
     

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

シンボルの動的な使用例を表示するには、を押してください。
デフォルトでは、リファクタリングプレビューツールウィンドウで、シンボルのすべての動的な使用が除外としてマークされ、コード内の <symbol> への動的参照；ノードにグループ化されます。使用箇所にリファクタリングを適用するには、コンテキストメニューから含めるを選択します。

リファクタリングの抽出

RubyMine では、パラメーター、変数、定数、フィールド、メソッド、関数の導入用にさまざまな抽出リファクタリングを提供しています。これらのリファクタリングを実行するには、リファクタリングする式を選択し、リファクタリング | <target> を選択します。式全体を選択するか、その中にキャレットを配置すると、RubyMine が選択作業をサポートします。

パラメーターの導入

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

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

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

新しいパラメーター i2 がオプションのパラメーターとして抽出されます。新しいパラメーターは 合計を計算(i) の本体で初期化され、 合計を表示() の 合計を計算(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 が必須パラメーターとして抽出され、 合計を表示() 内の 合計を計算(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 を参照してください。
最初に、RubyMine はリファクタリングが呼び出された式をデフォルト値として受け入れます。ほとんどの場合、変更する必要はありません。それでも必要な場合は、JSDoc コメントに @param <パラメーター名> - <デフォルト値> の形式で別のデフォルト値を指定してください。
候補リストからパラメーター名をダブルクリックして選択するか、キャンバスのフィールドにカスタム名を指定してください。準備ができたら Enter を押します。
また、ES6 コードでは、 i2 = i2 || 1; の代わりに新しいデフォルト関数のパラメーター構文 関数合計を計算(i, i2 = 1) が適用されます。 https://developer.mozilla.orgWeb サイトのデフォルト関数型パラメーターの詳細を参照してください。

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

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

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

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

変数の導入

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

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

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

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

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

変数 文字列 は、 返却 ステートメントの '(' + this.値を取得() + ')' 式から抽出されます。新しい変数は、 Parenizor.メソッド('toString', 関数 ()) 内の let 宣言 ステートメントで宣言されています。

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

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

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

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

let 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";
}                    
     

let browserName = "N/A";
let 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 を選択して、定数を導入します。
候補リストからパラメーター名をダブルクリックして選択するか、キャンバスのフィールドにカスタム名を指定してください。準備ができたら Enter を押します。

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

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

定数の導入

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

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

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

"部門名 :" がハードコードされているメソッド 名前を出力() を持つクラス 会計部門 があるとします。

                class AccountingDepartment {
                    name;

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

                    printMeeting() {...
                    }

                    generateReports() {...
                    }
                }
            
   

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

                        class AccountingDepartment {
                            name;

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

                            printMeeting() {...
                            }

                            generateReports() {...
                            }
                        }
                    
     

                        const departmentName = "Department name: ";

                        class AccountingDepartment {
                            name;

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

                            printMeeting() {...
                            }

                            generateReports() {...
                            }
                        }

                    
     

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

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

                        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 を押して定数の導入を選択します。
- リファクタリング | 抽出 | 定数に進みます。
現在のキャレット位置で複数の式が検出された場合は、式リストから必要な式を選択します。
リファクタリングがクラス内から呼び出された場合は、readonly フィールドを導入するか、新しい定数のスコープを選択してください。例 1 参照。
グローバル定数の場合、選択された式の複数の出現が見つかります。複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択します。
候補リストからパラメーター名をダブルクリックして選択するか、キャンバスのフィールドにカスタム名を指定してください。準備ができたら Enter を押します。

フィールドの導入

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

以下の例では、同じフィールド _面積を計算 が導入されています。例は、導入されたフィールドを初期化する 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 を参照してください。
候補リストからパラメーター名をダブルクリックして選択するか、キャンバスのフィールドにカスタム名を指定してください。準備ができたら Enter を押します。

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

デフォルトでは、RubyMine はエディターで（インプレースモードで）フィールドの導入リファクタリングを上記のように実行します。

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

メソッドの抽出

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

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

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

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

例 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 宛先スコープが選択されています。

                        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 を押してメソッドの抽出を選択します。
- リファクタリング | 抽出 | メソッドに進みます。
選択したコード箇所は、一連のステートメントまたはコードのどこかで使用される式です。
選択した式が関数内にある場合は、リストから宛先スコープを選択してください：
- グローバルを選択すると、抽出された関数は関数の外部で宣言されます。上記の例 1 を参照してください。
- 現在の囲み関数内で抽出された関数を定義するには、関数 <現在の包含関数名> を選択します。上記の例 3 を参照してください。
抽出する関数の名前を指定してください。

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

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

スーパークラスの抽出

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

クラス 会計部門 を持っていて、そこからの 名前を出力() メソッドが再利用されることを期待しているとします。

                    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...");
                        }
                    }
                
   

スーパークラス 部門 を抽出し、その中に 名前を出力 と 名前 フィールドを含めることができます。

                    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...");
                        }
                    }
                
   

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

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

オブジェクトまたは配列の非構造化を導入

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

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

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

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

元の割り当てを維持する

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

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

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

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

インラインリファクタリングは抽出リファクタリングと対極にあります。

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

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

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

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

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

インラインメソッド/インライン関数リファクタリングは、メソッドや関数の本体を呼び出し元（複数可）に配置し、そのメソッド／関数自体は削除されます。

以下の例では、 合計() の本体が 乗算() と 除算() の本体に配置されています。

                    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 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | インライン化を選択します。

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

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

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

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

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

この例では、関数 結果() が 結果を生成() に名前変更され、パラメーター 入力 が追加され、値 100 がパラメーターとして関数呼び出しに渡されます。

                    function result() {
                    }

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

                    function generate_result(input) {
                    }

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

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

この例では、関数 結果() は 結果を生成() に名前変更されています。デフォルトパラメーター 入力 が値 100 で追加されます。新しいパラメーターは、 結果を生成() で ES6 言語レベルの場合は 関数結果を生成(入力 = 100) {} 、ES5 の場合は 入力 = 入力 || 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 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | シグネチャーの変更を選択します。「シグネチャーの変更」ダイアログが開きます。

Rename a function

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

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

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

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

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

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

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

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

クラス、関数、定数変数、文字列、オブジェクト、型の場合、 デフォルトをエクスポート ステートメントを名前付き エクスポート ステートメントに置き換え、対応する import ステートメントをそれに応じて更新することができます。

シンボルが再エクスポートされると、対応する エクスポート ステートメントも更新されます。

リファクタリングは、 デフォルトをエクスポート ステートメントと import ステートメントの両方から呼び出すことができます。

デフォルトをエクスポート ステートメントまたはエクスポート対象の名前にキャレットを置き、 Alt+Enter を押してデフォルトエクスポートを名前付きエクスポートに変換するを選択します。プレビューを切り替えるには、 Ctrl+Q を押します。
import ステートメント内で、インポート対象の名前にキャレットを置き、 Alt+Enter を押してデフォルトエクスポートを名前付きエクスポートに変換するを選択します。プレビュー（Ctrl+Q ）に、 import ステートメントがどのように更新されるかが表示されます。

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

クラス、関数、定数変数、文字列、オブジェクト、型の場合、名前付き エクスポート ステートメントを デフォルトをエクスポート ステートメントに置き換え、対応する import ステートメントをそれに応じて更新することができます。

リファクタリングは、 デフォルトをエクスポート ステートメントと import ステートメントの両方から呼び出すことができます。

エクスポート ステートメント内でエクスポートする項目の名前にキャレットを置き、 Alt+Enter を押して名前付きエクスポートをデフォルトエクスポートに変換する。を選択します。プレビューを切り替えるには、 Ctrl+Q を押します。
import ステートメント内で、インポート対象の名前にキャレットを置き、 Alt+Enter を押して名前付きエクスポートをデフォルトエクスポートに変換する。を選択します。プレビュー（Ctrl+Q ）に、 import ステートメントがどのように更新されるかが表示されます。

2026 年 11 月 9 日