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