React アプリケーションのリファクタリング
一般的な PyCharm のリファクタリングに加えて、React アプリケーションでは React コンポーネントの 名前変更や コンポーネントの抽出も利用できます。
コンポーネントの名前を変更する
以下は、ファイル内で定義して使用されているコンポーネントの名前を変更する例です：
同様に、ファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使って別のファイルにインポートすることもできます：
コンポーネント名内にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューから を選択します。
React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。
状態値の名前を変更する
状態値の名前を変更すると、PyCharm は対応する setter（この状態値を React useState フック で更新する関数）の名前も変更することを提案します。
状態値の名前の中にキャレットを置き、 Shift+F6 を押すか、コンテキストメニューからのメインメニューから を選択します。
新しい値の名前を指定して、 Enter を押します。 フォーカスは setter に移動し、そこで値の新しい名前が提案されます。 Enter を押して、提案を受け入れます。
コンポーネントを抽出する
既存コンポーネントの render メソッド内の JSX コードを抽出して新しい React コンポーネントを作成できます。 新しいコンポーネントは関数またはクラスとして定義できます。詳細は React 公式サイトの Function and Class Components を参照してください。 You can also have PyCharm move the new component and all the required imports to a separate file.
抽出するコードを選択し、コンテキストメニューから を選択します。
Alternatively, press Ctrl+Alt+Shift+T and select コンポーネントの抽出 from the popup or go to in the main menu.
開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。 デフォルトでは、機能コンポーネントが作成されます。 新しいコンポーネントをクラスとして定義する場合は、 クラス を選択します。
To move the new component and all the required imports to a separate file, select the Create in separate file checkbox. By default, a new file with the name of the new component is created next to the current file, in the same folder. If necessary, specify another name in the Target file field.
OK をクリックしてください。 PyCharm creates a new component and places a reference to it instead of the previously selected code fragment.
オプション： PyCharm が新しいコンポーネント用に使用するコードテンプレートを変更します。 設定 ダイアログ (Ctrl+Alt+S) で、 に移動し、 コード タブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。
Convert a function to a class component
クラスコンポーネントに変換リファクタリングを使うと、PyCharm は変換する関数名で ES6 クラスを生成します。 このクラスは React .Component を拡張し、関数本体が移動される render() メソッドを含みます。 React オフィシャル Web サイト(英語)の詳細を参照してください。
変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、ポップアップから クラスコンポーネントに変換 を選択します。
Convert a class to a functional component
関数コンポーネントに変換リファクタリングを使うと、PyCharm は変換対象のクラス名で関数を生成し、 render() メソッドの内容を関数本体に移します。
変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、ポップアップから 関数コンポーネントに変換 を選択します。
React アプリケーションでの分割代入
構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。 この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。
React クラスコンポーネントを使用する場合は、 オブジェクト / 配列の分割代入を導入するインテンションアクションの使用を検討してください。 JavaScript での構造化の詳細を参照してください。
