React アプリケーションのリファクタリング
一般的な WebStorm リファクタリングに加えて、React アプリケーションでは React コンポーネントの 名前変更や コンポーネントの抽出による新規コンポーネント作成が可能です。
コンポーネントの名前を変更する
以下は、1 つのファイルで定義され、使用されているコンポーネントの名前を変更する例です：
同様に、1 つのファイルで定義され、名前付きエクスポートを使用して別のファイルにインポートされたコンポーネントの名前も変更できます：
コンポーネント名内にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューから を選択します。
React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
状態値の名前を変更する
状態値の名前を変更すると、WebStorm は、対応する setter（React useState フックでこの状態値を更新する関数）の名前を変更することを提案します。
状態値の名前の中にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューからのメインメニューから を選択します。
新しい値の名前を指定して、 Enter を押します。 フォーカスは setter に移動し、そこで値の新しい名前が提案されます。 Enter を押して、提案を受け入れます。
コンポーネントを抽出する
既存コンポーネントの render メソッドから JSX コードを抽出して新しい React コンポーネントを作成できます。 新しいコンポーネントは関数またはクラスで定義でき、詳しくは React 公式サイトの 関数・クラスコンポーネント をご参照ください。 WebStorm で新しいコンポーネントと必要なすべてのインポートを別のファイルに移動することもできます。
抽出するコードを選択し、コンテキストメニューから を選択します。
あるいは、 Ctrl+Alt+Shift+T を押して、ポップアップから コンポーネントの抽出 を選択するか、メインメニューの に移動します。
開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。 デフォルトでは、機能コンポーネントが作成されます。 新しいコンポーネントをクラスとして定義する場合は、 クラス を選択します。
新しいコンポーネントと必要なすべてのインポートを別のファイルに移動するには、 別のファイルに作成 チェックボックスを選択してください。 デフォルトでは、新しいコンポーネント名のファイルが現在のファイルの隣、同じフォルダーに作成されます。 必要に応じて、 ターゲットファイル フィールドに別の名前を指定してください。
OK をクリックしてください。 WebStorm が新しいコンポーネントを作成し、以前に選択されたコード箇所の代わりにその参照を配置します。
オプション: WebStorm が新規コンポーネント用に使うコードテンプレートを変更できます。 設定 ダイアログ (Ctrl+Alt+S) で、 に移動し、 コード タブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。
関数をクラスコンポーネントに変換する
クラスコンポーネントに変換リファクタリングで、WebStorm は変換対象関数の名称で ES6 クラスを生成します。 このクラスは React .Component を拡張し、関数本体が移動される render() メソッドを含みます。 React オフィシャル Web サイト(英語)の詳細を参照してください。
変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、ポップアップから クラスコンポーネントに変換 を選択します。
クラスを関数コンポーネントに変換
関数コンポーネントに変換リファクタリングにより、WebStorm は変換対象クラス名の関数を生成し、 render() メソッドの内容を関数本体へ移動します。
変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、ポップアップから 関数コンポーネントに変換 を選択します。
React アプリケーションでの分割代入
構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。 この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。
React クラスコンポーネントを使用する場合は、 オブジェクト / 配列の分割代入を導入するインテンションアクションの使用を検討してください。 JavaScript での構造化の詳細を参照してください。
