Claude CodeでTypeScript（React）プログラミング
今回は、プログラミングというほどのこともないですが
IRISのフロントエンド開発ツールとしてReactを利用しています。
Reactに限らずWeb開発のフレームワークを利用する場合のポイントとしてCSSフレームワークをどうするかというのがあります。
今までは、定番というか一番とっつきやすいBootStrapを使用してきました。
利用が簡単な分、カスタマイズの幅が少ないかなということを感じていました。
とはいえ、他のCSSフレームワークを使うにしても、それをまた学習して、１から書き直すのも大変だなということでそのままにしてきました。
今回、Claude Codeという最強のツールを得たことで、BootStrapをMaterializeに変更するように依頼してみました。
結果は、一発で修正完了
実行確認まで5分もかからないスピード感で終了しました。
もし自分でMaterializeを自習して、実装した場合は、少なくとも２、3日はかかったのではないかと思います。
BootStrapの画面
Materializeの画面
ディスカッション (1)0
Comments
スタイルシートを変えるだけでは、面白くないので、バグだと気づいていながら放置していた問題の修正もお願いしました。
編集画面で削除したデータが削除後も左側のリストにそのまま表示されているという問題です。
これも一発の依頼で簡単に解決しました。
修正依頼内容です。
ExpenseItem.tstxの削除ボタンを押して、該当レコードを削除した後、ExpenseItemList.txtのリストを更新して、削除した項目がそのリストに含まれないように修正してください
Cllaude Codeの応答です。
App.tsx で状態管理をしているので、削除後のリスト更新は App.tsx 経由で行うのが適切です。
全体の流れを確認して修正します。
Read current App.tsxRead current App.tsx構造を把握しました。
App.tsx に onDeleteItem コールバックを追加してリストから該当IDを除外し、ExpenseItem.tsx に props として渡す方針で修正します。
2個のファイルを作成しました,
2個のコマンドを実行しました,
ファイルを読み取りました2個のファイルを作成しました,
2個のコマンドを実行しました,
ファイルを読み取りました
App.tsx と ExpenseItem.tsx の2ファイルを更新しました。
変更の流れ：
App.tsx
onDeleteItem コールバックを useCallback で追加。削除されたIDを受け取り、setExpenseItemList で filter して該当IDの項目をリストから除外します。
また setResponse("") で右ペインの表示もクリアします。
<ExpenseItem> に onDeleteItem={onDeleteItem} を props として渡します。
ExpenseItem.tsx
props から onDeleteItem を受け取ります。
削除API呼び出し成功後の .then() 内で onDeleteItem(response.id) を呼び出し、App.tsx 側のリスト更新をトリガーします。
これにより、削除ボタンを押してAPIが成功すると、アラート表示→左ペインのリストから該当項目が即座に消える、という動作になります。