react-refactor-componentlisted

# Reactコンポーネントリファクタリング 指示されたReactコンポーネントを、 `react-component-convention`スキルで定めるルールに沿ってリファクタリングします。 ## 使い方 ```text /react-refactor-component <ファイルパス または コンポーネント名> ``` `$ARGUMENTS`で指定されたコンポーネントと、 その周辺で同じファイルに同居している関連コンポーネントを読み取り、 ルール違反を検出してリファクタリングを行います。 `$ARGUMENTS`が省略された場合は、 IDEで開いているファイル/ユーザーが直前に話題にしたコンポーネントを対象とします。 ## ワークフロー ### 対象を読む `$ARGUMENTS`で指定されたコンポーネントファイルをReadで開きます。 ファイル名から責務がわからない場合は、import元の使用箇所もあわせて確認します。 ### 違反項目を洗い出す 以下のチェックリストでコードを点検し、違反箇所を列挙します。 - [ ] 構造順序: import → デザイン定義 → props定義 → コンポーネントの順序になっているか - [ ] 1ファイル1コンポーネント: ファイル内のコンポーネントは1つだけか - [ ] 1ファイル1コンポーネント補足: 新規または大幅書き換え対象のファイル名が`index.tsx`/`index.ts`ではないか - [ ] 肥大化: 関数の冒頭から最初のJSX、つまり`return`の直前までが肥大化していないか - [ ] 肥大化: JSX内に重複する構造、深い条件分岐、外側の準備変数の多さ、複数ドメイン概念の混在などの読みづらさが同居していないか 加えてweb-tasukeプラグインの他スキルで定義されているTypeScriptの規約にも違反していないか確認してください。 ### 変更の見取り図をユーザーに提示する リファクタリングを実行する前に、何をどう変更するつもりかを箇条書きで提示し、合意を取ります。 具体的には次を含めます。 - 切り出す予定のカスタムフック/子コンポーネントとそのファイル名 - 元ファイルの最終的な構成、デザイン定義・props・コンポーネントの配置 - リネームが発生する場合は旧ファイル名 → 新ファイル名のマッピング フック名やファイル名の好み、分割粒度などユーザーの方針判断が必要な箇所があれば、 ここでAskUserQuestionを使って確認します。 ### 段階的に編集する 合意が取れたらEdit/Writeでリファクタリングを行います。次の順序で進めると壊れにくいです。 1. カスタムフックや子コンポーネントなど切り出し先の新規ファイルを作成する 2. 元ファイルから切り出した実装を取り除き、新規ファイルからimportする 3. デザイン定義 → props → コンポーネントのファイル順序を整える 4. ファイル名のリネームが必要な場合は、それを最後に行い、import元をすべて更新する ### 検証 リファクタリング後、プロジェクトのリンターとビルドを実行して壊していないことを確認します。 エラーが出た場合は、原因を読み取った上で根本修正します。 相談のない`// eslint-disable-next-line`や`as any`での回避は禁止です。 ### 報告 最後に、ユーザーへ次を簡潔に報告します。 -