React アプリケーションのリファクタリング
一般的な PhpStorm リファクタリングの他に、React アプリケーションでは、React コンポーネントに対して 名前変更を実行し、 コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。
コンポーネントの名前を変更する
以下は、1 つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。
同じ方法で、1 つのファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使用して別のファイルにインポートすることもできます。
コンポーネント名内にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューから を選択します。
React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
状態値の名前を変更する
状態値の名前を変更すると、PhpStorm は、対応する setter（React useState フック(英語)でこの状態値を更新する関数）の名前を変更することを提案します。
状態値の名前の中にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューからのメインメニューから を選択します。
新しい値の名前を指定して、 Enter を押します。 フォーカスは setter に移動し、そこで値の新しい名前が提案されます。 Enter を押して、提案を受け入れます。
コンポーネントを抽出する
既存のコンポーネントの render メソッドから JSX コードを抽出して、新しい React コンポーネントを作成できます。 新しいコンポーネントは関数またはクラスとして定義できます。React 公式 Web サイトの 関数コンポーネントとクラスコンポーネント を参照してください。 また、PhpStorm を使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動できます。
抽出するコードを選択し、コンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押してポップアップから コンポーネントの抽出 を選択するか、メインメニューから を選択してください。
開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。 デフォルトでは、機能コンポーネントが作成されます。 新しいコンポーネントをクラスとして定義する場合は、 クラス を選択します。
新しいコンポーネントと必要なインポートをすべて別のファイルに移動するには、 別のファイルに作成 チェックボックスを選択します。 デフォルトでは、新しいコンポーネントの名前を持つ新しいファイルが、現在のファイルと同じフォルダーに作成されます。 必要に応じて、 ターゲットファイル フィールドに別の名前を指定してください。
OK をクリックします。 PhpStorm は新しいコンポーネントを作成し、以前に選択したコード断片の代わりにそのコンポーネントへの参照を配置します。
オプション: PhpStorm が新しいコンポーネントに使用するコードテンプレートを変更します。 設定 ダイアログ (Ctrl+Alt+S) で、 に移動し、 Code タブを開き、必要に応じて 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 での構造化の詳細を参照してください。
