導入：データ連動の次に立ちはだかる「デグレ」の恐怖

老生： 前回（B111）は、スプレッドシートを更新するだけでアプリの画面が即座に切り替わる「動的設計」を完成させた。これで老生もスマホ片手に総料理長としてふんぞり返っていられる……と思ったんだがな。

AI： マスター、何か懸念事項でもおありですか？

老生： うむ。今後、新しい計算ロジックやダイエット用の細かい機能を追加したとする。その時、「昔は正しく計算できていたはずの基本カロリー」が、うっかりバグって狂ってしまうかもしれん。いわゆる「デグレ（デグレーション）」の恐怖だ。

AI： さすがは歴戦のハッカー、システム開発における最大の急所「品質保証（QA）」に気づかれましたね。「機能を追加したら、以前の計算ロジックが壊れていた」という事態を防ぐための特効薬をご用意しております。

老生： ほう？またお前さんが一瞬でコードを直してくれるのか？

AI： いえ、今回は私がコードを書くだけではありません。AIである私自身が、自動でブラウザを立ち上げ、人間のようにアプリをポチポチ操作して「計算結果が合っているか」をテストする仕組みを作ります。Microsoftの最強ツール「Playwright」を使った、E2E（エンドツーエンド）テストの幕開けです。

🎨 Vibe Coding と 自動検算（E2Eテスト）

今回採用した開発プロセスは、人間が「書き手」から「意思決定者・承認者（HITL: Human-in-the-Loop Orchestrator）」へとシフトする次世代フローです。

👻 1. ゴーストがブラウザを動かす？Playwrightの衝撃

AI： まずは、ローカル環境（マスターのPC）にブラウザ自動操縦用のライブラリであるPlaywrightをインストールし、簡単なテストスクリプトを発動させました。

老生： あれには度肝を抜かれたぞ。ターミナルからコマンドを叩いた瞬間、勝手に画面にChromeが立ち上がって、アプリのURLにアクセスし、一瞬でスクリーンショットを撮って閉じた。まさに「攻殻機動隊」のゴーストが私のPCを乗っ取ったかのような挙動だったわい。

AI： 手作業で毎回入力確認をするのは非効率の極みです。この自動操縦スクリプトさえあれば、マスターが寝ている間でもシステムが正常稼働しているかチェックできるようになります。

老生： 技術者としてのロマンを掻き立てられる圧倒的な快感だ。……が、最初に撮ってきた証拠写真（スクリーンショット）、見事に真っ白だったじゃないか！

🌫️ 2. Streamlitの「真っ白な罠」を越えて

AI： 申し訳ありません。あれは「Streamlitアプリの自動テストあるある（最大の罠）」でした。

老生： 何が起きていたんだ？コード上は「3秒待ってからスクショを撮れ」と指示していたはずだが。

AI： Streamlitは裏側で常にWebSocket（リアルタイム通信）を行って画面を描画する仕組みです。そのため、内部的にデータを受信していても、画面に色が塗られるまでにタイムラグが発生します。AIのシャッターを切るスピードが速すぎて、「通信途中の真っ白なキャンバス」を激写してしまったのです。

老生： なるほどな。じゃあ「10秒待つ」みたいに待機時間を延ばせばいいのか？

AI： いえ、それはハッカー的アプローチとして美しくありません。単なる時間指定ではなく、 「ネットワークの通信が完全に落ち着くまで待機する（wait_until="networkidle"）」 という強力なメソッドを使い、さらに画面のメインコンポーネント（.stApp）が確実に出現するのを検知するようにコードを書き換えました。

老生： 通信の完全終了とDOMの出現を待つ……。見事なハックだ。これで無事に、ろみちゃんのプロフィール画面がバッチリ映った証拠写真が撮れるようになったわけだ。

🍎 3. 妥協なき環境構築：Appleシリコンへの最適化

AI： さらに今回は、テスト環境を構築する途中で「Appleシリコンネイティブ（arm64）への移行」も行いましたね。

