WebStorm 2019.2ヘルプ

JavaScript のリファクタリング

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

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

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

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

  1. 移動するシンボルを選択します。

  2. F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 移動を選択します。あるいは、リファクタリング | リファクタリングを選択するか Ctrl+Shift+Alt+Tを押してから、リストから移動を選択します。

    モジュール・メンバーの移動ダイアログが開きます。

  3. 宛先ファイルを指定し、移動するメンバーを選択します。

  4. デフォルトでは、WebStormはメンバーの可視性を必要なレベルまで自動的に上げます。可視性レベルを変更しない場合は、可視性のそのままをクリックします。

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

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

サンプル: クラスメソッドをスーパークラスに移動する
抽象クラス Departmentを拡張するクラス AccountingDepartment があるとします。

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

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

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

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

  1. メンバーをプルアップするクラス内の任意の場所にキャレットを配置します。

  2. メインメニューまたはコンテキストメニューからリファクタリング | メンバーのプル・アップを選択します。メンバーのプル・アップダイアログが開きます。

  3. リストから、メソッドを移動するスーパークラスを選択します。

  4. メソッドをプルアップするには、引き上げるメンバーリストでそのメソッドの横にあるチェックボックスを選択します。

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

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

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

  1. エディターで、名前を変更する記号を選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。

  2. 開いている名前変更ダイアログに、シンボルの新しい名前を入力します。

  3. 必要に応じて、コメントと文字列内を検索および文字列の使用箇所を検索チェックボックスを選択して、コメント、文字列リテラル、およびテキストの関数またはクラスの使用方法を変更します。

  4. 必要に応じて、変更をプレビューして適用します

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

  1. エディターでパラメータを選択して Shift+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 名前の変更を選択します。

  2. 選択したパラメータを囲む赤いキャンバスのあるフィールドに、新しいパラメータ名を入力します。

  3. リファクタリングを実行するには、Enter を押します。

クラスの名前を保持し、準拠してファイルを格納する

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

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

ws_js_refactoring_rename_file_intention_custom_naming_convention.png

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

抽出リファクタリング

WebStormは、パラメータ、変数、定数、フィールド、メソッド、および関数を導入するためのさまざまな抽出リファクタリングを提供します。これらのリファクタリングを実行するには、リファクタリングする式を選択し、リファクタリング | 抽出 | <target>を選択します。式全体を選択するか、カーソルをその中に置くことができ、WebStormが選択に役立ちます。

パラメーターの導入

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

関数 calculate_sum(i)にハードコードされた 1 を持つコードがあるとします。パラメーターの導入リファクタリングでは、このハードコードされた 1i2 パラメータに置き換えることができます。新しい 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)); }

パラメータを抽出するには

  1. エディターで、パラメータに変換する式の中にキャレットを置き、Ctrl+Alt+P を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 抽出 | パラメーターを選択します。

  2. 現在のカーソル位置で複数の式が検出された場合は、リストから必要な式を選択してください。

    ws_js_extract_parameter_select_expression.png

  3. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択してください。

    ws_js_extract_parameter_multiple_occurrences.png

    最後に、リファクタリングを設定するためのポップアップが表示されます。

    ws_js_extract_parameter_specify_parameter_name_and_type.png
  4. JSDoc の生成を選択すると、JSDocコメントブロックが生成されます。これは、カスタムデフォルトパラメータ値を指定する必要がある場合に役立ちます。JSDoc(英語)の公式Webサイトから詳細を学びましょう。

  5. 新しいパラメータのタイプ( オプションまたは必須 )を選択し、該当する場合はデフォルト値を指定します。

    • オプションのパラメータチェックボックスが選択されている場合、パラメータはファンクション本体のデフォルト値で初期化されます。

      上のパラメータの抽出例1を参照してください。

    • オプションのパラメータチェックボックスをオフにすると、既定のパラメータ値が既存の関数呼び出しを介して渡されます。新しい関数シグネチャーに従ってすべての関数呼び出しが変更され、パラメータの初期化が関数本体に追加されます。

      上の抽出パラメータの例2を参照してください。

    最初は、WebStormはデフォルト値としてリファクタリングが呼び出される式を受け入れます。ほとんどの場合、変更する必要はありません。それでも必要な場合は、JSDocコメントに @param <parameter name> - <default value>の形式で別のデフォルト値を指定してください。

  6. リスト内でそれをダブルクリックして提案されたパラメータ名の1つを受け入れるか、赤いキャンバスを使用してフィールドにカスタム名を指定します。準備ができたら Enter を押します。

    ws_js_extract_parameter_result.png
    また、ES6コードでは、i2 = i2 || 1;の代わりに新しいデフォルト関数のパラメータ構文 function calculate_sum(i, i2 = 1) が適用されます。https://developer.mozilla.orgWebサイト(英語)のデフォルト機能パラメータの詳細を参照してください。

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

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

  • リファクタリングの結果をプレビューする
    ダイアログでは、プレビューをクリックして検索ツールウィンドウの専用タブで予想される変更を調べることができます。インプレースモードでは、この機能は利用できません。

  • デフォルトのパラメータ値の指定
    ダイアログで、WebStormはフィールドにデフォルトのパラメータ値を提案します。ここで提案を受け入れるか、または別の値を指定できます。インプレースモードでは、WebStormはリファクタリングが呼び出された式をデフォルトのパラメータ値として扱います。別の値を指定するには、JSDocコメントブロックを使う必要があります。

