WebStorm 2020.3 ヘルプ

JavaScript のリファクタリング

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

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

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

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

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

  2. F6 を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 移動を選択します。あるいは、リファクタリング | リファクタリングを選択するか Ctrl+Alt+Shift+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..."); } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ws_js_refactoring_rename_class_and_file.png

この提案を却下した場合は、後でファイルの名前変更 ... インテンションアクションを使用してファイルの名前を変更できます。別のインテンションアクションは、クラスを対応する名前の新しいファイルに移動することを提案します。推奨名の形式は、コードスタイル : 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 を押すか、コンテキストメニューからリファクタリング | パラメーターの導入を選択します。

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

    • Ctrl+Alt+Shift+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 公式サイト(英語)の詳細を参照してください。

  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 を押すか、コンテキストメニューからリファクタリング | 変数を導入するを選択します。

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

    • Ctrl+Alt+Shift+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 を押します。

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

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

定数を導入する

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

クラス内では、読み取り専用フィールドを導入したり、複数のスコープが適している場合はスコープを選択したりできます。他のコンテキストでは、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() {... } }
Introducing a local constant and declaring it inside the enclosing method
"
const departmentName = "Department name: "; class AccountingDepartment { name; printName() { console.log(departmentName + this.name); } printMeeting() {... } generateReports() {... } }
Introducing a global constant and declaring it outside a class

例 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 Constant refactoring

定数を導入する

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

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

    • Ctrl+Alt+Shift+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+Alt+Shift+T を押してフィールドの導入を選択します。

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

  2. ポップアップで、新しいフィールドを初期化する場所を選択します。

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

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

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

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

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

デフォルトでは、WebStorm は、フィールドを右(インプレースモードで)エディターでリファクタリング紹介実行上記のように。

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

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+Alt+Shift+T を押してメソッドの抽出を選択します。

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

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

    • global を選択すると、抽出された関数は関数の外部で宣言されます。上記の例 1 を参照してください。

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

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

    ws_js_extract_method_es6.png

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

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

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

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

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

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

オブジェクトまたは配列の分割代入を導入する

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

WebStorm では、インテンションアクション(Alt+Enterオブジェクト / 配列の分割代入に置き換えるアクションを使用すると、元の割り当てが削除されます。割り当てを保持するには、オブジェクト / 配列の破壊を導入するを使用して破壊を呼び出すことができます。

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

  1. 配列またはオブジェクトの値にキャレットを置き、Alt+Enter を押します。

  2. リストから、オブジェクト分割代入に置換するまたは配列分割代入に置換するを選択します。

    Destructuring with intention action: Replace with array destructuring

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

    Destructuring with intention action: items skipped

元の割り当てを維持する

  1. 配列またはオブジェクトの値にキャレットを置き、Alt+Enter を押します。

  2. リストから、オブジェクトの破壊を導入するまたは配列の破壊を導入するを選択します。

    Destructuring with intention action: Introduce array destructuring

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

    Destructuring with intention action: Introduce object destructuring in a React class

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

  1. 関数のパラメーターにキャレットを配置し、Alt+Enter を押します。

  2. リストから、パラメーターをオブジェクトに変換するを選択します。

    Destructuring with intention action: Convert parameters to object

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

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

Vue コンポーネントの抽出

Vue コンポーネントの抽出リファクタリングを使用すると、コピーや貼り付けを行わずに、既存のコンポーネントから新しい Vue.js(英語) コンポーネントを抽出できます。このリファクタリングはインプレースでのみ機能するため、設定 / 環境設定 Ctrl+Alt+Sエディター | コード編集ページでエディター内リファクタリングオプションが選択されていることを確認してください。

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

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

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

  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 button Alt+Insert をクリックして、新しいパラメーターの名前とそのデフォルト値、または関数呼び出しで渡される値を指定します。

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

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

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

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

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

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

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

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

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

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

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

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

最終更新日 :

関連ページ:

コードリファクタリング

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

コードスタイル : JavaScript-WebStorm

このページを使用して、JavaScript ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデント :タブ文字を使用このチェックボックスをオンにすると、タブ文字が使用されます。キーを押すと、インデント用、コードを再フ...

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

リファクタリング | フィールドの導入名前このフィールドに、新しいフィールドの名前を指定します。初期化この領域では、新しいフィールドが初期化される場所を選択します。最終更新日: 2020年7月22日定数の抽出ダイアログインクルード・ファイルの抽出ダイアログ

JavaScript

WebStorm を使用すると、JavaScriptおよびNode.jsを使用して最新の Web、モバイル、およびデスクトップアプリケーションを開発できます。WebStorm は、React、Angular、Vue.js、およびその他のフレームワークもサポートし、Web 開発用のさまざまなツールとの...

Node.js

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

Vue.js

Vue.jsは、ユーザーインターフェースと高度な単一ページアプリケーションを開発するためのフレームワークです。WebStorm は、個別のファイル、属性、プロパティ、メソッド、スロット名などで定義されたコンポーネントを含むコンポーネントのVue.js対応コード補完を使用して、HTML、CSS、Jav...