郵便番号から住所を自動入力させるライブラリとしてajaxzip3がよく使われているが、このライブラリはあらかじめ用意したフォームパーツに対し、APIで取得したデータを入力するものだ。

欠点として、APIで取得したデータを独自で用意したJS側の変数として持たせて独自の処理をおこなうといったことができない。

今回は、別のAPIを利用して都道府県、市区町村などのデータを取得する方法を紹介する。

HTML側の準備

まず、HTML側で以下のコードを読み込んでおく。

<script src="https://cdn.jsdelivr.net/npm/fetch-jsonp@1.1.3/build/fetch-jsonp.min.js"></script>

APIから住所データを取得する関数を用意する

次にJavaScriptでAPIを利用し、郵便番号を引数に取り住所データを取得する関数を用意する。

/**
 * 郵便番号から都道府県・市区町村データを取得する
 * 
 * @param string zip
 * @returns 
 */
 function getAddressData(zip) {
  var zipPattern = /^[0-9]{3}-?[0-9]{4}$/;
  if(!zip.match(zipPattern)) {
    return false;
  }

  var api = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=';
  var param = zip.replace('-', '');
  var url = api + param;

  fetchJsonp(url, {
    timeout: 10000,
  })
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    if(data.status === 400){
      // エラー時の処理
    }else if(data.results === null){
      // 郵便番号から住所が見つからなかった場合の処理
    } else {
      console.log(data.results[0]);
    }
  })
}

関数の用意ができたら、適当な郵便番号を用意して実行してみる。

var zip = '554-0013';
getAddressData(zip);

上記のとおり、都道府県・市区町村などのデータが取得できていることが分かる。