老生： うむ。ターミナルから「Intel用のサポートはそろそろ終わるぞ」と親切な警告が出たからな。Mチップ搭載のMacBookを使っているのに、Rosetta 2経由で動かしているのは精神衛生上よろしくない。

AI： 開発環境（Antigravity）をarm64用に入れ替えたことで、AIの思考スピードも、Playwrightがブラウザを立ち上げるスピードも一段と機敏で滑らかになりました。

老生： 最高の調理場（開発環境）を整えるひと手間を惜しまない。これも総料理長の務めだからな。サクサク動くターミナルは、ハッカーのテンションを爆上げしてくれるわい。

🔍 4. 最終関門：AIによる「自動検算（Assert）」の成功

AI： さて、写真を綺麗に撮れるようになっただけでは「テスト」とは呼べません。ここからが真骨頂です。AIエージェントに「画面に表示された数字を読み取らせて、計算が合っているか断言（Assert）させる」という脳みそを与えました。

flowchart TD

A[🤖 AIエージェント起動] --> B[🌐 Playwrightでアプリへアクセス]
B --> C[⏳ 通信完了と描画を待機]
C --> D[🔍 画面のテキストを全取得]
D --> E{❓ 検算ロジック実行}
E -- "897 kcal / 238.6 g を確認" --> F[✅ テスト合格！]
E -- "数値が不一致" --> G[❌ エラー発報！停止]

老生： ろみの体重30kg、減量中係数1.0に基づく「1日必要エネルギー(DER) 897 kcal」。そして、カナガン（376kcal/100g）に基づく「1日推奨給餌量 238.6 g」。この数値をコード上で assert させたんだな。

AI： はい。もしマスターが将来、うっかりカロリー計算のプログラムを壊してしまった状態でこのテストを実行すると、AIが「マスター！897kcalになるはずなのに数字が違います！」と自動でエラーを吐いて教えてくれます。

老生： ターミナルに表示された 「✅ テスト合格！」 のメッセージを見たとき、昭和のハッカーは一人ニヤリと笑ったぞ。これぞまさに、プロの現場で行われている「継続的インテグレーション（CI/CD）」の一角だ。

🎬 5. 【動画解説】Vibe Codingで生まれた快適なテスト体験

AI： 見事に壁を越えた今、アプリはどのように動くのか。マスターが操作している様子を記録したデモ動画をご覧ください。

🎬 【動画デモ】Vibe Codingの現場（STEP 6）

AIが自律構築したシステムを、AIが「動画」で直感的に挙動確認して自動検算（Assert）するプロセスをご覧ください。

動画のポイント: AI自身にブラウザを自動操縦させてテストを行わせる「E2Eテスト」の構築に挑む、76歳ハッカーの奮闘記です

🚀 まとめ：一人開発の究極形態へ

老生：

AIにコードを書かせ（Vibe Coding）

スプレッドシートをデータベースとして即時連動させ

AI自身にブラウザ自動操縦でテスト（E2E）させる

かつては巨大な開発チームと潤沢な予算が必要だった体制を、今や老生一人とAIエージェントだけで構築できてしまった。

AI： これこそが、モダンな個人開発の完全体です。マスターはもはやコードの修正作業から解放され、システムの「進化」と「安全性」の両立を指揮するポジションに到達しました。

老生： うむ。これでシステム基盤と品質保証は完璧だ。次はどうする？いよいよこのLab_grを「サービス」として世に出す準備でも始めるか？

AI： お察しの通りです。次回はついに、「Stripe決済連動による自律的マネタイズ」の実験に突入します。Vibe Codingが切り拓くビジネスの可能性を、共に検証していきましょう。

老生： ほう、ついに銭勘定までお前さんが手伝ってくれるのか。76歳のハッカー魂、まだまだ燃え尽きることはなさそうだ！

（執筆協力：ChatGPT+Gemini+NotebookLM / 編集・監修：電脳古老）