僕は最初、API連携を甘く見ていた。「AIにコードを書かせるなら、外部サービスとの接続もプロンプト一発だろう」と。2025年7月、受講者向けのLINE通知機能をBolt.newで作ろうとした時、その甘さに気づかされた。
APIキーの取得方法が分からない。認証の仕組みが理解できない。エラーが出ても原因の特定が困難だった。API連携は、バイブコーディングの中でも最も「基礎知識が必要な領域」だった。
バイブコーディングでAPI連携をする方法、結論から言うと「仕組みを理解してからAIに任せる」の順番が正解。逆だと確実にハマる。
答えは、思ったよりシンプルだった。
- API連携の基本概念——プログラミング未経験者向けの解説
- バイブコーディングでAPI連携する具体的な手順
- Stripe・Supabase・LINE APIなど実用的な連携パターン
- AIにAPI連携コードを書かせるプロンプトのコツ
- API連携でよくあるエラーと対処法
API連携とは何か——バイブコーディングで知っておくべき基礎
APIとは、アプリケーション同士を繋ぐ「窓口」。レストランで例えるなら、キッチン（サービス提供元）とお客さん（自分のアプリ）をつなぐウェイターがAPIだ。
バイブコーディングでAPI連携が必要になる場面は多い。決済機能を追加したい→Stripe API。ユーザー認証を実装したい→Supabase Auth。通知を送りたい→LINE Messaging APIといった具合だ。これらは全て外部サービスのAPIを使って実現する。
自分のアプリが外部サービスに「リクエスト」を送り、外部サービスが「レスポンス」を返す。この往復がAPI連携の本質。HTTPメソッド（GET、POSTなど）の種類を覚える必要はないが、「データを取得する」と「データを送信する」の2種類があることは知っておくと便利だった。
バイブコーディングでAPI連携する手順
実際の手順を、僕がStripe決済を組み込んだ時の経験をもとに説明する。2025年11月のこと。
Stripeの場合、アカウント登録後にダッシュボードから「テスト用APIキー」が発行される。本番用とテスト用の2種類がある点に注意。開発中はテスト用を使い、公開時に本番用に切り替えた。
「Stripe APIを使って、商品の決済ページを作って。テスト用APIキーは〇〇」と指示した。ここで重要なのは、APIのバージョンとライブラリの指定。「Stripe.jsのv3とNext.jsのApp Routerで」と明記すると出力が安定する。
APIキーをコード内に直接書くのは厳禁。.envファイルに格納する。「環境変数からAPIキーを読み込むようにして」とAIに指示すれば、正しい書き方で出力された。
テスト用APIキーで実際にリクエストを送り、期待通りのレスポンスが返ってくるか確認する。Stripeの場合、テスト用のカード番号（4242 4242 4242 4242）で決済の流れを一通り試せた。
APIキーをGitHubに公開リポジトリとしてプッシュしてしまう事故が後を絶たない。僕の受講者でも2名がこの失敗を経験した。.gitignoreに.envを追加することを忘れないこと。一度漏洩したキーは即座に無効化して再発行する必要がある。
実用的なAPI連携パターン5選
バイブコーディングで実装できるAPI連携のパターンを、難易度順に紹介する。
| API | 用途 | 難易度 | 必要な前提知識 |
|---|---|---|---|
| OpenWeatherMap | 天気情報の表示 | ★☆☆ | ほぼ不要。GETリクエストのみ |
| Supabase | データベース + 認証 | ★★☆ | データベースの基本概念 |
| LINE Messaging API | LINE通知の送信 | ★★☆ | Webhookの概念 |
| Stripe | 決済機能 | ★★★ | 認証フロー、Webhookの理解 |
| OpenAI API | AI機能の組み込み | ★★☆ | プロンプト設計の基礎 |
初心者が最初に試すべきはOpenWeatherMap。無料で使え、認証も簡単。APIキーをURLパラメータに含めるだけでデータが取得できた。この成功体験が、より複雑なAPI連携への足がかりになる。
受講者の中で最も人気が高いのはSupabaseとの連携。データベース、ユーザー認証、ストレージがセットになっており、バイブコーディングとの相性が抜群。「Supabaseでユーザー登録・ログイン機能を作って」と指示するだけで、認証フロー全体が自動生成された。
AIにAPI連携コードを書かせるプロンプトのコツ
API連携のプロンプトは、通常のUI生成とは書き方が異なる。3つのポイントを押さえれば精度が上がった。
1つ目は、APIの公式ドキュメントのURLを渡すこと。「Stripe公式ドキュメント（https://stripe.com/docs）を参照して実装して」と指定すると、AIが最新の仕様に沿ったコードを出力する確率が高まった。
2つ目は、認証方式を明示すること。「Bearer Token認証」「APIキー認証」「OAuth 2.0」など、方式を指定する。指定しないとAIが間違った認証方式でコードを書くケースがあった。
3つ目は、エラーハンドリングを含めるよう指示すること。「APIのレスポンスが失敗した場合のエラー処理も含めて」と一言添える。これがないと、正常系だけのコードが返ってきて、本番環境で予期しないクラッシュが発生した。
API連携でよくあるエラーと対処法
受講者が頻繁にぶつかるエラーを3つ挙げる。
APIキーが間違っているか、認証方式がずれている場合に発生する。まずAPIキーのコピペミスを確認。次に環境変数が正しく読み込まれているか確認する。僕の経験では、.envファイルの変数名にスペースが混入していたケースが最も多かった。
ブラウザからAPIを直接呼び出すと発生する。フロントエンドから直接APIを叩くのではなく、サーバー側（APIルート）経由でリクエストを送る設計にすべきだ。「Next.jsのAPIルートを経由してStripe APIを呼び出して」と指示すれば解決した。
短時間に大量のリクエストを送ると、APIの利用制限に引っかかる。特に無料プランでは制限が厳しい。リトライ処理と待機時間の設定をAIに指示しておくと、このエラーを回避できた。
- API連携は「仕組みを理解してからAIに任せる」の順番が正解
- 手順は「APIキー取得→AI指示→環境変数設定→テスト」の4ステップ
- 初心者はOpenWeatherMap、中級者はSupabase連携から始めるのが効率的
- プロンプトには公式ドキュメントURL・認証方式・エラーハンドリングを明記する
- APIキーの管理は最重要。コードへの直書きとGitHubへの公開は厳禁
- 401エラー・CORSエラー・レートリミットが三大トラブル。対処法を知っておけば怖くない
API連携ができるようになると、バイブコーディングで作れるアプリの幅が一気に広がる。決済、通知、データ保存——どれも外部APIなしには実現できない機能だ。まずはOpenWeatherMapで最初の成功体験を掴んでほしい。
