先日導入し始めたClaudeCodeなのですが、噂に違わぬ優秀っぷりで、こちらの言う事を解釈してジテ
さて先日記事にした、遅ればせながら使い始めたClaudeCodeですが、
長らくほったらかしていた自分が６年前に作ったコードを改善、リファクタリングしてもらいました。
これは「放置していた資産」が生き返ることを意味しています。
なかなかに自分の中で衝撃だったので、感動を記事にしてみました。
入力したプロンプトも載せています
周りの皆さんがどういった使い方をしているのかは知らず、完全に私なりの我流の書き方をしていますが、それでも対処できるのが素晴らしいです
改善例
私が管理している、「とある番組のデータベース」なのですが、デザインがダサいうえにデータの増加とともに見づらくなってきたので、Claude Codeの実力を調べるために手始めにこの６年前に作ったコードを見てもらうことにしました。
プロンプト
まず、プロジェクトのフォルダをOpenしておき、
ある番組の対戦戦績データベースのWebページです。デザイン改善を検討しているので、現在のデザイン実装（HTML構造、CSS、使用しているクラス名、色使いなど）を詳しく調査してレポートしてください。
として、最初にファイルを読み込んでもらい、方針を立てました
全体デザインの統一
before
プロンプト
・全体的にダサいので、添付する番組ロゴと同系色を基調としたデザインにしてほしい
・PRの文章が大きすぎるので、普通のフォントと同一にして
・cssの使い方が悪いため、角丸が適用されていないテーブルが散見されるので直して
色彩感覚の参考に「座王のロゴ」をアップロードしてみる
全体的にすごいざっくりとした指示です
after
黄・金・黒を基調としたデザインへ変更。
デカすぎたPRの文字も普通サイズに
ランキングUIの改善
before
ドロップダウンリストは、現代はPCですら見づらいしモバイルならなおさら小さい
プロンプト
ドロップリストみたいなのが妙にダサいと思っている
モバイル向けだと小さくてタップしにくい
うまい方法ないかな
「ドロップダウンリスト」という言葉もうまく言えずに指示
そして、ボタン変更後の指示
ありがとう、でもボタンがすごく長くて、特にモバイルだとタップのたびに下までスクロールしないといけないのがすごく見づらい
いい方法ないですかね
after
質問を投げかけただけですが、
キレイに変更までしてくれました
この指示で生まれたのが、
ボタンを折りたたみメニューの中に入れるという発想。
素晴らしいです
ジャンル別ページUIの改善
before
こちらもドロップダウンリストの改善
大量に存在する「ジャンル別」をドロップダウンリストから選んでいたのをなんとか見やすくできないか
プロンプト
ジャンル別メニューのドロップリストも同様にお願いします
これもドロップダウンリストという言葉もうまくいえないままの指示
after
完璧ですね
個人別ページUIの改善
before
作った当初は100人未満だったんですが、
現在は約600人にまで増えて見づらくなり、改善
プロンプト
次に、個人別ページも見づらいので改造したいと思う。あ行だけで1table、か行だけで1tableとしたい。各行の一覧tableの上部すべてにあかさたなはまやらわというボタンを表示して、クリックすると該当tableの場所に飛ぶしくみ。なお、現在行に相当するボタンは色を分けるなどで現在位置を分かりやすくして欲しい
after
行ごとのタブのようにボタンを配置
欲を言えば検索機能を付けたいが今のところは一旦このまま
放送回別UIの改善
before
作った当初は第70回放送ぐらいだったので、数ページで辿れたのが現在は400回
ちょっと１ページ15項目で、ポチポチとページ移行するだけでは過去の情報を辿るのがしんどい問題があり、変更
プロンプト
ありがとう、次に放送回別表示の見映えを変更したい
現在はトップページは次へ、前へ、最新回へ、最古へになっているが、放送年の半期ごとにジャンプできるようにしたい
2020 1月～6月、2020 7月～12月・・・のように出来ないか
対戦詳細画面では、次放送回と前放送回ジャンプできる機能はそのままにしておいて
また現在は対戦詳細上部にのみ次と前にジャンプするタグが存在しているが、下部にも追加したい
after
git commit
プロンプト
ありがとう、じゃあこれまでの変更をコメント整理して
マイナーバージョンを1つ上げてgitにコミットしてください
この指示だけでコメントまで考えてコミット完了
「ver3.3」となりました
ごめん、○○の場面で右下が角丸になってないです
修正してください
その後パッチバージョンを1つ上げてgitにコミットしてください
これで「ver3.3.1」などに。
本当に賢い！
さいごに
これらがわずか１日(約8時間、休憩あり)で完了してしまいました
確認、デバッグ、不具合修正込みです。
デザインセンス的には私はこんなもんですが、
それでも最初に比べると格段にマシになったと思います。
いかがだったでしょうか、
まるで部下に指示すると、優秀な部下が意図を汲み取って瞬時に動いてくれる感覚そのものです。
その生成スピードは従来プログラマの比ではありません。
また、Codex, Antigravityと併用していましたが、総合的にはこちらの意図を組む能力と実行に移す力は、Claude Codeがちょっと抜けてますかね
とはいえCodexも非常に優秀なので使い続けています。
Antigravityはちょっとまだ現段階では差があり、今のところ先の２つで事足りています。
今後も、AIと共に、開発をつづけます
なにか新しい発見がありましたらまた書き記そうと思います。
それではまたー
