【Claude Code体験記】第100話：46時間だけ生きた応急のリンク、Next.jsを1つ上げて消した話
はじめに
副業のeBay輸出事業で、売上や出品の状況を見るための管理ダッシュボードを自作している。ある日、売上明細の編集画面から一覧画面に戻ろうとして「売上管理」というリンクをクリックしたら、何も起きなかった。画面は固まってもいないし、エラーも出ない。ただ、押しても押しても、そこにとどまり続けた。
最初は「また自分が何かやらかしたんだろう」と思った。実際にはそうではなく、原因を突き止めるのに数時間かかり、直してからも46時間だけ生き続けた応急処置を、あとから自分の手で剥がすことになった話。
まず自分のコードを疑う
こういう「押しても何も起きない」系の不具合は、九割方は自分の書いたコードのミスだ。画面遷移用のコンポーネントの使い方を間違えているか、状態管理のどこかで値を握りつぶしているか。そう思って、リンク周りの実装を上から下まで読み返した。
構造自体はいたって普通だった。サイドバーの各項目も、編集画面の「一覧へ戻る」ボタンも、標準的な画面遷移用のコンポーネントをそのまま使っているだけ。怪しい分岐も、変な条件式もない。
範囲を広げて切り分ける
もう一箇所、似た構造の画面（商品レビュー一覧の詳細から一覧へ戻る導線）でも試してみた。結果は同じだった。同じ症状が別の画面でも起きるということは、この画面固有の書き方の問題ではなく、もっと共通した部分に原因があるはずだった。
サイドバーの表示にも違和感があった。編集画面にいるのに、サイドバーの「売上管理」がハイライトされなかったり、逆に複数の項目が同時に光ったりする。バラバラに見えていた2つの不具合が、実は同じ根っこでつながっている気がしてきた。
対症療法を試すが、直らない
とりあえず思いつく対処を順番に試した。画面遷移が先読み（プリフェッチ）される設定を切ってみる。表計算コンポーネントの初期化順を疑って前後を入れ替えてみる。どれも直らなかった。
唯一手がかりになったのは、マウスをリンクの上に乗せた瞬間に何かが起きている、という感触だった。実際にクリックする前、ホバーしただけの段階で、画面の裏側では次のページの読み込みがこっそり始まっている。そこで何かが「保留」のまま止まってしまい、実際にクリックしても、その保留状態から抜け出せなくなっているようだった。
バージョンを変えて確かめる
先読みを完全に無効化しても直らなかった以上、自分のコードの外側、使っているフレームワーク本体を疑うしかなかった。手元の環境でフレームワークのバージョンをいくつか変えて、同じ操作を繰り返してみた。
今使っている系列の2つのバージョンでは、どちらも同じように症状が再現した。一方、その次の系列のバージョンに上げてみると、同じ操作をしても症状は一切出なかった。ここで初めて「これは自分のコードの不具合ではなく、フレームワーク自身の不具合だ」と確信できた。
それでも、今すぐ直したい
原因の見当がついても、フレームワーク本体のバージョンを上げる作業は、テストや依存関係の確認を含めると軽くない。一方で、日常的に使っている売上管理画面が「戻れない」状態のままなのは、実害が大きすぎて放っておけない。
そこで、フレームワークを正式に上げるまでの間に限定した、狭い応急処置を入れることにした。症状が出るのは「今いるページから、その親にあたるページへ戻る」リンクだけだったので、そこだけを標準的な画面遷移用のコンポーネントから外し、ページ全体を読み込み直す昔ながらのリンクに戻した。高速な切り替えの恩恵は失うが、少なくとも「押しても反応しない」という致命的な症状だけは消える。
ついでに見つけた、もう1つのズレも直す
応急処置を入れる過程で、サイドバーの選択表示のズレの原因も見えてきた。今いる画面のURLと、サイドバーの各項目のURLを比べる判定が、部分的にしか一致を見ていなかった。そのせいで、より深い階層の画面にいるときに、浅い階層の項目が光らなかったり、逆に複数の項目が同時に光ったりしていた。
判定を「最も長く一致する項目だけを光らせる」というシンプルな規則に統一し、個別の画面ごとの例外処理をそこに吸収させた。ついでに直しておかないと、次に似た画面を増やすたびにまた同じズレが起きる。
直す前に、失敗するテストを書く
修正を書く前に、まず今回の症状を再現する形で回帰テストを書いた。編集画面にいるときにどの項目が光るべきか、階層の深い画面と浅い画面が混在したときにどう振る舞うべきかを、6パターンのテストとして並べた。
修正前のコードに対してこのテストを実行すると、想定どおり6件とも失敗した。原因を取り違えていないことを確認したうえで、応急処置と選択表示の修正を適用し、同じテストをもう一度流すと、6件とも成功した。
本番の画面で、実際に操作して確かめる
テストが通っただけでは安心できない。本番の画面を開き、売上管理の編集画面から一覧へ実際にクリックして戻れること、サイドバーの選択表示が正しく1箇所だけ光ること、別の分析用の画面への遷移も問題なく動くことを、順番に自分の手で操作して確認した。
3点とも、狙いどおりに直っていた。ここでようやく、日常的に使う画面としては一段落した。
それでも、心のどこかに引っかかる
症状は消えた。だが、コードの中には「本来はこのコンポーネントを使うべきところを、フレームワークのバグを避けるために昔ながらのリンクへ戻した」という、説明が必要な例外が1つ増えた。放っておけば、この例外は「なぜこうなっているか誰も覚えていないコード」になっていく。
いつかフレームワークを上げたら剥がす、と頭の中では決めていたが、「いつか」とだけ決めた対応は大抵そのまま居座る。剥がす作業をどこかの予定に明示的に乗せておかない限り、次に触るのは同じ症状がまた表面化したときになりかねない。
46時間後、アップグレードのタイミングが来た
応急処置を入れてから46時間ほど経った日、別の理由でフレームワーク本体を最新版へ上げる作業に着手することになった。ちょうどいい機会だったので、上げる前に、疑っていたバージョンで本当に症状が再現しないことをもう一度手元で確認してから作業に入った。
アップグレード自体は、バージョン番号を書き換えて依存関係を更新するだけで、大きな衝突もなく終わった。
応急処置を、丁寧に剥がす
アップグレードが終わったところで、46時間前に入れた応急処置を剥がしにかかった。親ページへ戻るリンクを、標準的な画面遷移用のコンポーネントへ書き戻す。ただし、応急処置のついでに直したサイドバーの選択判定（最も長く一致する項目だけを光らせる規則）は、そのまま残すことにした。応急処置とセットで入れたからといって、良かった部分まで一緒に消す必要はない。
回帰テストも書き直した。応急処置の状態（昔ながらのリンクが使われていること）を期待していた2件のアサーションを、応急処置が剥がれたあとの状態（標準的なコンポーネントに戻っていること）を期待する3件に置き換え、既存の分と合わせて7件がすべて成功することを確認した。
分かったこと
今回の一連の流れを振り返ると、いちばん時間がかかったのは「自分のコードを疑う段階」だった。実際には結果として正しい判断で、自分のコードに原因がないことを一通り確かめてから外側を疑ったからこそ、フレームワーク本体のバージョンを切り分けるという発想にたどり着けた。順番を飛ばして最初から「フレームワークが悪い」と決めつけていたら、逆に見落としがあった可能性もある。
もう1つ分かったのは、応急処置そのものより、応急処置を「いつ剥がすか」を決めていないことの方が危うい、ということだった。46時間という数字は、たまたま次のアップグレード作業が近いタイミングで発生したから短く済んだだけで、次の作業がなければもっと長く居座っていたはずだ。
これから気をつけたいこと
ひとつ目は、「押しても反応しない」系の不具合に当たったとき、まず自分のコードを疑い、次に範囲を広げて切り分け、最後にバージョンを変えて確かめる、という順番を崩さないこと。今回はこの順番のおかげで、遠回りに見えて実は最短だった。
ふたつ目は、応急処置を入れるときは、剥がすタイミングを「いつか」ではなく具体的な次の予定（今回で言えばバージョンアップの作業）に紐づけておくこと。予定に乗っていない応急処置は、忘れられて長く生き続ける。
みっつ目は、応急処置を剥がすときに、応急処置とセットで直した副産物（今回で言えばサイドバーの選択判定）まで一緒に消さないこと。原因が同じでも、直した内容の価値はそれぞれ別に判断したい。
まとめ
クリックしても反応しない画面遷移を追いかけると、原因は自分のコードではなく、使っているフレームワーク本体のバージョン依存の不具合だった。バージョンを変えて切り分け、原因を確信したうえで、フレームワークを正式に上げるまでの46時間だけ生きる応急処置を入れた。修正前のコードに新規テストを当てて6件すべて失敗することを確かめ、修正後は6件とも成功することを確かめてから本番へ反映し、実際に操作して直っていることを見届けた。
46時間後、別件のアップグレード作業のタイミングに合わせて応急処置を剥がし、テストのアサーションも書き直して7件すべてが成功することを確認した。応急処置そのものより、それをいつ剥がすかを決めていないことの方が危うい。この視点を、次に似たような応急処置を入れるときの判断基準に加えておきたい。
#ClaudeCode #Next .js #バグ修正 #自動化 #副業
この体験記は「Claude Codeで、副業を回す。― ひとり実装ノート」マガジンの1話です。実際に副業の自動化を組み立てながらぶつかった出来事を、時系列のまま記録しています。マガジンはこちら:
