MEDIUM

BLOG

ブログ

「バイブコーディング」実践ログ

DIVE in AI
サムネイル画像





Claude Coworkを使った「バイブコーディング」でウェブアプリケーション制作実践ログです。




今回のウェブアプリの制作テーマは、色々なサブスクサービスの解約方法。入会は簡単なのに、解約の手順ってややこしくって大変ですよね。

ということで、様々なサブスクサービスの解約方法をサイト横断で検索し指南してくれるウェブアプリを作ろうというのがお題です。



はじめに：コーディングは「書く」から「指揮する」へ



最近「バイブコーディング（Vibes Coding）」という言葉をよく耳にします。



元OpenAIのAndrej Karpathy氏などが提唱し、界隈で盛り上がりを見せているこの言葉。簡単に言えば、「細かい構文やエラーに悩まされず、AIと対話しながら”ノリ（Vibe）”と”勢い”で作りたいものを具現化する」という新しい開発スタイルのことです。



「本当にそんな適当な感じでちゃんと動くものが作れるの？」



そんな思いをもとに、一つWebアプリを作ってみました。実際私はウェブ等の基本的な知識はあるもののプログラムに関してはほとんど素人です。



アプリケーションのタイトルは「MEDIUM AI サブスク停止ガイド」としました。



これは、様々なサブスク解約方法をAIが教えてくれるツールです。これまでなら数日から数週間かかっていた作業が、バイブコーディングの手法を使うことで驚くほど短時間でアップロード・公開までできました。



まずは成果物から見てください。
https://un-sub.vercel.app/









バイブコーディングとは結局なにか？



私が体感したバイブコーディングの定義は以下の3点です。



    

  • 脱・完璧主義：最初から綺麗な設計図（要件定義）を書かない。「なんとなくこんな感じ」で走り出す。
    • 

  • AIが手足、自分が脳：AIツール（今回はClaude Cowork）に「こういう機能が欲しい」「デザインをもっと明るくさせて」と自然言語で指示を出す。あとはお任せ。
    • 

  • 超高速サイクル：エラーが出たら「直して」と投げる。動いたら「次はこれ」と積み上げる。プロトタイプの段階でどんどん機能を付加したり変更したりしてゆく。
    • 




開発プロセス：AIとの「セッション」



バイブコーディングを実践して感じたメリットは「モチベーションが途切れない」ことです。



    

  • エラー解決で何時間も沼ることがない。
    • 

  • 「作りたい」という熱量が冷める前に、動くものが目の前にできる。
    • 




使用技術の概要



今回のアプリは以下の構成で作りました。これらはすべてAIに「こんなアプリを作りたい」と伝えた結果、提案されたものです。



    

  • React 19 + TypeScript + Vite ― フロントエンドの基盤。Viteのおかげで開発中のページリロードが爆速。
    • 

  • Tailwind CSS ― CSSをほとんど書かずにHTMLのクラス名だけでデザインが完成。
    • 

  • Google Gemini 2.0 Flash ― AIの頭脳部分。Google検索と連携してリアルタイムで最新情報を取得。
    • 

  • Vercel ― ホスティングとAPIサーバーを兼ねるプラットフォーム。無料枠で公開までできる。
    • 




公開するときに一番考えたこと：APIキーのセキュリティ



ローカルで動かしている分には問題なかったのですが、いざ「インターネットに公開しよう」となったとき、一番の壁になったのがAPIキーのセキュリティでした。



APIキーって何？なぜ危険？



今回のアプリはGoogleのGemini AIを使っています。AIを使うには「APIキー」という認証トークンが必要です。これはいわば「家の鍵」のようなもので、キーを持っている人は誰でもそのAIサービスを使えてしまいます。



もしAPIキーが漏れたら、悪意のある第三者に大量に使われて、料金が自分に請求される可能性があります。実際に誤ってAPIキーを公開してしまい、数分で不正利用されたという話も珍しくありません。



最初の設計：フロントエンドから直接呼び出し



最初のバージョンでは、ブラウザ（フロントエンド）から直接Gemini APIを呼び出していました。この方法だとコードはシンプルなのですが、大きな問題があります。



ブラウザのDevTools（F12）を開けば、誰でもAPIキーが見えてしまうのです。



フロントエンドのJavaScriptコードはすべてユーザーのブラウザにダウンロードされて実行されます。つまり、フロントエンドのコードに埋め込んだ秘密情報は、原理的に隠すことができません。これは環境変数（.env）を使っていても同じです。ビルド時に値が展開されて、最終的にブラウザに届くコードにはキーがそのまま含まれるからです。



解決策：バックエンドプロキシパターン



