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

JavaScript のリファクタリング

リファクタリング(英語)は、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dry(英語)を維持しやすくします。

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

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

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

移動するシンボルを選択します。
F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 移動を選択します。あるいは、リファクタリング | リファクタリングを選択するかCtrl+Shift+Alt+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は他のファイルのインポートステートメントでこのファイルの名前を更新します。

この提案を却下した場合は、後でファイルの名前変更... インテンションアクションを使用してファイルの名前を変更できます。別のインテンションアクションは、クラスを対応する名前の新しいファイルに移動することを提案します。推奨名の形式は、コード・スタイル: 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+Shift+Alt+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+Shift+Alt+T を押して変数を導入するを選択します。
- メインメニューからリファクタリング | 抽出 | 変数を選択します。
現在のカーソル位置で複数の式が検出された場合は、式リストから必要な式を選択してください。
選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択してください。
最後に、リファクタリングを設定するためのポップアップが表示されます。
リストから、新しい変数の宣言に使用するステートメントを選択します。
- 関数スコープ変数(英語)を導入するためにvarを選択してください。
- ブロックスコープ変数(英語)を紹介しましょう選択して、上記例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() {...
    }
}
                    

const departmentName = "Department name: ";

class AccountingDepartment {
    name;

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

    printMeeting() {...
    }

    generateReports() {...
    }
}

                    

例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+Shift+Alt+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+Shift+Alt+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+Shift+Alt+T を押してメソッドの抽出を選択します。
- メインメニューからリファクタリング | 抽出 | メソッドを選択します。
選択されたコードフラグメントは、一連のステートメントまたはコードのどこかで使用される式です。
選択した式が関数内にある場合は、リストから宛先スコープを選択してください。
- グローバルを選択した場合、抽出された関数は関数の外で宣言されます。上の例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では、専用のリファクタリング、インテンションアクション、またはクイックフィックスを使用して、配列またはオブジェクトから複数の値を取得するコードの断片を単純化できます。

配列またはオブジェクトからの値にキャレットを配置します。
Ctrl+Shift+Alt+T を押して、リファクタリングポップアップからオブジェクトまたは配列の分解を選択します。
または、コンテキストメニューからリファクタリング | オブジェクトまたは配列の構造化の抽出を選択するか、メインメニューからリファクタリング | 抽出 | オブジェクトまたは配列の分解を選択します。
オブジェクトのすべての出現箇所を置き換えるのか、それとも現在のものだけを置き換えるのかを指定します。

元の割り当てを分割代入に置き換えるもう1つの方法は、オブジェクト/配列の分割代入に置き換えるインテンションアクションを使用することです。

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

元の割り当てを削除せずに分割を導入することもできます。

元の割り当てを保持する

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

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

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

Vue コンポーネントの抽出

The Extract Vue Component refactoring lets you extract new Vue.js(英語) components from existing ones without any copying and pasting. Note that this refactoring works only in-place, so make sure the エディター refactoring option is selected on the the エディター | コード編集 page of the 設定/環境設定 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をクリックします。

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

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

最終更新日: 2020年7月7日

JavaScript のリファクタリング

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

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

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

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

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

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

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

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

抽出リファクタリング

パラメーターの導入

パラメータを導入する

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

変数を導入する

変数を導入する

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

定数を導入する

定数を導入する

フィールドの導入

フィールドを紹介する

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

メソッドの抽出

関数を抽出する

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

スーパークラスの抽出

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

オブジェクトまたは配列の構造化の抽出

元の割り当てを保持する

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

Vue コンポーネントの抽出

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

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

インラインリファクタリングを実行する

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

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

関数の名前を変更する

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

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

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

関連ページ：