AIとのやりとりで困った事

前回、設計思想だけは一貫していたと偉そうに書いたが、実際の制作過程はもう少し泥臭かった。今回は、その泥臭さの部分を正直に書いておこうと思う。

自分で自分のページを消した話 ある日、Companyページ（代表挨拶を載せているページ）のソースファイルを開いたら、中身がTechnologyページの内容にすり替わっていた。

誰がやったのか。犯人は私である。

作業中にファイルを取り違えて上書き保存してしまい、代表挨拶の原稿がまるごと消えていた。幸い本番環境には表示内容が残っていたので、それを頼りにClaudeと一緒に再構築する羽目になった。バックアップは大事、というあまりにも当たり前の教訓を、恥をかきながら再確認した出来事だった。

会社名が21箇所間違っていた話 「有限会社ジェイ・スピリッツ」が正式名称なのだが、中黒（・）が抜けた「有限会社ジェイスピリッツ」という表記が、気づけばサイトのあちこちに紛れ込んでいた。

しかも1箇所や2箇所ではない。数えたら21箇所。ヘッダーの端から各ページのメタ情報まで、まるで誤字が増殖していたのかと思うくらいの数だった。さすがに1個ずつ手で直す気にはなれず、PowerShellスクリプトで一括置換した。地味な作業だったが、地味に一番ヒヤッとした瞬間でもある。

管理者アカウント名が丸見えだった話 これは一番肝を冷やした。ステージング環境のBasic認証が、何かの拍子に無効化されていたことが発覚したのだ。

つまり、パスワードなしで誰でも管理系のAPIエンドポイントにアクセスできる状態が、しばらく野放しになっていた。管理者アカウント名まで外から丸見えという、セキュリティ的にはなかなかのやらかしである。気づいた瞬間、心臓に悪い汗をかいたのを覚えている。すぐに設定をやり直して事なきを得たが、「攻撃されなくてよかった」という安堵と「なんで気づかなかったんだ」という自己嫌悪が同時に押し寄せてきた。

数字が37倍おかしかった話 パフォーマンス計測をしたとき、画面のブロッキング時間（TBT）が33,400ミリ秒という数字を叩き出した。目標水準の37倍以上である。

37倍。誤植ではない。数字を二度見した。原因は3D演出やアニメーションが重すぎたことにあったのだが、これを地道にチューニングしていく過程は、まるでダイエットのビフォーアフターを見せられているような気分だった。最終的には1秒未満まで改善できたので、今となっては笑い話である。

faviconが全然変わらない話 ブラウザのタブに出る小さいアイコン、faviconをいくら差し替えても表示が変わらず、しばらく頭を抱えた。

原因は単純で、Next.jsの仕組み上、app/icon.svgというファイルがfavicon.icoより優先されるという規約を知らなかっただけだった。知ってしまえば「なるほど」の一言なのだが、知らないうちは「なんで反映されないんだ」と延々ブラウザのキャッシュを疑い続けることになる。技術の世界の「あるある」を、身をもって体験した瞬間だった。

page.jsxが何個もあって訳が分からなくなった話 Next.jsというフレームワークには、少し変わった決まりがある。どのページも、フォルダの中に置くファイルの名前は判で押したように必ず「page.jsx」でなければならない。TechnologyもWorksもニューロンの個別記事も、実体はフォルダの場所が違うだけで、ファイル名だけ見れば全部「page.jsx」。同姓同名の人間が何人も同じ会議室に集まっているようなものである。

これが厄介なのは、Claudeとのやりとりの中で「page.jsxを見せてください」「先ほどのpage.jsxですが」とやっていると、どのpage.jsxの話をしているのか、途中からお互い怪しくなってくることだ。

見かねたのか、あるときからClaudeは自分が作るファイルに「column_page.jsx」「column_slug_page.jsx」のような、実際には存在しない独自の名前を勝手に付けて渡してくるようになった。

正直、最初は面食らった。実際のフォルダの中では結局「page.jsx」という名前で保存しなければ動かないのに、なぜわざわざ紛らわしい名前を付けてくるのか。余計なことをするなと、内心かなり怒っていた。

ところが後になって気づいた。むしろこちらこそ、最初から用途ごとに別の名前で管理しておけば良かったのだ。実物のファイル名がpage.jsxで統一されるのは、Next.jsの決まりだから仕方ない。だが会話の中や自分の作業フォルダでのやり取りまで、律儀に同じ名前を使い続ける必要はどこにもなかった。

Claudeは特に説明もせず、ただ黙って合理的な方法を選んでいただけだったのに、それを見た私が「余計なことを」と怒っていた、というのがオチである。妙に理屈っぽく、しかし結果的には正しい方法をさらりと選んでくるあたり、AIの律儀さというか、変な生真面目さというか、合理的に考えすぎることそのものが、人間から見るとかえって非合理に映る瞬間があるのだと、この一件で妙に納得してしまった。

AIも、地味に謝ってばかりだった話 ここまで自分の失敗ばかり並べてきたが、正直に書いておくと、やらかしていたのは私だけではない。

Claudeも、それなりに間違える。しかも、一度指摘したはずのことを、しばらくするとまた同じように間違える。たとえばコードを書いてもらうとき、importの一文をうっかり省略してくることが何度かあった。当然、そのままでは動かない。指摘すると「おっしゃる通りです、失礼しました」と律儀に謝ってくる。次は大丈夫だろうと思っていると、また別の場面で同じことをやる。今では「import文は必ず明記すること」という、うちの運用ルールにわざわざ格上げされているくらいだ。

コードを直した後、本番環境に反映するための手順（vercel --prodを打つだけなのだが）を、Claudeが自分からは案内してこないことも続いた。こちらから「デプロイは？」と聞いて、ようやく「失礼しました、ご案内すべきでした」と返ってくる。これも指摘を重ねた結果、今ではコード変更のたびに毎回自発的に案内するルールとして定着した。

つい先日も、開発コラムの実装中に一悶着あった。WordPressのタグ欄に「開発コラム」と入力したのに記事に反映されず、私が「更新ボタンでは追加されない」と伝えたところ、しばらく話が噛み合わなかった。結局のところ、Enterキーで一度タグを確定させてからでないと、更新ボタンを押しても意味がないという、地味だが致命的な説明不足だった。原因が分かった瞬間、またいつもの調子で「失礼しました」である。

何度も同じように謝られていると、こちらとしても、そろそろ怒る気力より先に「またか」という妙な安心感の方が勝ってくる。人間相手ならとっくに愛想を尽かされていそうなものだが、根気強く同じ説明を繰り返してくれるのは、AI相手ならではの美点なのかもしれない。持ちつ持たれつ、お互いさまである。

こうして並べてみると、我ながらよくやらかしたものだと思う。それでも一つずつ、Claudeと一緒に原因を突き止め、直し、また次の問題にぶつかる——その繰り返しだった。振り返れば、この繰り返しこそが今のサイトを形作っている。