未経験でも「AI駆動開発」を体験してみた ― 郵便番号検索アプリを指示文と成果物つきで解説

Posted at 2026-08-10

未経験でもできる「AI駆動開発」入門 ― 郵便番号検索アプリを例に、指示の出し方から成果物まで解説

この記事で伝えたいこと

「AI駆動開発」と聞くと難しそうに感じますが、実際にやることは 「AIに文章で指示を出す」「出てきた成果物を確認する」「気になったら直してもらう」 の3つだけです。

この記事では、郵便番号を入力すると住所が表示されるWebアプリを例に、実際にAIへ出した指示文と、それに対してAIが作った成果物をセットで紹介します。同じように手を動かせば、プログラミング未経験でも同じ流れでアプリを完成させられます。

大まかな流れは次の2段階です。

AI駆動で書類（md）作成：要件定義／設計仕様／実装手順／動作検証をMarkdownで自動生成
AI駆動コーディング：実装フォルダの作成→バイブコーディング→AIによる動作検証→人による動作検証→仕様変更対応→再検証

今回作るもの

郵便番号を入力すると、対応する住所（都道府県・市区町村・町名）が表示されるだけのシンプルなWebアプリです。HTML・CSS・JavaScriptのみで作り、住所の検索には無料の郵便番号検索API「zipcloud」を使います。インストール不要で、ブラウザでindex.htmlを開くだけで動きます。

STEP1：要件定義書をAIに作ってもらう

最初に、作りたいものの条件だけを文章でAIに伝えます。難しい仕様を細かく書く必要はありません。

実際に出した指示

下記の指示に従って、01要件定義.mdを作成・修正してください。
- 郵便番号から住所が出てくるwebアプリを作りたいです。
- エンジニアでないお客様にも理解できる言葉でお願いします。
- HTML,CSS,JavaScriptで作ります。

できあがった成果物（01要件定義.mdより抜粋）

## 3. 使い方（操作イメージ）

1. 画面にある入力欄に、郵便番号を入力します（例：`100-0001`）
2. 「検索」ボタンを押します
3. 入力した郵便番号に対応する住所（都道府県・市区町村・町名）が画面に表示されます

存在しない郵便番号を入力した場合や、入力欄が空のままボタンを押した場合は、「該当する住所が見つかりませんでした」といったメッセージを表示します。

「エンジニアでないお客様にも理解できる言葉で」と一言添えるだけで、APIやJSONといった専門用語を使わずに、操作イメージや用語解説まで含めた文書ができあがりました。ポイントは、「誰が読む文書か」を伝えると、AIが言葉のレベルを自動で調整してくれることです。

STEP2：設計仕様書で「使う技術」を確定する

要件定義ができたら、それを踏まえて技術的な設計に進みます。

実際に出した指示

下記の仕様に従って、02設計仕様.mdを作成・修正してください。
- 01要件定義.mdを踏まえてください。
- WebAPIを使ってください。
- 上記のURLも記載してください。

できあがった成果物（02設計仕様.mdより抜粋）

## 2. 使用するWebAPI

郵便番号から住所を検索する仕組みには、無料で利用できる **zipcloud（郵便番号検索API）** を使用します。

- **エンドポイントURL**：`https://zipcloud.ibsnet.co.jp/api/search`

例：郵便番号 `100-0001` を検索する場合

https://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001

「WebAPIを使ってください」というシンプルな指示から、AIが無料で会員登録不要のAPIを自分で選定し、エンドポイントURL・リクエスト方法・レスポンス形式（JSON）・画面設計・処理フロー・エラー処理まで一式まとめてくれました。ここで「どのAPIを使うか」を人間が調べる必要がなかったのが、AI駆動開発の効率の良さを感じたポイントです。

STEP3：実装手順書を「ステップバイステップ」で作る

設計ができたら、実装の作業手順をAIに文書化してもらいます。ここでのポイントは「検証しやすい単位に分けてほしい」と伝えることです。

実際に出した指示

下記の指示に従って、03実装手順.mdを作成・修正してください。
- 01～02のmdを踏まえてください
- 検証しやすいように、ステップバイステップで書いてください。

できあがった成果物（03実装手順.mdより抜粋、全7ステップ中の一部）

## STEP4：入力チェックを実装する

（コード省略）

### 確認
- 入力欄を空にしてボタンを押す → 「郵便番号を入力してください」と表示される
- `123` など桁数が違う値でボタンを押す → 「郵便番号は7桁の数字で入力してください」と表示される

AIは実装をSTEP1（HTMLの骨組み）〜STEP7（総合テスト）の7段階に分割し、各ステップの直後に「確認方法」をセットで書いてくれました。この時点ではまだ1行もコードを作成していません。文書だけで「何を」「どの順番で」「どう確認するか」が決まる、という点が設計と実装の間のクッションになります。

