背景
Altary の開発現場に Claude Code を導入してから約 2 週間が経過しました。
この期間で Claude Code の長所・短所が見えてきたため、今回は jQuery ベースのコードを React にリファクタリングしてみました。
Claude Code に関する過去記事
- Claude CodeをAltaryの開発に実戦投入してみた①｜現場目線で感じたメリットと課題
- Claude CodeをAltaryの開発に実戦投入してみた②｜現場導入に向けた使い方の最適化と改善プロセス
リファクタリングに関する過去記事
試したこと
概要
従来は jQuery で実装していたキャンバス機能（スクリーンショットの囲み線を描画する機能）を、同等の UX を保ちつつ React で書き直しました。
旧コード（jQuery）の挙動
マウスドラッグで矩形を描画し、その領域を強調表示できます。
Claude Code への指示内容
-
フロントエンド:
webroot/assets/js/*.js（3～4 ファイル） -
バックエンド:
src/Controller/*.php（1 ファイル） - 既存の jQuery 実装を参照し、React コンポーネントに置き換える
結果
✨ ほぼ一発で動作するコードが生成され、驚くほど短時間で実運用レベルに到達！
少量のチューニングのみで、従来数時間かかっていたリファクタリング作業が一瞬で完了しました。
まとめと感想
-
Claude Code の強み
- コード構造や依存関係を瞬時に解析し、最適な React コンポーネント変換を提案
-
修正時の安心感
- 変更内容をリアルタイムでプレビューし、「この修正でよいか？」を確認できる
- 想定と違う場合はすぐキャンセル可能
-
効率化の実感
- 大量のリファクタリング作業が自動化され、手作業の工数を大幅削減
- 自分で書き直す必要がほとんどなくなった
今後はさらに複雑な UI やビジネスロジックのリファクタリングにも挑戦し、Claude Code の適用範囲を広げていきたいと思います。
おまけ
Claude Codeに励まされました・・・。
