2026年5月26日の開発日記

画面の数字が前の章を引きずったまま動かない。Amazonの画像取得は広告通信に足を取られて固まる。今日は「見えているものと、コードが掴んでいるものがズレている」たぐいのバグを2件、別々のプロジェクトで踏み抜いた。どちらも真因は素直なところになく、思い込みを1枚ずつ剥がして奥にたどり着いた。

今日やったこと

1. キャッシュフロー教材のスクロールリセットバグ修正（eurekapu-nuxt4）

会計学習サイトのキャッシュフロー教材で、ページ最下部までスクロールしてから次の章に切り替えると、本文が前章の位置（scrollTop=5440）を引きずったまま先頭に戻らない。画面を見ていて数字が動かないのに気づいた。

watchの発火方法を疑い、HMRを疑い、配信ソースまで確認したが、どれも外れ。ログを仕込んで「watchは発火しているのにリセットが効いていない」と分かった瞬間に、真因が見えた。MillerViewerがデスクトップ版とモバイル版の両方でスロットをレンダリングしていて、ref="contentRef" が2つの .scroll-content に重なり、非表示のモバイル側だけをリセットしていた。

主な成果:

「表示中の .scroll-content を掴む」getScrollEl ヘルパー方式に置き換え
右TOCクリックも非表示側を操作していた副次バグが同時に消えた
同一構造の ch0〜ch5 全6ファイルに一括適用、Codexでレビュー（致命的指摘なし）してmainにコミット

詳細: 章を切り替えてもスクロールが先頭に戻らないバグの真因を突き止めるまで

2. 家電記事用Amazonカードと商品画像のかき集め（mdx-playground）

家電まとめ記事に商品画像＋Amazonボタンを並べたくて、カードコンポーネントを作った。リンク生成は純粋関数 amazonLink.ts（ASIN→tag付きリンク）に閉じ込め、ユニットテスト17件でカバレッジ100%。アフィリエイトの「リンク」は売上ゼロでも作れて、売上実績が要るのはPA-API（商品情報の自動取得）側だけ、という切り分けが効いた。

画像は泥仕事だった。networkidle 待ちがAmazonの広告通信で固まり、bot検出のインタースティシャルに阻まれ、三菱の白物家電だけ取得できずに悩んだ末、原因は検索ヘッダーの「結果」を拾う抽出ロジックのタイミングバグだった。最終的に18カード中15枚に正しい画像が入った。

主な成果:

::appliance-card で呼べるMDCコンポーネントを作成
カードに混入した行番号と「####」を、要素のdiv化でグローバルカウンターの対象外にして解消
Chrome DevTools MCPのバージョン別仕様をCLAUDE.md 3箇所に正確に書き残した

詳細: AmazonアフィリエイトカードをMDCで作り、商品画像をブラウザ自動操作でかき集めた話

成果物: 家電と調理器具、これを選べば外さない（2026年版）

3. AI時代にアツいビジネス領域の壁打ち（思考メモ）

朝、AIが限界費用ゼロでコモディティ化できない領域はどこか、を壁打ちした。残るのはアトム・資本・現場・横断責任・未観測データ側で、オルタナデータで上場企業のKPIに賭ける、といった切り口を並べた。ただ、どれもピンとこなかった。問いが「自分の外」を向いている限り手触りが出ない、というところで一旦止めた。考えを外に置いて眺めるだけでも、なぜ刺さらないかは見えた。

今日の試行錯誤

#	テーマ	試したこと	結果	気づき
1	スクロールリセット	watchの発火方法を route クエリ監視に置換	失敗	scrollTopは5440のまま。発火方法は原因ではなかった
2	スクロールリセット	HMR未反映を疑い完全リロード／配信ソース確認	失敗	新コードはロード済み。HMRも無罪
3	スクロールリセット	ログを仕込んでwatch発火を確認	切り分け成功	resetCount=1。「走るが効かない」と判明し真因へ
4	スクロールリセット	表示中要素を掴む getScrollEl 方式に変更	成功	refが非表示のモバイル側に重複バインドされていた
5	Amazon画像	agent-browser で networkidle 待ち取得	失敗	広告通信が止まらず永久ハング。待ち方を変更
6	Amazon画像	連続アクセスでbot検出	突破	「ショッピングを続ける」クリックで回避
7	Amazon画像	三菱白物家電がNONE続き	原因特定	bot検出でなく、抽出が検索ヘッダーを拾うタイミングバグ
8	画像取得手段	Chrome DevTools MCPで接続を試行	失敗	Chrome 136+ のデフォルトプロファイル制約。agent-browserで続行
9	三菱上位機種	Amazon検索トップを採用	見送り	トップが互換フィルター・廉価機。誤画像を避けプレースホルダー

今日の学び

「見えているもの」と「コードが掴んでいるもの」を疑う。スクロールバグは、watchもHMRも無罪で、refが2つの要素に重複バインドして非表示側を掴んでいたのが真因だった。レスポンシブで両方レンダリングするコンポーネントは、ref参照が二重化する罠がある
切り分けのログ一発で景色が変わる。「resetCountが1」と分かった瞬間、原因の探索範囲が「発火するか」から「どの要素に効くか」に切り替わった
失敗の見た目に騙されない。三菱家電のNONE続きをbot検出と決めつけかけたが、検索結果は51件あった。真因は自分の抽出ロジックのタイミングバグだった
バージョンを確認せず言い切らない。「ログイン済みChromeにDevToolsは繋げない」は誤りで、Chrome 144+なら chrome://inspect 経由で可能。古い思い込みを正しくCLAUDE.mdに書き直した

明日やること（任意）

三菱の上位白物家電の正しい商品画像をどう揃えるか（型番直リンクをユーザーから受け取る運用を検討）
Amazonカードを他の買い物メモ記事にも横展開できるよう汎用化を検討