WebStorm 2020.1ヘルプ

JavaScript のリファクタリング

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

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

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

Move a class, a function, or a variable

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

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

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

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

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

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

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

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

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

Move the methods of a class to a superclass

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

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

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

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

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

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

Rename a function, a class, or a variable

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

  2. In the 名前変更 dialog that opens, type the new name of the symbol.

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

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

Rename a parameter

  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はそれに応じて関数の宣言と呼び出しを更新します。新しいパラメータのデフォルト値は、関数本体の中で初期化することも、関数呼び出しを渡すこともできます。

Suppose you have a piece of code with a hardcoded 1 in the function calculate_sum(i) . With the Introduce Parameter refactoring, you can replace this hardcoded 1 with a i2 parameter. The new i2 parameter can be extracted as optional or as required

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

Introduce a parameter

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

    または、次のいずれかを実行します。

    • Ctrl+Shift+Alt+T を押してパラメーターの導入を選択します。

    • メインメニューからリファクタリング | 抽出 | パラメーターを選択します。

  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 official website(英語)の詳細を参照してください。

  5. Choose the type of the new parameter (optional or required) and specify its default value, if applicable:

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

      上の パラメータの紹介の例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サイト(英語)のデフォルト機能パラメータの詳細を参照してください。

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

You can extract a parameter right in the editor (in the in-place mode) as described above or use the パラメータの紹介ダイアログ . These two approaches are rather similar, the difference is as follows:

  • リファクタリングの結果をプレビューします
    In the dialog, you can click プレビュー and examine the expected changes in the dedicated tab of the 検索 tool window. In the in-place mode, this functionality is not available.

  • デフォルトのパラメータ値の指定
    In the dialog, WebStorm suggests the default parameter value in the field where you can accept the suggestion or specify another value. In the in-place mode, WebStorm treats the expression where the refactoring is invoked as the default parameter value. To specify another value, you have to use a JSDoc comment block.

By default, WebStorm runs the Introduce Parameter refactoring in the in-place mode. To use the パラメーターの導入 dialog, open the 設定/環境設定 dialog Ctrl+Alt+S , go to エディター | コード編集 , and select the In the modal dialogs option in the リファクタリング area.

変数を導入する

