郵便番号検索APIの実装【JavaScript】

tetsu

こんにちは、tetsuです。

今回は住所入力フォームで使えそうな「郵便番号検索API」についてご紹介します。

駆け出しエンジニアの学習記録なのでお手柔らかにお願いします。

郵便番号検索APIとは？
サンプル
ソースコード
1. HTML
2. JavaScript
  1. 補足説明
最後に

郵便番号検索APIとは？

株式会社アイビスが日本郵便のWebサイトで公開されている郵便番号データを再配信しているサービスです。日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。元データが日本郵便なのは安心ですね。

また、この記事を書いているのは2021年7月11日ですが、現在使用しているデータは「2021年6月30日更新分の全国一括データ（加工済バージョン）」となっており、定期的に更新されているようなので市町村合併などがあっても安心そうです。

サイトリンク：郵便番号検索API – zipcloud

サンプル

サンプルとして住所入力フォームを作ってみました。

郵便番号を入力して「住所を検索」ボタンを押すと「都道府県」・「市区町村」・「地名」が自動入力されます。

今回はユーザーの入力ミスをなるべく防ぐために「丁目以降」以外は編集不可にしてみました。

また、個人的に実現してみたかった「東京２３区のみ検索可能」という地域を絞った住所入力フォームにしています。つまり、東京23区以外の郵便番号だと「住所を検索」ボタンを押しても検索されない仕様になっています。

郵便番号を調べる

郵便番号
都道府県
市区町村
地名
丁目以降

ソースコード

HTMLとJavaScriptで作成できます。

HTML

ごく一般的な記述だと思います。

inputタグでreadonly="readonly"としているので編集不可（読み取り専用）になっています。

また、郵便番号が分からない人のために「郵便番号を調べる」という郵便局の郵便番号検索ページへのリンクを設置しています。

<a href="https://www.post.japanpost.jp/zipcode/">郵便番号を調べる</a>
<form>
  <table>
    <tbody>
      <tr>
        <th>郵便番号</th>
        <td>
          <input id="input" class="zipcode" type="text" name="zipcode" value="" placeholder="例：1020072（東京23区のみ検索可能）">
          <button id="search" type="button">住所を検索</button>
        </td>
      </tr>
      <tr>
        <th>都道府県</th>
        <td><input id="address1" type="text" name="address1" value="" readonly="readonly"></td>
      </tr>
      <tr>
        <th>市区町村</th>
        <td><input id="address2" type="text" name="address2" value="" readonly="readonly"></td>
      </tr>
      <tr>
        <th>地名</th>
        <td><input id="address3" type="text" name="address3" value="" readonly="readonly"></td>
      </tr>
      <tr>
        <th>丁目以降</th>
        <td><input id="address4" type="text" name="address4" value=""></td>
      </tr>
    </tbody>
  </table>
</form>

JavaScript

今回はjQueryでAjax通信を行います。

jQueryをCDN経由で利用する場合は下記のスクリプトタグをコピペでOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

「住所を検索」ボタンを押した際に、東京23区の郵便番号であれば検索結果を表示するプログラムは下記の通りです。

きっと経験豊富な方が見たらツッコミどころがあると思いますが、先ほどのサンプルのように一応動きます。

const search = document.getElementById("search");
search.addEventListener("click", ()=>{
  const api = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=";
  const input = document.getElementById("input");
  const value = input.value.replace("-",""); 
  let address1 = document.getElementById("address1");
  let address2 = document.getElementById("address2");
  let address3 = document.getElementById("address3");
  let valueCheck = 0;

  //東京23区郵便番号範囲 〒100-0001〜〒179-0085

  if (1000001 <= value && value <= 1790085) {
    valueCheck = 1;
    console.log("郵便番号範囲内");
  }
  if (valueCheck == 1){
    const url = api + value;
    console.log(url);

    $.ajax({
      url: url,
      dataType: "jsonp"
    })
    .done(function(data){
      if (data.results === null){
        console.log(data);
        alert("住所が見つかりませんでした。");
      } else {
        console.log(data);
        const address2Check = data.results[0].address2;
        if ( address2Check.match(/区/) ) {
          address1.value = data.results[0].address1;
          address2.value = data.results[0].address2;
          address3.value = data.results[0].address3;
          alert("都道府県・市区町村・地名を表示します。");
        } else {
          alert("東京23区外の郵便番号です。");
        }
      }
    })
    .fail(function(){
      alert("失敗しました。");
    })
  } else {
    alert("東京23区のみ検索できます。");
  }  
}, false);