デフォルトでは、WebStormはインプレースモードでパラメータ抽出リファクタリングを実行します。パラメーターの導入ダイアログを使用するには、設定/環境設定ダイアログ(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: 変数を抽出し、関数の外で宣言する
変数 appNamenavigator.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"; }

変数を抽出するには

  1. エディターで、変数に変換する式を選択して Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 抽出 | 変数を選択します。

  2. 現在のカーソル位置で複数の式が検出された場合は、リストから必要な式を選択してください。

    ws_js_refactoring_extract_variable_inplace_select_expression.png
  3. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換するまたは出現箇所をすべて置換を選択してください。

    ws_js_refactoring_extract_variable_inplace_multiple_occurrences.png

    最後に、リファクタリングを設定するためのポップアップが表示されます。

  4. リストから、新しい変数の宣言に使用するステートメントを選択します。

    ws_js_refactoring_extract_variable_inplace_choose_scope_type.png
  5. リスト内でそれをダブルクリックして提案された変数名の1つを受け入れるか、フィールドにカスタム名を指定します。準備ができたら Enter を押します。

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

上で説明したように (インプレースモードで)エディター内で変数を直接抽出することも、変数の抽出ダイアログを使用することもできます。デフォルトでは、WebStormはインプレースモードで変数の導入リファクタリングを実行します。変数の導入ダイアログを使用するには、設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般をクリックします。開いた一般ページで、リファクタリングエリアのインプレース・モードを使用可能にするチェックボックスをクリアします。

フィールドの導入

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

以下の例では、同じフィールド _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; } }

フィールドを抽出するには

  1. エディターで、フィールドに変換する式を選択して Ctrl+Alt+F を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 抽出 | フィールドを選択します。フィールドの導入ダイアログが開きます。

  2. リストから提案された名前の1つを受け入れるか、カスタム名を入力します。

  3. 新しいフィールドをどこで初期化するかを選択します。

    • 現在のメソッド、上記の例1を参照してください。

    • フィールド宣言、上記の例2を参照してください。

    • クラス・コンストラクター、上記の例3を参照してください。

    ws_js_extract_field_dialog_1.png

メソッドの抽出

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

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

関数を抽出するには

  1. エディターで、関数に変換するコードを選択して Ctrl+Alt+M を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 抽出 | メソッドを選択します。

  2. 選択した式が関数内にある場合は、リストから宛先スコープを選択してください。

    • グローバルを選択した場合、抽出された関数は関数の外で宣言されます。上の例1を参照してください。

    • 現在の囲み関数内で抽出された関数を定義するには、関数<現在の包含関数名>を選択します。上記の例3を参照してください。

  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 を抽出し、その中に printNameName フィールドを含めることができます。
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..."); } }

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

  1. コンテキストメニューのクラスから呼び出したクラス内の任意の場所にカーソルを置きます。

  2. メインメニューまたはコンテキストメニューからリファクタリング | 抽出 | スーパークラスを選択します。スーパークラスの抽出ダイアログが開きます。

  3. 新しいスーパークラスの名前を指定し、そこに含めるクラスメンバーの横にあるチェックボックスを選択します。必要に応じて、抽象化したいメンバーにマークを付けます。

  4. 宛先ファイルフィールドに、新しいクラスが配置されるファイルの場所を指定します。デフォルトでは、フィールドにはリファクタリングが呼び出された現在のファイルへのパスが表示されます。

  5. スーパークラスの抽出を選択します。WebStormは新しいクラスを作成し、extendsでソースクラスをマークします。
    スーパークラスを作成し、ソースクラスへの参照をメソッドのパラメータでスーパークラスへの参照に置き換えるには、スーパークラスを抽出し、可能な限り使用するを選択します。WebStormは、検索ツールウィンドウのリファクタリング・プレビューペインで提案された変更を示しています。

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

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

WebStormでは、専用のリファクタリング、インテンションアクション、またはクイックフィックスを使用して、配列またはオブジェクトから複数の値を取得するコードの断片を単純化できます。

  1. 配列またはオブジェクトからの値にキャレットを配置します。

  2. Ctrl+Shift+Alt+T を押して、リファクタリングポップアップからオブジェクトまたは配列の非構造化を選択します。

    あるいは、コンテキストメニューまたはメインメニューからリファクタリング | 抽出 | オブジェクトまたは配列の非構造化を選択します。

  3. オブジェクトのすべての出現箇所を置き換えるのか、それとも現在のものだけを置き換えるのかを指定します。

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

  • 配列またはオブジェクトからの値にキャレットを置き、Alt+Enterを押してから、リストからオブジェクト分割代入に置換するまたは配列分割代入に置換するを選択します。

    配列またはオブジェクトからの値のいくつかが使用されていない場合、これらの要素はスキップされます。

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

