コード生成中級

React class component → function component

ライフサイクルメソッドや state を Hooks ベースに変換するプロンプト。

監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

こんな課題を解決

古い React コードが class component のまま残っており、Hooks 前提のライブラリやテスト基盤に乗せ替えづらい。

プロンプト

Claude Code に入力

次の class component を function component + Hooks に書き換えてください。

## 対象
- ファイル: [path/to/component.tsx]
- 主要な state / props / ライフサイクル: [簡単に列挙]

## 変換ルール
1. this.state → useState（オブジェクト state は分割可）
2. componentDidMount / componentDidUpdate / componentWillUnmount → useEffect
3. setState callback は依存配列で表現
4. this.props.* → 引数の props 分割代入
5. ref は useRef、imperative handle は useImperativeHandle
6. context は useContext、HOC は推奨されないので削除提案

## 守ること
- 公開 API（props のインターフェース）は変更しない
- 既存のテストが緑であることを確認
- パフォーマンス劣化を避けるため useMemo / useCallback は必要な場所だけ
- TypeScript 型注釈を厳密化（FC は使わず明示的に型を書く）

実行結果の例

Claude Code が以下を返します。 - function component 版の diff - state 5 個と effect 2 個に整理されたコード - 削除した HOC wrap の代替案 - 注意点（StrictMode による double invocation の影響）

コツ・ポイント

componentWillReceiveProps はそのまま訳さず派生 state を見直す
this を多用していた処理は useRef ではなく state か reducer に
テストで Enzyme を使っていれば Testing Library への移行も同時に検討
巨大コンポーネントは分解してから変換すると安全