ChatGptとjavascriptで住所入力欄を作ろう！

こんにちは。Web系エンジニアのカズです。

今回はプログラミング初心者の方でもChatGptを使用して、お問い合わせフォームにあるような「住所入力欄」が作成できるのか検証してみました。

本格的に住所入力欄を作成するには、初心者の方には少し壁があります。

ChatGptに1回のメッセージをしただけでは、望む住所入力欄が完成しませんでした。

それをChatGptを駆使してどう、完成させたのかを記事にしています。

今回の記事の内容。

・実現したい住所入力欄の仕様について
・ChatGptに住所入力欄作成をお願いしてみた①
・ChatGptの返答結果①
・ChatGptに住所入力欄作成をお願いしてみた②
・ChatGptの返答結果②
・ChatGptに住所入力欄作成をお願いしてみた③
・ChatGptの返答結果③
・初心者の方でも実現できるのか結論

実現したい住所入力欄の仕様について
ChatGptに住所入力欄作成をお願いしてみた①
ChatGptの返答結果①
ChatGptに住所入力欄作成をお願いしてみた②
ChatGptの返答結果②
ChatGptに住所入力欄作成をお願いしてみた③
ChatGptの返答結果③
初心者の方でも実現できるのか結論

実現したい住所入力欄の仕様について

仕様は下記です。

・郵便番号入力欄を作成する

・都道府県入力欄を作成する

・市区町村入力欄を作成する

・番地入力欄を作成する

・郵便番号を入力した際に、該当する都道府県と市区町村を入力欄に表示する

ChatGptに住所入力欄作成をお願いしてみた①

メッセージでお願いした内容は下記です。

下記の仕様で、住所入力欄を作成してください。
①HTML,CSS,Javascriptを使用して作成してください。
②郵便番号を入力する欄を作成してください。
③都道府県の入力欄を作成してください。
④市区町村の入門欄を作成してください。
⑤番地の入力欄を作成してください。
⑥郵便番号を入力すると都道府県と市区町村と番地が自動的に表示されるようにしてください。

ChatGptでは、なるべく具体的に条件を指定した方が望ましい解答が返ってきやすいです。

今回は「初心者の方でも実現できるか」をテーマにしています。

具体的に条件を指定したら、上記のようになるのではないかと想定しております。

ChatGptの返答結果①

以下は、指定された仕様に従って住所入力欄を作成するためのサンプルコードです。

このコードはHTML、CSS、JavaScriptを使用しています。

また、郵便番号を入力すると都道府県と市区町村と番地が自動的に表示されるようになっています。

<!DOCTYPE html>
<html>
<head>
  <title>住所入力フォーム</title>
  <style>
    #address-form {
      width: 300px;
      margin: 0 auto;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id="address-form">
    <label for="postal-code">郵便番号:</label>
    <input type="text" id="postal-code" onblur="fetchAddressDetails()">
    <label for="prefecture">都道府県:</label>
    <input type="text" id="prefecture" readonly>
    <label for="city">市区町村:</label>
    <input type="text" id="city" readonly>
    <label for="street">番地:</label>
    <input type="text" id="street" readonly>
  </div>
  <script>
    function fetchAddressDetails() {
      const postalCode = document.getElementById("postal-code").value;
      // ここで郵便番号に対応する都道府県、市区町村、番地を取得するAPIを呼び出すことができます。
      // 以下は仮のコードで、APIの実装に合わせて適切な処理を行ってください。
      const fakeAPIResponse = {
        prefecture: "東京都",
        city: "港区",
        street: "六本木1-1-1"
      };
      document.getElementById("prefecture").value = fakeAPIResponse.prefecture;
      document.getElementById("city").value = fakeAPIResponse.city;
      document.getElementById("street").value = fakeAPIResponse.street;
    }
  </script>
</body>
</html>

このコードでは、郵便番号を入力すると、JavaScriptのfetchAddressDetails関数が呼び出され、郵便番号に対応する都道府県、市区町村、番地を取得し、それらの値を該当するフィールドに表示します。郵便番号に対応するデータを取得する部分は、実際のAPIに合わせてカスタマイズする必要があります。

これでは上手く動作しない？

上記の返答結果のソースコードでは、望んだ通り動作しません。

どんな郵便番号を入力しても「東京都港区六本木1-1-1」しか表示されない作りになっています。

なぜ？ってなりますよね。

しかしChatGptは最後このように返答してきています。

郵便番号に対応するデータを取得する部分は、実際のAPIに合わせてカスタマイズする必要があります。

つまり現在は郵便番号を入力しても、それに対応する住所を用意できていないということですね。

それをするには、APIを使う必要があるということです。

「APIって何？」ってなりますよね。

それも必要であればChatGptにメッセージしてみると良いと思います。

今回の実現したいことに合わせて私の言い方でざっくりと説明してしまえば、APIとはデータ一覧（今回は住所一覧）のことです。

どこかのサービスが日本の住所一覧をデータとしてまとめて外部に提供してくれています。

それを今回お借りして使用するといったイメージですね。