元の割り当てを維持する

  • Alt+Enter を押してからオブジェクトまたは配列の分割代入を導入するを選択します。

    このインテンションアクションは、Reactクラスコンポーネントを操作するときに非常に便利です。

関数のデコンストラクターパラメータを生成する

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

他のいくつかのWebStormアクションもデフォルトで分割代入を行います。例:CommonJSモジュールを含むNode.jsアプリケーションで機能する「require()」を挿入クイックフィックスを検討してください。詳細はNode.jsを参照してください。

Destructuring: Insert ‘require()’ quick-fix in Node.js app

Vue コンポーネントの抽出

Vue コンポーネントの抽出リファクタリングを使用すると、既存のVue.js(英語)コンポーネントをコピーして貼り付けなくても抽出できます。このリファクタリングはインプレースでのみ機能するため、エディター: 一般ページでインプレース・モードを使用可能にするチェックボックスが選択されていることを確認してください。

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

  1. 抽出するコードフラグメントを選択して、そのコンテキストメニューまたはメインメニューからリファクタリング | 抽出 | Vue コンポーネントの抽出を選択します。

    または、専用のインテンションアクションを使用します。抽出するテンプレートフラグメントを選択し、Alt+Enterを押してから、リストからVue コンポーネントの抽出を選択します。詳細はVue.jsを参照してください。

  2. 新しいコンポーネントの名前を入力します。この名前が既に使用されているか無効である場合、WebStormは警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。

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

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

例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; }

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

  1. エディターで、インラインにするシンボルにキャレットを置き、Ctrl+Alt+N を押すか、コンテキストメニューからリファクタリング | インライン化を選択するか、メインメニューから開きます。

  2. 選択したシンボルに対応するインライン化ダイアログで、インラインリファクタリングを確認します。

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

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

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

以下の例は、シグネチャーの変更リファクタリングを実行するためのさまざまな方法を示しています。すべての場合において、関数 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)で、パラメータの表とその右側のボタンを使用します。

    • 新しいパラメータを追加するには、the Add buttonAlt+Insert)をクリックし、新しいパラメータの名前とデフォルト値、または関数呼び出しで渡す値を指定します。

      上記の例1および例2を参照してください。

    • パラメータを削除するには、対応する行のいずれかのセルをクリックし、the Delete buttonAlt+Delete)をクリックします。

    • パラメータの順序を変更するには、the Previous Occurence buttonAlt+Up)と the Next Occurence buttonAlt+Down)を使用します。

    • パラメータの名前を変更するには、名前フィールドを編集します。

    • 必要に応じて、新しいパラメータを現在の関数を呼び出す関数に伝播します。

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

  1. シグネチャーの変更ダイアログ(Ctrl+F6)でパラメータを選択し、the Propagate Parameter buttonをクリックします。新規パラメーターを伝播するメソッドの選択ダイアログが開きます。左側のペインには、関数呼び出しの階層が表示されます。関数を選択すると、右側のペインには、そのコードとそれが呼び出す関数のコードがそれぞれ呼び出し元メソッドおよび呼び出し先メソッドフィールドに表示されます。

    上の例3を参照してください。

  2. 左側のペインで、パラメータを伝播する機能の横にあるチェックボックスを選択し、OKをクリックします。

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

  1. シグネチャーの変更ダイアログで、プレビューをクリックします。

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

最終更新日: 2019年7月22日

関連事項

関連ページ:

コードのリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードをしっかりとしたdryに保ち、保守を容易にします。WebStormは、影響を受けるコード参照を自動的に追跡して修正する、さまざまなコードリファクタリングを提供しています。ソース・コ...

名前変更ダイアログ

<シンボル名>とその使用箇所の名前をこのフィールドには、シンボルの新しい名前を指定します。参照の検索このチェックボックスは、ファイルの名前変更およびディレクトリー名の変更リファクタリングでのみ使用できます。このチェックボックスをオフにすると、WebStormはそのファイルやフォルダー自体...

コードスタイル: JavaScript

WindowsとLinux用のmacOS用このページを使用して、JavaScriptファイルの書式設定オプションを構成します。右側のプレビューペインで結果を表示します。タブとインデント:タブ文字を使用このチェックボックスが選択されている場合、タブ文字はインデントとコードの再フォーマットに使用されます...

一般

設定/環境設定ダイアログの一般ページを使用して、エディターの動作を設定し、その表示をカスタマイズします。マウス動作の詳細ダブルクリックで選択したときに「キャメルハンプ」の単語設定を尊重するダブルクリックして単語を選択したときに、WebStormがキャメルハンプの選択を呼び出すようにするには、このチェ...

JavaScript

WebStormを使用すると、JavaScriptおよびNode.jsを使用して最新のWeb、モバイル、およびデスクトップアプリケーションを開発できます。WebStormは、JavaScriptおよびTypeScriptプログラミング言語、ReactおよびAngularフレームワークをサポートし、W...

Node.js

Node.jsはサーバーサイドでJavaScriptを実行するための軽量のランタイム環境です。WebStormはNode.jsと統合して、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、および保守を支援します。npmパッケージを管理するため、またはJavaScript lin...