Claudeに相談したところ、「バックエンドプロキシ」というパターンを提案されました。仕組みはシンプルです。



    

  • ユーザーのブラウザからは、自分のサーバー（/api/cancel）にリクエストを送るだけ
    • 

  • サーバー側が、環境変数からAPIキーを読み込んでGemini APIを呼び出す
    • 

  • 結果だけをブラウザに返す
    • 




こうすることで、APIキーはサーバーの環境変数にだけ存在し、ブラウザには一切送られません。Vercelの「Serverless Functions」という機能を使うと、api/フォルダに置いたファイルが自動的にサーバー側のプログラムとして動作します。専用サーバーを用意する必要もなく、無料で使えます。



Vercelでの環境変数の設定



Vercelの環境変数設定で少しハマった点もありました。vercel env add GEMINI_API_KEY でキーを設定する際、「Sensitive（機密）にしますか？」と聞かれます。「Sensitive」にするとDevelopment環境には適用できないという制限があるので、通常は「N」を選択してProductionとPreview環境に適用するのがおすすめです。



その他のセキュリティ対策



APIキーの保護以外にも、いくつかの安全対策を講じています。



    

  • .gitignoreの設定 ― .env.local をGit管理外にして、誤ってGitHubにキーをプッシュしないように。
    • 

  • エラーハンドリング ― APIキーが無効な場合やレート制限に引っかかった場合に、ユーザーに適切なメッセージを表示。
    • 

  • POSTメソッドのみ許可 ― APIルートはブラウザで直接URLを叩いても動かないように。
    • 




ハマったポイントと解決策



バイブコーディングとはいえ、すべてがスムーズにいったわけではありません。特にVercelへのデプロイ周りで苦戦しました。



Geminiのモデル名が見つからない



最初に使ったモデル名 gemini-2.5-flash-preview-05-20 が「見つからない」とエラーに。プレビュー版のモデルは名前が変わることがあるそうで、安定版の gemini-2.0-flash に変えたら解決。本番環境では安定版を使うのが無難です。



404エラー → 500エラーの敷いた道



デプロイ後、APIルートにアクセスすると404（見つからない）エラー。vercel.jsonの設定を色々試した結果、「余計な設定を入れるほど壊れる」ということがわかり、最小限の設定に簡素化したら解決。



その後500（サーバー内部エラー）になったのですが、これは「ESM/CommonJS」というNode.jsのモジュールシステムの互換性問題でした。使っている @google/genai パッケージがESM専用のため、package.json に "type": "module" が必要だったのですが、それを削除してしまっていたのが原因でした。



このあたりは正直AIがいなかったら原因特定に相当時間がかかったと思います。Claudeにエラーを伝えたら、「そのパッケージはESM専用だからtype: moduleが必要」と即座に指摘してくれました。



文字の視認性問題



デザイン面でも修正が必要でした。AIが作ったデザインが「オシャレだけど文字が薄すぎて読めない」という問題。「もっと濃くして」と何度か伝えて調整してもらいました。デザインの微調整は「人間の目」が必要で、AI任せだけでは難しい部分です。



バイブコーディングのメリットとデメリット



一方で、AIが書いたコードがブラックボックス化しやすいという側面もあります。個人開発やプロトタイプ作成においては、このスピード感こそが最大の武器になると感じました。



メリット



    

  • エラー解決で何時間も沼ることがない。
    • 

  • 「作りたい」という熱量が冷める前に動くものが完成する。
    • 

  • 知らない技術（ESM、Serverless Functions等）もAIのサポートで乗り越えられる。
    • 

  • セキュリティやベストプラクティスなど、自分が知らない観点もAIが指摘してくれる。
    • 




デメリット



    

  • AIが書いたコードがブラックボックス化しやすい（中身を理解せず使うリスク）。
    • 

  • デザインの微調整は人間の目が必要（AI任せだと「読みづらい」等の問題が起きる）。
    • 

  • 複雑なデプロイ設定では試行錯誤が必要なこともある。
    • 




おわりに



「プログラミングは難しい」という時代は終わりつつあるといいます。「どんなVibe（雰囲気・体験）を作りたいか」というアイデアさえあれば、誰でも形にできる時代の到来です。



ただし、「公開する」となると、それなりの知識が必要になります。今回学んだAPIキーの秘匿はその代表例です。そのあたりも含めてAIがサポートしてくれるのは、心強い限りです。



今回作成した「MEDIUM AI サブスク停止ガイド」、ぜひ触ってみてください。そして、もしバグを見つけたら……それもまたVibesで直していこうと思います（笑）。



Un-Sub を試す
https://un-sub.vercel.app/








								

    

	
一覧へ戻る