【Vibe Codingその8】動いた。でも使えない。UI導線が“存在しない”問題に詰まった
はじめに：Issue 1〜23を終えて「完成したはず」だった
前回（その7）では、AIに一発で全部作らせるのではなく、作業をGitHub Issue（23件）に分割し、1Issueずつ順番に実装する流れにしました。
そして今回（その8）は、Issueを一通り実装したあと、「本当に終わってる？」を確認してから、ローカルで動かして実物を触った回です。
結論から言うと、
- 見た目（デザイン）はシンプルでかなり気に入った
- でも、触ってみると 「使うための入口がない」 ところが目立った
この「実装できた」と「使える」の差が想像以上に大きかったので、起きた問題と次にやるべきことをまとめます。
これまでの記事（その1〜その7）
- その1：https://comp.make-all.net/vibe_coding_01
- その2：https://comp.make-all.net/vibe_coding_02
- その3：https://comp.make-all.net/vibe_coding_03
- その4：https://comp.make-all.net/vibe_coding_04
- その5：https://comp.make-all.net/vibe_coding_05
- その6：https://comp.make-all.net/vibe_coding_06
- その7：https://comp.make-all.net/vibe_coding_07
「実装は終わった？」はCodexにコード確認させた（動かす前のチェック）
Issue 1〜23まで一通り実装を終えたタイミングで、Codexにこう聞きました。
「コードを見て、実装が終わったか確認して」
つまり、**コード上は一通り揃っている（つもり）**という状態を、AIにも確認させた上で、次のステップ（実際に動かす）に進んだ…という流れです。
ただ、この時点で痛感したのはこれでした。
“コードとして揃っている”と“ユーザーが使える”は別
さらに言うと、今回のズレは「要件の抜け」が原因として大きかった気がしています。
最初にGeminiと壁打ちで要件定義書を作っていたとき、私は「保有銘柄を追加・修正する機能」を明確に要望していました。
ところが、何度も修正して「これまでの内容をmarkdown形式の要件定義書として作成して」とやり取りしているうちに、その機能に関する記述が要件から消えていたんですよね。
気づいたときに何度か追記を指示したものの、どうも会話の流れで抜け落ちることがあるようです。
それでも私は「CRUDって書いてあるし、GUIくらいは作ってくれるだろう」と安易に妥協してしまった。
この妥協が、あとでそのまま“使えない”として返ってきました。
ローカル起動してブラウザで確認（API/DBあり構成）
今回はAPIやデータベースが動く構成で起動しました。手順は以下です。
cd backend
python -m venv .venv
# Linux / macOS
source .venv/bin/activate
# Git Bash (Windows)
source .venv/Scripts/activate
pip install -r requirements.txt
python ../scripts/migrate_db.py --db-path data/mytradeview.db
export MYTRADEVIEW_USE_DB=true
export MYTRADEVIEW_DB_PATH=data/mytradeview.db
uvicorn app.main:create_app --factory --reload
ブラウザで以下にアクセス：
http://localhost:8000/dashboard
第一印象：デザインは良い。でも最初の一歩で詰まる
画面を開いた第一印象は良かったです。
シンプルなGUIで、デザインも好みでした。
ただ、すぐに現実に戻されました。
最初にやりたかったのは、サンプルとして登録されていた銘柄を、実際の保有銘柄に置き換えること。
ところが「それをするにはどこを押せばいいのか」がまったく分からない。
“操作の入口”が見当たらない時点で、アプリとして最初の一歩が踏み出せませんでした。
問題①：追加/編集/インポートの導線が“そもそも存在しない”
私は「サンプル銘柄を実データに置き換える」ために、当然どこかに
- 追加（Add）
- 編集（Edit）
- インポート（Import）
の入口があると思って探しました。
しかし結論として、画面上にそれらのボタンはそもそも存在しませんでした。
つまり「機能として作ったつもりでも、ユーザーが触れる入口が無い」状態です。
この時点で、アプリとしての最初の操作が成立しません。
（ここにスクショ：ダッシュボード全体）
（ここにスクショ：サンプル銘柄が見える部分のアップ／※ボタンが無いことが分かる画角）
問題②：「設定」ボタンが押せない（リンクが未設定）
次に「設定」というボタンを見つけました。
「設定に行けば、銘柄管理の入口があるかも」と思って押そうとしたのですが……何も起きません。
調べると、これは リンク未設定 でした。
具体的には、<a href="..."> が付いていない（あるいは遷移先が空）感じで、クリックしても遷移できない状態です。
- クリックしても遷移しない
- URLも変わらない
- “ボタンの見た目”だけがある
（ここにスクショ：設定ボタンが見える状態）
（ここにスクショ：クリックしても無反応な様子が分かる状態）
その8の学び：AIの「実装完了」と、ユーザーの「使える」は違う
今回の問題をまとめると、
- UIの見た目は作れている
- でも 操作導線が無い（ユーザーの次の行動が決まらない）
- さらに 設定ボタンがリンク未設定で機能していない
つまり、画面がある＝アプリが使える、ではない。
Issue駆動で積み上げても、Issueの受入条件が「画面がある」「ページがある」止まりだと、
「入口がない」「遷移しない」「データを入れられない」が残りやすい、ということが分かりました。
次に直す優先順位：まず“入口”を作る
次は機能追加より先に、「使える状態」を作るのが最優先です。
- 設定ボタンにリンクを貼る（設定画面へ遷移できるようにする）
- 銘柄管理画面を用意する（一覧＋追加ボタンを最低限）
- 銘柄の追加フローを作る（追加→保存→一覧に反映）
- サンプルから実データへ移行できる入口を作る（フォーム or CSVインポート）
次回予告：導線とCRUDを修正して“使えるアプリ”に寄せる
次回（その9以降）は、
- 「設定が押せない（リンク未設定）」
- 「追加/編集/インポート導線がない」
をCodexに修正させます。
これまでの記事（その1〜その7）
- その1：https://comp.make-all.net/vibe_coding_01
- その2：https://comp.make-all.net/vibe_coding_02
- その3：https://comp.make-all.net/vibe_coding_03
- その4：https://comp.make-all.net/vibe_coding_04
- その5：https://comp.make-all.net/vibe_coding_05
- その6：https://comp.make-all.net/vibe_coding_06
- その7：https://comp.make-all.net/vibe_coding_07