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