STEP4：実装フォルダを作り、1ステップずつコードを作ってもらう

いよいよ実際のコードを作る段階です。ここで大事なのは、一気に全部作らせず、ステップごとに立ち止まって確認することです。

実際に出した指示

「実装」という名前のフォルダを作成してください。
「実装」フォルダの中で、03実装手順.mdに沿って実装してください。
実装のステップごとに確認させてください

この指示のあと、AIは1ステップ実装するたびに手を止め、「確認方法」を提示してくれます。人間は動作を確認して「進んでください」と答えるだけで次のステップに進みます。

できあがった成果物（実装/script.jsの一部、STEP5：API呼び出し）

fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`)
  .then((response) => response.json())
  .then((data) => {
    if (data.status !== 200 || data.results === null) {
      errorDiv.textContent = "該当する住所が見つかりませんでした";
      return;
    }
    const address = data.results[0];
    resultDiv.textContent = address.address1 + address.address2 + address.address3;
  })
  .catch(() => {
    errorDiv.textContent = "通信エラーが発生しました。しばらくしてから再度お試しください";
  });

こうして「郵便番号を入力→検索ボタン→APIに問い合わせ→住所を表示」という一連の動きが、コードを1行も手で書かずに完成しました。

STEP5：AIに動作検証をさせ、結果をOK/NGで残す

コードができたら、最初に作った「動作検証書」に沿って、実際に正しく動くかをチェックします。

実際に出した指示

04動作検証.mdに沿って「実装」フォルダのファイルを検証してください
検証結果を、04動作検証.mdに再記入してください。

できあがった成果物（04動作検証.mdより抜粋）

| No | 目的 | 手順 | 期待結果 | 結果 |
|---|---|---|---|---|
| N-1 | ハイフンあり郵便番号で検索できる | `100-0001`と入力し検索ボタンを押す | 「東京都千代田区千代田」と表示される | OK |
| A-5 | 存在しない郵便番号でメッセージが出る | `999-9999`で検索する | 「該当する住所が見つかりませんでした」と表示される | OK |
| N-3 | Enterキーで検索できる | `100-0001`と入力しEnterキーを押す | N-1と同じ結果が表示される | NG |

正常系5件・異常系8件、合計13件のテストを自動で実行し、結果をOK/NGで記録してもらいました。異常系（未入力、桁数違い、数字以外、存在しない郵便番号、通信エラー、前後の空白）まで、人間が指示しなくてもAIが最初からテスト観点として洗い出していた点が印象的です。

このとき「Enterキーでの検索」だけがNGでした。原因を確認すると、実装手順のSTEP6（Enterキー対応）がまだ実装されていなかったことが分かりました。

STEP6：仕様変更を伝えて、直してもらい、再検証する

不足に気づいたら、それを一言で伝えるだけで修正が始まります。

実際に出した指示

STEP6（Enterキー対応）の実装に進みます

できあがった成果物（実装/script.jsへの追加分）

searchBtn.addEventListener("click", searchAddress);

zipcodeInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    searchAddress();
  }
});

修正後、もう一度同じ13件のテストを実行し直すと、04動作検証.mdの結果はすべてOKに変わりました。

| 項目 | 件数 |
|---|---|
| テスト総数 | 13件（正常系5件／異常系8件） |
| OK件数 | 13件 |
| NG件数 | 0件 |

「不足に気づく→原因を特定する→直す→もう一度テストする」という、開発でいちばん手間のかかるサイクルを、指示文2〜3行で完了できました。

まとめ：読者が同じことをするために覚えておくこと

この記事の流れをなぞれば、プログラミング未経験でも次の手順でWebアプリを完成させられます。

「何を作りたいか」「誰向けの言葉にしたいか」を伝えて要件定義書を作らせる
要件定義書を踏まえて、使いたい技術（今回はWebAPI）を指定し設計仕様書を作らせる
「検証しやすい単位に分けて」と伝えて実装手順書を作らせる
作業用フォルダを指定し、「ステップごとに確認させてください」と伝えて1歩ずつ実装させる
動作検証書に沿ってテストを実行させ、結果をOK/NGで記録させる
NGが出たら原因を確認し、直してもらい、もう一度同じテストをやり直す

指示のコツは、「何を作るか」ではなく「何を踏まえて」「どんな形式で」作ってほしいかを伝えることです。細かい実装方法まで指示しなくても、AIが要件定義から設計・実装・テストまで一貫性を持ってつなげてくれます。ぜひ、身近な小さいツールで同じ流れを試してみてください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up