Zeid | AI Learning Journey & Portfolio

闇の中に消えた10時間

開発の終盤、それは突然現れました。ローカル環境では完璧に動いているのに、Vercelにデプロイした瞬間、Safari環境だけでコンポーネントが激しく点滅し、最終的に「Hydration failed」という冷徹なエラーメッセージと共に画面が真っ白になる。時計の針は深夜2時。最初は「すぐ直るだろう」と軽い気持ちで、ブラウザのコンソールを見ながら修正を始めました。しかし、1つを直せば別の場所が壊れ、コードを戻せばエラーが再発する。気づけば、私は実体のない「幽霊」を追いかけ続け、10時間という膨大な時間を虚無の中に捨てていました。

「AIは役に立たない」という勘違い

この間、私は何度もAIに助けを求めました。「Next.jsでハイドレーションエラーが出る」「useEffect周辺を直して」と、エラーコードをコピー＆ペーストしてプロンプトを投げ続けました。しかし、返ってくるのは『ウィンドウが未定義かもしれません』『suppressHydrationWarningを使いましょう』といった、検索すればすぐに見つかる定型文ばかり。当時の私は、「結局、複雑なバグはAIには無理なんだ」と決めつけ、再び手探りのデバッグに戻ってしまいました。今思えば、私自身がAIから「視界」を奪っていたのです。

視点をマクロに切り替える：Antigravityの真価

翌朝、疲弊した頭で最後にもう一度だけ挑戦しようと、Antigravityに向き合いました。今度は「断片的なエラー」ではなく、「プロジェクト全体の構造」を共有した状態で対話を始めました。「このエラーは単一のコンポーネントの問題ではない気がする。共通のユーティリティや、ライブラリの初期化コードを含めて、全体のライフサイクルを分析してほしい」 Antigravityに与えたのは、特定のコード片ではなく、ディレクトリ構成と依存関係、そして「どこで何が起きているか」という定性的な情報でした。

30分の逆転劇：真犯人は『共通の微細な塵』

対話開始からわずか10分。Antigravityが指摘したのは、私が「絶対に間違っていない」と確信して無視し続けていた、日付操作の共通ユーティリティでした。「サーバーはJST（日本標準時）でレンダリングしようとしている一方、クライアント（Safari）はデバイス側のタイムゾーン設定を優先しており、ミリ秒単位でレンダリング結果に差分が出ています。これが連鎖してハイドレーションを破壊しています」この指摘に基づき、日付処理をクライアントサイドのみで決定的に実行するよう修正したところ、10時間苦労したバグが、嘘のように消え去りました。修正にかかった時間は、実質30分にも満たないものでした。

Source Code

// 真犯人のコード：サーバーとクライアントで結果が微妙に異なる
// const initialDate = getFormattedDate(new Date());

// 修正後：マウントされるまで初期化を待ち、結果を一致させる
const [isMounted, setIsMounted] = useState(false);
const [displayDate, setDisplayDate] = useState("");

useEffect(() => {
  setIsMounted(true);
  setDisplayDate(getFormattedDate(new Date()));
}, []);

if (!isMounted) return <Skeleton />;

AIとの共生：解くのではなく「視る」

この経験で得た最大の学びは、AIは「答えを教えてくれる機械」ではなく、「自分が見落としている視座を提供してくれる鏡」だということです。断片的な情報だけを渡せば、AIは断片的な答えしか出せません。しかし、プロジェクト全体という「広域コンテクスト」を共有すれば、AIは我々の何倍もの解像度でコードの矛盾を見つけ出します。「10時間は、私が一人で闇の中を歩いた時間。30分は、AIと二人で地図を広げた時間」。今後の開発において、この「視座の共有」こそが、クリエイティビティを加速させる唯一の鍵になると確信しています。