【JavaScript】郵便番号検索APIを使って住所を自動取得する（zipcloud）

無料で使える郵便番号検索APIを使って、住所を自動入力してみます。

zipcloud
https://zipcloud.ibsnet.co.jp/api/search

フォームのHTMLを作る

まずは、フォームのHTMLを作ります。

<form>
    <label for="zip">郵便番号：</label>
    <input type="text" id="zip" name="zip" maxlength="7">
    <br>
    <label for="address">住所：</label>
    <input type="text" id="address" name="address" readonly>
  </form>

<style>
#address{
width:80%
}
</style>

CSSは、適時調整ください。

郵便番号検索APIを使って住所を自動取得する（zipcloud）

以下は、jQueryを使用して郵便番号検索APIを使って住所を自動取得するサンプルコードです。

このコードでは、zipcloudのAPIを使用して、入力された郵便番号に対応する住所を自動的に取得し、住所欄に表示します。

<script>
    const zipInput = document.getElementById('zip');
    zipInput.addEventListener('blur', function() {
      const zip = this.value;
      if (zip.length === 7) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + zip);
        xhr.onload = function() {
          if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            if (data.status === 200) {
              const address = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
              document.getElementById('address').value = address;
            } else {
              alert('住所が取得できませんでした。');
            }
          }
        };
        xhr.send();
      }
    });
</script>

郵便番号を入力すると、住所が自動入力されます。

以下、コードの解説です。

[rml_read_more]

コード解説

以下は、今回のコードの解説です。

zip というIDを持つ要素を取得して、zipInput という定数に代入します。これは、郵便番号フィールドに対応します。

    const zipInput = document.getElementById('zip');

zipInput 要素の blur イベント（フォーカスが外れたときのイベント）に対して、関数を登録します。

    zipInput.addEventListener('blur', function() {

    });

登録した関数では、郵便番号フィールドの値を取得して zip という定数に代入します。

     const zip = this.value;

zip の長さが7桁であるかを確認します。7桁であれば、APIエンドポイント (https://zipcloud.ibsnet.co.jp/api/search?zipcode=) に対して GET リクエストを送信します。

      if (zip.length === 7) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + zip);
        xhr.onload = function() {
  
        };
        xhr.send();
      }

リクエストが成功した場合、レスポンスデータを解析して住所を取得します。もしレスポンスのステータスが200であれば、取得した住所を address という定数に代入します。

        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            if (data.status === 200) {
  
          }

address を持つ要素に取得した住所を表示します。

            const address = data.results[0].address1 + data.results[0].address2 + data.results[0].address3;
              document.getElementById('address').value = address;
            }

もしステータスが200でない場合、”住所が取得できませんでした。” というアラートメッセージが表示されます。

 else {
              alert('住所が取得できませんでした。');
            }

まとめ

以上が、このスクリプトの概要になります。このコードでは、ユーザーが入力した郵便番号に対応する住所を自動的に取得し、住所欄に表示することができます。