JavaScript のリファクタリング

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

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

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

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

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

エディターで、名前を変更する関数、変数、パラメーターにキャレットを置くか、選択して、 Shift+F6 を押すか、コンテキストメニューから名前変更を選択します。
JetBrains Rider がコメントや文字列内でシンボルの使用を検出した場合、これらの使用箇所も名前変更するかどうかを指定してください。
キャンバス付きのフィールドに、関数、変数、パラメーターの新しい名前を入力します。
あるいは:
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();
            
     

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

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

抽出リファクタリング

JetBrains Rider は、パラメーター、変数、定数、フィールド、メソッド、関数の導入にさまざまな抽出リファクタリングを提供します。これらのリファクタリングを実行するには、リファクタリング対象の式を選択してリファクタリング | <target> を選択します。式全体を選択するか、式内の任意の場所にキャレットを置くと、JetBrains Rider が選択をサポートします。

パラメーターの導入

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

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

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

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

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

デフォルトでは、JetBrains Rider はインプレースモードで Introduce Parameter リファクタリングを実行します。パラメーターの導入ダイアログを使用するには、設定ダイアログ（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 ステートメントを使用して宣言されます。

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

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

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

定数の導入

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

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

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

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

                class AccountingDepartment {
                    name;

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

                    printMeeting() {...
                    }

                    generateReports() {...
                    }
                }
            
   

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

                        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: スコープを選択せずに定数を導入する

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

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

フィールドの導入

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

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

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

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

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

メソッドの抽出

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

以下の例では、 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() 関数内にあります。 function 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 ）を開き、エディター｜コード編集に移動して、リファクタリング領域でモーダルダイアログ内オプションを選択します。

スーパークラスの抽出

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

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

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

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

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

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

JetBrains Rider では、インテンションアクション 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: 関数のインライン化

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

以下の例では、 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 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | シグネチャーの変更を選択します。「シグネチャーの変更」ダイアログが開きます。

Rename a function

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

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

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

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

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

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

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

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

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

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

リファクタリングは、 export default ステートメントと import ステートメントの両方から呼び出すことができます。

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

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

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

リファクタリングは、 export default ステートメントと import ステートメントの両方から呼び出すことができます。

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

2026 年 6 月 12 日