ChatGptに住所入力欄作成をお願いしてみた②

では、APIが必要ということが分かったので、ChatGptに次はこんな質問をしてみました。

郵便番号を指定して日本の住所を取得できるAPIは何がありますか？

ChatGptの返答結果②

日本の郵便番号を指定して住所を取得できるAPIの例として、以下のいくつかがあります：

Japan Post Web API:
日本の郵便番号を指定して、都道府県、市区町村、町域を取得できる公式のAPIです。無料で利用できますが、利用にはAPIキーが必要です。詳細はJapan Postの公式サイトで提供されています。
郵便番号API（郵便番号.jp）:
郵便番号.jpが提供するAPIで、日本の郵便番号を指定して住所情報を取得できます。無料で利用できるプランがありますが、制限があるため、商用利用や大量のリクエストの場合は有料プランを検討する必要があります。
Algolia Places API:
Algoliaが提供する地理情報APIで、郵便番号から住所情報を取得できます。Algolia Placesは多くの国や地域をサポートしており、日本の情報も含まれています。利用にはAlgoliaのアカウントが必要です。

これらのAPIは、日本の郵便番号から住所情報を取得するために利用できるものです。各APIの利用条件や料金体系を確認し、プロジェクトに最適なものを選択することが重要です。また、APIのデータの更新頻度や精度も考慮して選択することが大切です。

返答結果を受けて

今回は「2:郵便番号API」のAPIを使用したいと思います。

URLは下記になります。

郵便番号検索API - zipcloud

日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。

ChatGptに住所入力欄作成をお願いしてみた③

では、郵便番号APIを使用して作成するように、お願いしてみます。

メッセージ内容

日本郵便の郵便番号検索APIを使用して住所入力欄を作成してください。細かい仕様は下記です。
①HTML,CSS,Javascriptを使用してください。
②郵便番号を入力する欄を作成してください。
③都道府県の入力欄を作成してください。
④市区町村の入門欄を作成してください。
⑤番地の入力欄を作成してください。
⑥郵便番号を入力すると都道府県と市区町村が自動的に表示されるようにしてください
⑦apiのurlは下記です

郵便番号検索API - zipcloud

日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。

ChatGptの返答結果③

以下は、指定された仕様に従って住所入力欄を作成するためのサンプルコードです。

このコードはHTML、CSS、JavaScriptを使用し、日本郵便の郵便番号検索APIを利用しています。

<!DOCTYPE html>
<html>
  <head>
    <title>住所入力フォーム</title>
    <style>
      #address-form {
        width: 300px;
        margin: 0 auto;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      input[type="text"] {
        width: 100%;
        padding: 5px;
        margin-bottom: 10px;
      }
    </style>
  </head>
<body>
  <div id="address-form">
    <label for="postal-code">郵便番号:</label>
    <input type="text" id="postal-code" onblur="fetchAddressDetails()">
    <label for="prefecture">都道府県:</label>
    <input type="text" id="prefecture" readonly>
    <label for="city">市区町村:</label>
    <input type="text" id="city" readonly>
    <label for="street">番地:</label>
    <input type="text" id="street" readonly>
  </div>
  <script>
    function fetchAddressDetails() {
      const postalCode = document.getElementById("postal-code").value;
      const apiUrl = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${postalCode}`;
      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          if (data.status === 200) {
            const addressData = data.results[0];
            document.getElementById("prefecture").value = addressData.address1;
            document.getElementById("city").value = addressData.address2 + addressData.address3;
          } else {
            alert("郵便番号が見つかりません。");
          }
      })
      .catch(error => {
        console.error(error);
        alert("エラーが発生しました。");
      });
    }
  </script>
</body>
</html>

このコードでは、郵便番号を入力すると、指定されたAPIを使用して都道府県、市区町村、番地が自動的に表示されるようになっています。

郵便番号に対応する住所情報を取得するためにAPIリクエストを送信し、取得したデータをフォームに表示しています。

郵便番号が見つからない場合やエラーが発生した場合にはアラートメッセージを表示します。

完成画面

私の望んだ仕様の画面を作成してくれました。

動作の方も問題なく、郵便番号を入力したら該当の住所を表示してくれました。

完成画面

初心者の方でも実現できるのか結論

結論は可能だと思いました。

初心者の方や知見のない方は

ChatGptに具体的な指定をしてメッセージすることが、1度では難しい場合があります。

今回のようにAPIが必要と言う事が分かるまでは、望んだ解答を得られにくいかもしれません。

ですが、ChatGptも次に何が必要なのかのヒントをくれるので、そのヒントを調べると上手くいくかなと思います。

今回の手順まとめ

①ChatGptにHTML,CSS,Javascriptを使用して、住所入力欄作成をお願いする。

②返答結果のソースコードで動作確認するが、上手く動作しない原因を探る

③APIを使用しなければ実現できないことが原因と判明

④どんなAPIが、おすすめなのかChatGptに質問

⑤そのAPIを使用して住所入力欄を作成するように再度お願いする。