変数を導入するリファクタリングを使用して、式を関数スコープ変数 (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"; }

Introduce a variable

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

    または、次のいずれかを実行します。

    • Ctrl+Shift+Alt+T を押して変数を導入するを選択します。

    • メインメニューからリファクタリング | 抽出 | 変数を選択します。

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

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

You can extract a variable right in the editor (in the in-place mode) as described above or use the 変数の抽出ダイアログ . By default, WebStorm runs the Introduce Variable refactoring in the in-place mode. To use the 変数の導入 dialog, open the 設定/環境設定 dialog Ctrl+Alt+S , go to エディター | コード編集 , and select the In the modal dialogs option in the リファクタリング area.

定数を導入する

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

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

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

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

class AccountingDepartment { name; printName() { console.log("Department name: " + this.name); } printMeeting() {... } generateReports() {... } }

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

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

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

Introduce a constant

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

    または、次のいずれかを実行します。

    • Ctrl+Shift+Alt+T を押して定数を導入するを選択します。

    • メインメニューからリファクタリング | 抽出 | 定数を選択します。

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

    Introduce Constant: select the expression
  3. クラス内からリファクタリングが呼び出される場合、読み取り専用フィールドを導入するか、新しい定数のスコープを選択します。例1を参照してください。

    Introduce Constant: select scope

    グローバル定数の場合、選択された式の複数の出現が見つかります。複数の出現箇所が見つかりました リストから この出現箇所だけを置換する または出現箇所をすべて置換を選択します。

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

    Introduce Constant: select the name

フィールドの導入

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

以下の例では、同じフィールド _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 を押すか、コンテキストメニューからリファクタリング | フィールドの導入を選択します。

    または、次のいずれかを実行します。

    • Ctrl+Shift+Alt+T を押してフィールドの導入を選択します。

    • メインメニューからリファクタリング | 抽出 | フィールドを選択します。

  2. In the popup, choose where the new field will be initialized:

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

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

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

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

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

By default, WebStorm runs the Introduce Field refactoring right in the editor (in the in-place mode), as described above

To use the フィールドの導入ダイアログ , open the 設定/環境設定 dialog Ctrl+Alt+S , go to エディター | コード編集 , and select the In the modal dialogs option in the リファクタリング area.

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 を押すか、コンテキストメニューからリファクタリング | メソッドの抽出を選択します。

    または、次のいずれかを実行します。

    • Ctrl+Shift+Alt+T を押してメソッドの抽出を選択します。

    • メインメニューからリファクタリング | 抽出 | メソッドを選択します。

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

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

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

  3. 他のオプションを使用して関数の抽出ダイアログを開くには、Ctrl+Alt+M をもう一度押します。このダイアログでは、抽出された関数を、生成された関数宣言で宣言する(英語)か、式内(英語)宣言(英語)するかを選択できます。 上記の例を参照してください。

Open the Extract Function dialog by default

  • open the 設定/環境設定 dialog Ctrl+Alt+S , go to エディター | コード編集 , and select the In the modal dialogs option in the リファクタリング area.

スーパークラスの抽出

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

クラス 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. コンテキストメニューのperclassクラスから取得するクラス内の任意の場所にキャレットを配置します。

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

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

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

  5. Choose スーパークラスの抽出 . WebStorm creates a new class and marks the source class with extends .
    To create a superclass and replace the references to the source class with references to the superclass in parameters of methods, choose スーパークラスを抽出し、可能な限り使用します。 WebStorm shows the proposed changes in the リファクタリング・プレビュー pane of the 検索 tool window.

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

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

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

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

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

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

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

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

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

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

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

Keep the original assignments

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

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

Generate destructuring parameters for a function

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

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

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

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 щn the コード編集 page of the 設定/環境設定 dialog Ctrl+Alt+S .

Extract a Vue.js component

  1. 抽出するコードフラグメントを選択し、コンテキストメニューからリファクタリング | Vue コンポーネントの抽出を選択するか、メインメニューから リファクタリング | 抽出 | 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; }

Run an Inline refactoring

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

Invoke Change Signature

  • エディターで、リファクタリングする関数の名前内にキャレットを配置して Ctrl+F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | シグネチャーの変更を選択します。シグネチャーの変更ダイアログが開きます。

Rename a function

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

Manage the function parameters

  • シグネチャーの変更ダイアログCtrl+F6では、パラメーターのテーブルとその右側のボタンを使用します。

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

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

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

    • パラメーターの順序を変更するには、the Previous Occurence button Alt+Up および the Next Occurence button Alt+Downを使用します。

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

    • If necessary, propagate the new parameter to the functions that call the current function.

Propagate a parameter along the hierarchy of calls

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

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

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

Preview the changes and complete the refactoring

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

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

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

関連ページ:

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

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

コード・スタイル: JavaScript

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

フィールドの導入ダイアログ

名前このフィールドに、新しいフィールドの名前を指定します。初期化この領域では、新しいフィールドが初期化される場所を選択します。最終更新日: 2019年9月17日定数の抽出ダイアログインクルード・ファイルの抽出ダイアログ関連事項:プロシージャー:JavaScriptでフィールドを抽出する、TypeSc...

JavaScript

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

Node.js

Node.jsは、ブラウザの外部、たとえばサーバーやコマンドラインでJavaScriptを実行するための軽量なランタイム環境です。WebStormはNode.jsと統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、およびメンテナンスを支援します。アプリケーションのローカ...

Vue.js

WebStormは、ユーザーインターフェースと高度なシングルページアプリケーションの開発を目的としたVue.jsフレームワークと統合されています。始める前に:お使いのコンピューターにNode.jsがインストールされていることを確認してください。プラグインのページでVue.jsバンドルプラグインが有効...