API仕様書だけ渡された…さてどうする？AI×自社開発のサバイバル術

※この記事はjs、PHP、HTMLが何となく分かるレベルの方を対象にしています。

はじめに：ChatGPTが開発現場の“相棒”になる時代

「API仕様書だけ渡されたから、あとはよろしく」──そんな無茶ぶりに直面したことはありませんか？開発リソースは限られ、エンジニアが常駐しているわけでもない。けれど、機能は実装しなければならない。

そんなとき、救世主となるのが「ChatGPT」。AIとの対話だけで、コードのたたき台を作り、エラーの原因を調べ、UIの試作までもサポートしてくれる。この記事では、ChatGPTを開発パートナーとして使い倒す具体的な方法をご紹介します。

ChatGPTでできること・できないこと【API開発編】

✅ ChatGPTでできること

• API仕様書の読み取りと要約
• JavaScript（fetch, axios）、PHP（cURL）などのAPIクライアントコードの生成
• Postman用リクエスト例の作成
• HTML+JavaScriptによる簡易UIの作成

❌ ChatGPTにできないこと

• 実際のAPIエンドポイントの動作確認
• OAuth認証など複雑なフローの再現
• あいまいな仕様や抜けの多いドキュメントの補完

ChatGPT活用の基本フロー（API開発向け）

1. 仕様書を読み込ませる
   「以下のAPI仕様に従って、fetchでPOSTするコードを書いて」など具体的な用途とセットで依頼します。
2. 実装意図を明確に伝える
   「フォームからデータを送信したい」「確認画面もつけたい」など、目的をはっきり伝えるのがコツ。
3. 生成されたコードを修正依頼
   完璧なコードは出てこない前提で、「ここをこうしてほしい」と逐次リクエスト。
4. テスト用データやバリデーションも依頼
   「ダミーデータで動かしたい」「空欄チェックも入れて」などの調整もAIに任せられます。

プロンプト例：
「以下の仕様に基づいて、POST用のfetchコードを書いて。HTMLフォームから送信する構成にして」

ChatGPT出力サンプル：

fetch("https://example.com/api/send", {
  method: "POST",
  body: JSON.stringify({ name, email }),
  headers: { "Content-Type": "application/json" }
});

実践：ChatGPTでAPI開発を進めたケーススタディ

● ケース1：仕様書からPostmanのリクエストを生成

前提：以下のような仕様書をもとに、POSTリクエストをPostmanで作成したい。

{
  "endpoint": "https://example.com/api/submit",
  "method": "POST",
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer {token}"
  },
  "body": {
    "name": "string",
    "email": "string",
    "message": "string"
  }
}

プロンプト例：
「以下の仕様に基づいて、Postmanで使えるリクエスト設定（JSONまたはcurl）を作って」

ChatGPT出力（curl例）：

curl --request POST \
  --url https://example.com/api/submit \
  --header 'Authorization: Bearer {token}' \
  --header 'Content-Type: application/json' \
  --data '{
    "name": "山田太郎",
    "email": "taro@example.com",
    "message": "こんにちは"
}'

---

● ケース2：fetch関数によるPOST送信

プロンプト例：
「以下のAPIにPOSTするJavaScriptコード（fetch）を作って。レスポンスはコンソールに表示」

const data = {
  name: "山田太郎",
  email: "taro@example.com",
  message: "こんにちは"
};

fetch("https://example.com/api/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_TOKEN_HERE"
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error('Error:', error));

---

● ケース3：HTMLフォーム＋fetch送信UIを自動生成

プロンプト例：
「名前・メール・メッセージを送るフォームを作って。fetchでPOST、バリデーションありで」

<form id="contactForm">
  <input type="text" id="name" placeholder="お名前" required><br>
  <input type="email" id="email" placeholder="メールアドレス" required><br>
  <textarea id="message" placeholder="メッセージ" required></textarea><br>
  <button type="submit">送信</button>
</form>

<script></script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const message = document.getElementById('message').value.trim();

  if (!name || !email || !message) {
    alert("全ての項目を入力してください");
    return;
  }

  fetch("https://example.com/api/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ name, email, message })
  })
  .then(res => res.json())
  .then(data => alert("送信成功：" + JSON.stringify(data)))
  .catch(err => alert("送信エラー：" + err));
});
</script>

ChatGPTの限界と“人間の手”が必要な場面

ChatGPTは優秀ですが、あくまで補助。特に以下の場面では人間の判断が必要です：

• 認証フローの再現（特にOAuth2、JWT）
• エラーの原因が複雑に絡むとき（CORSやサーバー設定系）
• 実運用に耐えるコードの最適化

ただし、エラーログや不具合報告を貼り付けるだけで「原因と解決方法」を返してくれることも多く、“対話型デバッガー”として活用するのが現実的です。

プロンプト例：
「このfetchコードがCORSエラーになる理由を教えて」

fetch("https://api.otherdomain.com/data", {
  method: "GET"
});

ChatGPT回答（要約）:
このリクエストはクロスオリジンリクエストであり、サーバー側がAccess-Control-Allow-Originヘッダーを適切に設定していない可能性があります。

小ネタ

chatGPTでは実際のレスポンスが得られないという話がありましたが、Apidogなどのツールを使えば実際のレスポンスを取得することが出来ます。

• chatGPTで生成されたコードをコピー
• Apidogに貼り付けし実行
• レスポンスを確認

トークン取得であれば、上記でトークンを取得し、それを埋め込んでさらにApidogで実行すると、動作確認が可能です。

効率を上げる！ChatGPTプロンプト集（API開発向け）

シチュエーション	プロンプト例	補足
fetchでPOST送信	「この仕様書を使って、fetchでPOSTリクエストするコードを」	HTML付きも可能
バリデーション追加	「emailと電話番号のバリデーションを追加して」	JSで即生成可
エラー調査	「以下のログの原因を調べて」	コピー＆ペーストだけでOK
UI作成	「APIに送るための入力フォームを作って」	スタイル調整も可能

まとめ：ChatGPTは“開発パートナー”になる

ChatGPTはエンジニアの代わりにはなれません。でも、「API仕様書だけ渡された…」という状況で、現場を支える“仮想パートナー”としては頼れる存在です。

AIと対話しながらコードを書き、つまずいたら質問し、動かす中でまた修正していく──。まるで横にいるアシスタントと進めているような感覚で、自社開発を進めることができます。

人が足りない？知識が追いつかない？その悩み、まずはChatGPTに話しかけてみましょう。

🔁 すぐ使える基本のfetchテンプレート

function postData(url, data) {
  return fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(res => res.json());
}

// 使用例
postData("https://example.com/api", {
  user_id: 123,
  comment: "こんにちは"
})
.then(response => console.log(response))
.catch(error => console.error(error));