Claude Codeにポートフォリオサイトを見せたら、5秒でバグを見つけられた話

おはようございます。YASUです。

今日はいつもの座学ネタではなく、実際に手を動かした話です。ターミナルの中でエージェントに「バグ、見つけて直しといて」とお願いしてみたら、想像以上のことが起きたので、その一部始終をレポートします。

結論

Claude Codeにポートフォリオサイトのフォルダを見せたら、5秒で「メールリンクが壊れてます」と指摘され、そのまま直してもらえました。ただし「直す」だけで終わらず、GitHubへの認証まわりで思わぬ壁にぶつかり、結果的にSSH鍵の設定まで一緒にやることになったという、初回にしてはなかなか濃い体験でした。

まず、何もわからないところからのスタート

ターミナルを開いて `claude` と打つところから始めたんですが、正直に言うと最初は本当に何もわかりませんでした。npmって何、sudoって何、権限エラーって何。呪文を打っている感覚に近かったです。

それでもインストールとログインを終えて、試しに自分のポートフォリオサイトのフォルダに移動してから起動し、こう聞いてみました。

「このプロジェクトの構成を説明して。使ってる技術も教えて」

すると、index.htmlもCSSもJSもLambdaの関数も全部読んだ上で、構成をきれいにまとめて説明してくれました。ついでに「git statusを見ると未コミットの変更がありますね」まで教えてくれて、こちらが忘れていた作業内容まで思い出させてもらう始末です。

いきなりバグを見つけてきた

調子に乗って「サイトの中で気になる箇所を1つ改善してほしい。まず提案だけしてください」とお願いしてみたところ、返ってきたのがこれでした。

お問い合わせセクションのメールリンクに、mailto:が付いていない。つまりクリックしても何も起きない、実質的に死んでいるリンクだったわけです。すぐ下に別の「メールアプリで開く」ボタンがちゃんと動いていたので、今まで気づかずスルーしていました。

ついでに「チャットウィジェットの入力欄がHTMLタグをそのまま描画してしまう軽微なXSSリスクがある」「faviconが外部ドメインを参照したままになっている」という指摘まで添えてくれました。見た目には全く分からない場所を、コードレベルでちゃんと拾ってくるのが率直に驚きでした。

直すのは一瞬、でも承認は都度必要

「メールリンクの修正から進めてください」とお願いすると、該当箇所を書き換える提案が表示され、「この変更を適用していいですか?(Yes/No)」と聞かれます。ここで良ければYesを押すだけ。実際にファイルを書き換えるのは一瞬でした。

ここで地味に安心したのが、エージェントは黙って書き換えるのではなく、変更のたびにこちらの承認を求めてくる点です。「勝手に何でもされる」という不安は、実際使ってみるとかなり薄れました。

本当の壁はコードじゃなくて認証だった

修正をコミットして、いざGitHubにプッシュしようとしたところで詰まりました。認証情報(SSH鍵やトークンの類)が、そもそもこのパソコンに一度も設定されていなかったのです。

ここからはエージェントと二人三脚でSSH鍵を新規生成し、公開鍵をGitHubの設定画面に登録し、接続テストをして、リモートの参照先をSSH方式に切り替えてようやくプッシュ成功。おまけにGitHub側に先客のコミットがあったため、履歴を綺麗に統合する作業(リベースと呼ぶそうです)まで発生しました。

正直、コードを直すこと自体より、この認証まわりの方がよっぽど大変でした。エージェントが一つずつ「これをやっていいですか」と確認しながら進めてくれたおかげで、置いてけぼりにならずに完走できた形です。

今日の学びまとめ

まとめ

今日一番の収穫は「バグを直せた」ことよりも、「わからないなりに一つずつYes/Noを判断しながら、最後まで自分の手でやり切れた」ことだと思っています。専門用語が飛び交う画面に最初は面食らいましたが、意外と一歩ずつ進めば辿り着けるものだと実感しました。

次はもう少し大きめの改修や、blogセクションまわりの変更にも挑戦してみたいと思います。

それでは、また次の記事で。