溜め込んだ技術的負債と、まとめて大掃除した記録

管理画面で記事一覧を見ていたところ、閲覧数が不可解な数値で表示される奇妙な現象に遭遇した。
自分で確認のために読んだ記事もあるし、訪問者が読んだ記事もあるのに、ブログ画面、管理ダッシュボード、記事管理一覧に表示される閲覧数がすべてバラバラだったのだ。
デプロイの途中でD1データベースのカラムやテーブルが丸ごと消し飛んだのではないかと、一瞬冷や汗が流れた。

焦る気持ちを抑えつつリモートのD1ターミナルでテーブル構造と実データを確認してみたが、結果は拍子抜けするものだった。

npx wrangler d1 execute svelteblog-db --remote --command="PRAGMA table_info(posts);"

postsテーブルのview_countカラムは無傷で存在していたし、ユーザーDBを開いてみると日別の閲覧数ログは1,000件を超え、累計1,400PV以上しっかり記録されていた。
データが消失したのではなく、裏側では元気に生きているのに画面にだけ反映されていなかったのだ。

原因を遡ってみると、「バイブコーディング（Vibe Coding）」で勢いに任せて開発を進める中、その都度整理せずに放置してきた技術的負債の破片が原因だった。
当ブログは記事本文を管理するBLOG_DBと、ユーザーや統計ログを扱うUSER_DBに物理的に分かれている。日別の統計ログを蓄積するロジックは作ったものの、肝心の記事側キャッシュカラムへ合算・同期するパイプラインを「エラーなく動いてるからいいか」と中途半端なまま放置していた過去のツケだった。
実データはユーザーDB側に溜まっているのに、管理画面は空っぽのブログDB側キャッシュだけを眺めていたのだから、0と表示されるのも当然だった。

「よし、原因は分かった！」と管理画面のサーバー処理を修正し、ユーザーDBの合算値を読み込んでマッピングしつつ、不整合のある記事はブログDB側へ自動同期するようにしてデプロイした。

// 管理サーバー側：USER_DBの生ログを集計し、不整合な記事を自動同期
const { results: viewResults } = await userDb.prepare(`
    SELECT post_id, SUM(views) as total_views FROM post_views GROUP BY post_id
`).all();

const posts = (postsRaw || []).map((p: any) => ({
    ...p,
    view_count: viewCountMap[p.id] ?? (p.view_count || 0)
}));

これで41PVなどの正常な数値が出るはず……だったのだが、いくらリロードしても頑なに0が表示され続けた。
D1を直接叩くと間違いなく41と返ってくるのに、ブラウザ画面上では意地でも0を貫き通す。この時は本当に狐につままれたような気分だった。

結局、真犯人はサーバーではなく、フロントエンドのSvelteコンポーネント側に残っていたもう一つの落とし穴だった。
以前、記事一覧の表示を高速化しようとしてlocalStorageを使ったキャッシュ処理を入れていたのだが、それが原因だったのだ。

// apps/admin/src/routes/posts/+page.svelte (修正前の問題コード)
} else {
    // 通常アクセス：localStorageに有効なキャッシュがあれば再利用
    const saved = localStorage.getItem(POSTS_CACHE_KEY);
    if (saved) {
        cachedPosts = parsed.posts; // <- サーバーが返した最新データを、過去のローカルストレージで無条件に上書き
    }
}

Svelte 5の$effectの中で、サーバーがD1から41という最新値を取得して渡した直後、フロントエンド側のコードがブラウザのローカルストレージに残っていた過去の「閲覧数0の一覧」を取り出し、画面を無慈悲に上書きしていたのだ。
有効期限（TTL）すら設定していなかったため、F5キーを何度連打しようがブラウザは昔のキャッシュを健気に表示し続けるだけで、画面が変わるはずもなかった。

バックエンドのデータ同期不足と、フロントエンドの無慈悲なローカルストレージ上書きという2つの破片が見事に噛み合い、「サーバーもDBも正常なのにブラウザが画面を塗りつぶす」という奇妙なコラボレーションを生み出していたわけだ。
ローカルストレージの無条件上書きロジックを排除し、サーバーの最新データをそのまま表示するように直したところ、ようやく画面に鮮やかな「41」が表示された。
AIとテンポよく機能を組み上げるのは快適だが、開発者自身が全体像を把握しないまま動かしていると、こうした破片に気づかず見落としやすい。適時片付けておかないと、後から思わぬ形で痛い目を見ることになる。

セットアップ直後はテスト自体が難しい面もあるし、コーディングを全面的にAIへ丸投げした結果、何事もなければ良いが問題が起きた時にどれほど厄介かを改めて痛感した。
ある程度安定したらデザインエディタ周りにも手を入れようと考えていたが、その「ある程度」に達するまでにはまだ結構な時間がかかりそうな嫌な予感がしている。
いっそのことAIの進化がさらに加速するのを待つべきなのだろうか……。

バイブコーディングはすでに開発の主流になりつつあるし、一度このスピード感を体験すると元には戻れないという強烈な副作用もある。
現状は全体を統括・調整する開発者が必要だが、最終的には「これ作って」と指示するだけで自律的にすべて調整して仕上げてくれる時代が、本当にすぐそこまで来ていることを実感する。
それを肌で感じるたびに、なんとも言えない奇妙な感情が込み上げてくる。