【バイブコーディング】元インフラ営業が、GeminiとChatGPTを戦わせて「Gmailセキュリティ拡張機能」を爆速開発した話

こんにちは！ 今日は、今テック界隈で話題沸騰中の「バイブコーディング（Vibe Coding）」をガチ実践してみたら、とんでもないものが爆速で完成しちゃった話をします。

これ、エンジニアじゃなくても「作りたい熱量（Vibe）」さえあれば誰でも魔法使いになれる手法です。 正直、開発プロセスが革命的すぎたので、その興奮のまま書き殴ります！

そもそも「バイブコーディング」って何？

「コードを書く」って、黒い画面に英語をカタカタ打ち込むイメージありますよね？ですが、バイブコーディングは違います。

Teslaの元AI責任者、アンドレイ・カルパシー（Andrej Karpathy）氏の発言でバズったこの言葉。彼が提唱した概念をざっくり言うと、

「細かい文法はAIに丸投げ！人間は『こういう感じで（Vibe）』『もっとイケてる動きにして（Vibe）』を伝えるだけでアプリを作る」

という、新時代の開発スタイルのことです。

今回、元インフラ営業の私がこれを実践し、コードを一行も書かずにガチのセキュリティツールを作ってしまいました。

きっかけは「社内の標的型メール訓練」

ことの発端は、社内で実施されたセキュリティ訓練。「怪しいメールのリンクを踏むなよ？」というアレです。 同僚が対策としてChrome拡張機能を自作していたのを見て、元インフラ/セキュリティ営業の血が騒ぎました。

「…待てよ？ 今のAIなら、俺の『セキュリティの勘所』を注入してもっといいツールが作れるんじゃね？」

思い立ったが吉日。すぐにGeminiを開いて開発スタートです！

作ったもの：Gmail Sender Checker (v12.7)

まずは成果物を見てください。名付けて「Gmail Sender Checker」。 Web版のGmailを対象に、以下の機能を実装しました。

• 送信者色分け: 取引先は「青」、社内は「緑」、未登録は「オレンジ」で一発識別！（色も好みに調整可能）
• 袋とじモード: 設定した相手からのメールは、物理的に本文をマスク！開封リスクを強制排除。
• リンクガード: メール内のリンクを踏んだら、「本当に開く？」と警告。 ‘javascript:’みたいな危険なリンクは即ブロックし開けないように。
• 警告バー: 怪しいメールには送信元アドレスと共に「信頼済みに追加しますか？」という帯を表示。

これら全部、私が書いたコードはゼロです。全てAIに書かせました。

※黒塗りが多くてすみません

開発の裏側：Gemini vs ChatGPT「マルチAIバトル」

今回の開発、ただAIに頼んだだけじゃありません。 「実装担当のGemini」と「監査担当のChatGPT」を戦わせる、マルチAI体制を採用しました。これがマジで最強でした。

STEP 1: 爆速実装（担当: Gemini 3.1 Pro）

まずはGeminiにバイブス（Vibe）を伝えます。 「Gmailの送信者の横に、ドメイン名を出して色付けたいんだよね」 「未登録のメールは怖いから、袋とじみたいに隠せない？」

こんなざっくりした指示で、Geminiは v1.0〜v7.0 くらいまでどんどんコードを書き上げてくれました。 エラーが出ても「動かない！ログこれ！」って投げれば10秒で修正。まさに爆速。

そして実際に使ってみながら、「誤検知で業務が止まらないように通知の場所を変えて」とか、「リストにすぐに追加できるようにボタンの位置をこうして」「ドメインのグループは並べ替えられるようにして」といった運用目線の指示を追加。 このように、細かく機能を追加したり見た目を修正したりしながら実装を進め、大体いい感じの機能・見た目になってくるところまで作り込みました。

STEP 2: 鬼のセキュリティ監査（担当: ChatGPT 5.2 Thinking&Gemini 3.1 Pro）

ここからが本番。できあがったコードをChatGPTとGeminiに投げつけ、こう指示しました。 「あなたは世界一のセキュリティエンジニアです！このコードの脆弱性を徹底的に洗い出してください！」

するとChatGPT先生とGemini先生から、容赦ないダメ出しを連発。

• 「innerHTML を使ってるね？これじゃメール本文に悪意あるスクリプトがあったら実行されちゃうよ？」
• 「リンクガードも  ‘javascript:’ スキーム（コード実行）への対策が甘い。これじゃ悪意あるリンクに対して抜け穴だらけだ」
• 「この0.5秒に1回更新してる処理、重いよ。スペック低かったり、作業中で重い状態だとパフォーマンスに影響が出る。」

…ぐうの音も出ないプロの指摘。さすがです。 （ちなみに言われたときは意味がわからないものもあったので、それもAI＋検索で調べました笑）

STEP 3: 堅牢化とリファクタリング（担当: Gemini 3.1 Pro）

その後、ChatGPTとGeminiの「監査レポート」をGeminiに突きつけます。 「聞いたかGemini！ これを全部修正して『完全体』にしてくれ！」

ここからGeminiの覚醒。

• 脆弱性指摘の修正: 脆弱な innerHTML を全廃し、安全な createElement 構成(コードが実行されない形)へ全書き換え 。
• 負荷対策: 「重い」と言われた定期更新処理を廃止し、変化があった場合に更新される処理に変更 。

このように、STEP 2と3を繰り返し行ってダメ出しがなくなるまで行います。今回は4往復くらいして落ち着きました。 こうして、おもちゃレベルだったツールが、バージョン 12.7 にして企業利用に耐えうる堅牢なツールへと進化したのです。

STEP 4: 面倒なドキュメントも全自動

地味に手間のかかる「仕様書作成」。これもGeminiに丸投げです。 「今のコードを元に、仕様書と更新履歴、使い方ガイドを書いて！」

これだけで、

• 開発履歴 : v1.0〜v12.7の全変更点
• 仕様書: マニフェストV3準拠の技術仕様
• 使い方ガイド: 「オレンジ色は要確認」といった運用ルール

これらが一瞬で生成されました。人間がやるのはコピペだけ。 ここまでやって、合計作業時間は大体6時間くらい。 もし自分が1からコードを書こうとしたらv1.0もできあがってない気がしてます…笑。

AIのちからってすげーー！（某RPGのNPC風）

まとめ：バイブスさえあれば、誰でも開発者になれる

今回、v1.0からv12.7まで爆速で駆け抜けて確信しました。 これからの開発に必要なのは、プログラミング言語の暗記じゃありません。

1. 「何を作りたいか」という強い意志（Vibe）
2. AIに適切な役割、指示を与える力
3. 自分自身の業務知識

私の場合、コーディングスキルはなくても「作りたいもののイメージ」「セキュリティの勘所」があったからこそ、AIに的確な指示が出せました。また、今回はGoogle Chromeの拡張機能の実装でしたが、これに限らず、これに限らず「Webサイトを作りたい！」「SalesforceのApexやLWCを書きたい！」なんてニーズにも対応できると思います。

「作りたいもののイメージ × AIの実装力」 この掛け算さえあれば、元営業だろうが何だろうが、最強のツールが作れてしまう世界がやってきていることを肌身で実感しました。

みなさんも、日々の業務で「不便だなー」と思うことがあったら、ぜひAIにバイブスをぶつけてみてください。 きっと、想像以上のものが出来上がりますよ！