第11章 AIに作らせて、読む（Vibe coding編）
📖 この章のゴール：AI（Vibe coding）にアプリを作らせ、出てきたコードを自分で読んで「安全かどうか」を判断できるようになる。 ← 目次・はじめにへもどる
📱 一瞬でアプリの形ができる時代
「Twitterみたいなアプリを作って」とAIにお願いすると、ほんの数秒でコードがずらっと出てきます。投稿フォームもタイムラインも、それっぽい見た目がいきなり完成する。これが Vibe coding（バイブ・コーディング） ＝「ノリでAIに作らせる」やり方です。
すごく便利です。でも、ここで覚えてほしい一番大事なこと。
「動く」と「安全・正しい」は、まったくの別物です。
料理にたとえると、見た目はおいしそうな盛りつけでも、中が生焼けかもしれない。AIが出すコードも同じで、「画面は動いてる」けど「他人の投稿を勝手に消せる穴があいている」ことが普通にあります。
🤔 AIの得意・苦手を知る 🟢
AIは万能ではありません。クセを知っておきましょう。
得意なこと（どんどん任せてOK）
- とにかく速い。人間が30分かかる雛形を数秒で出す。
- たたき台（雛形）づくり。ゼロから書く最初の一歩を肩代わりしてくれる。
苦手・危険なこと（人間が見張る必要あり）
- RLSを忘れる。「とりあえず表示する」コードは書けても、「他人に見せない」という鍵をかけ忘れがち（→第4章）。
- 秘密鍵をフロントに置く。本来サーバーの奥に隠すべき鍵を、誰でも見える画面側のコードに書いてしまうことがある（→第10章）。
- 「とりあえず動く」危ない近道を平気で選ぶ。速さ優先で、安全を後回しにする。
だから人間の側に「コードを読める目」が必要なのです。じつは、この教材の第2章からここまでの全部が、その「目」を育てるためにありました。
🛠 実践：AIに作らせて、読む 🟢
うまく作らせる4つのコツ
- 一気に作らせない。1機能ずつ。 認証 → 投稿 → RLS → タイムライン…と小さく区切る。塊が小さいほど、読んで確かめられる。
- 前提を明示する。 「Supabase ＋ Google認証 ＋ RLS を使って」と毎回伝える。言わないとAIは勝手な前提で作る。
- 「なぜ」も説明させる。 コードだけでなく「なぜこう書くか」を一緒に出させる。理由が言えないコードは怪しい。
- 動かして確かめる。 出てきたものを必ず自分で実行し、目で見て確認する。
段階的に頼むプロンプト例
🗣 「Supabase と Google認証を使って、ログイン機能だけ作って。なぜその書き方が安全かも説明して。」
🗣 「次は投稿フォームを作って。投稿にログイン中のユーザーIDを保存するようにして。」
🗣 「最後にRLSを追加して。自分の投稿しか編集・削除できないポリシーにして。SQLも出して。」
読むときの統合チェックリスト
各章の「🤖 AIに頼むなら」を、ここに集めました。AIのコードを受け取ったら、この目で点検します。
- RLSが有効になっていて、
auth.uid() = user_idという「持ち主だけ」ポリシーがある（→第4章） service_rolekey などの秘密鍵がフロント（画面側）に無い（→第10章）- ユーザーが入力した文字を画面に出すとき、XSS対策がされている（→第3章・第10章）
- 認証は Supabase / Google にまかせ、自前でパスワードを持っていない（→第2章）
- 見せる/隠す・制限はRLSでやっていて、フロントの
if文だけに頼っていない（→第5章） - 個人のデータを、みんなで共有するキャッシュに入れていない（→第9章）
⚠️ ハマりどころ
- 「動いた＝安全」と思い込む。 一番よくある罠。画面が動くことは、鍵がかかっていることを意味しません。
- AIは自信満々に間違える。 「これで完璧です！」と言いながら穴だらけのことがある。語り口でだまされず、うのみにしない。
- コピペで秘密鍵を晒す。 AIが出したサンプルに鍵を貼り付け、そのまま公開リポジトリに上げてしまう事故。
- 巨大な塊を一度に作らせる。 何百行も一気に出させると、人間が読めなくなり、結局チェックできない。
🤖 AIにAIのコードをレビューさせる
おもしろいことに、AIが書いたコードを、別のAI（や同じAI）にチェックさせることもできます。書く側と点検する側を分けるイメージです。
🗣 「このコードをセキュリティの観点でレビューして。特に、このRLSで他人のデータが見えたり消せたりしないかを、具体的に確認して。」
こう頼むと、見落としていた穴を指摘してくれることがあります。
ただし、忘れてはいけないこと。最終判断は人間（あなた自身の目）でやる。 AIのレビューも間違えます。「AIがいいって言ったから安全」ではなく、チェックリストと照らして自分で納得することが、本当のゴールです。
📝 ことばメモ
- Vibe coding（バイブ・コーディング）：ノリ・感覚でAIにコードを作らせるやり方。速いが、読んで確かめる責任は人間に残る。
- 雛形（たたき台）：完成品ではない、最初のたたき台。ここから直していく前提のもの。
- レビュー：書いたコードを、別の目で点検して問題を探すこと。
- 最小権限：「できることを必要な分だけに絞る」考え方。RLSで自分のデータだけ触れるようにするのもこれ。
- ハルシネーション：AIが自信たっぷりに事実でないことを言う現象。「AIの自信ある間違い」。
➡️ 次の章へ
AIを使えば、小さなTwitterクローンはすぐ作れます。では、もし利用者が爆発的に増えたら？ 「フォロワー1億人問題」 に挑む、スケールの物語へ進みましょう。