第160回日商簿記検定試験日まで

あと時間

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

JavaScript
ヒカテツ
ヒカテツ

こんにちは、ヒカテツです。

 

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

 

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

郵便番号検索APIとは?

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

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

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

サンプル

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

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

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

また、個人的に実現してみたかった「東京23区のみ検索可能」という地域を絞った住所入力フォームにしています。つまり、東京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);

補足説明

東京23区の郵便番号は郵便局Webサイトにある東京都の郵便番号データ(CSVファイル)から調べました。

  1. 東京都全ての郵便番号から東京23区以外の行削除をして東京23区のみを残す。
  2. 郵便番号の列を昇順で並び替えて最初と最後の郵便番号を調べる。
  3. 調べた最初と最後の郵便番号の範囲内しか検索できないようにプログラムを書く。if (1000001 <= value && value <= 1790085)

しかし、実は上記範囲の郵便番号には小笠原村など東京23区以外の郵便番号が少し含まれています。

ちなみに、他の地方都市の郵便番号並びを調べてみても同じ感じでした。

なので、更にif ( address2Check.match(/区/) )として検索結果の市区町村に「区」が含まれる場合だけ表示するようにしています。

普通にもっと良い方法がありそうですが、とりあえず今回はこれで良しとします!

最後に

もし大阪市や名古屋市など別の地域に絞った住所入力フォームを作りたい場合は先ほど補足説明した要領で修正を加えれば出来ると思います!

また、特定の地域に絞った住所入力フォームである必要がない場合も補足説明したif文あたりを消せば出来るでしょう!

なお、今回の内容は「確かな力が身につくJavaScript「超」入門 第2版」という本を参考にしつつ、不足している情報はググりながら実装してみた記録です。

こちらの本は初心者にも分かりやすく、今回のようなAPIについても学べるためオススメです。

ちなみにjQueryの基礎はこちらで勉強して、こちらも分かりやすかったのでオススメです。

※プログラミングスクールという近道も

スクールだとTechAcademyテックアカデミー が目的に合ったコースを選びやすくてオススメです。(無料キャリアカウンセリングも受けれます)

【無料体験】ができるので、試しに体験してみるのも良いかもしれません🎁

>> TechAcademyの無料体験はこちら

 

今回は以上です。

コメント

タイトルとURLをコピーしました