郵便番号から住所を検索するAPIを使ってみる

郵便番号を入力すると住所が自動的に表示されるアプリケーションを作成してみる。

郵便番号API zipcloud http://zipcloud.ibsnet.co.jp/

なお、とりあえず動かすことが目的なのでスタイルはつけない。できたものがこちら。スクリーンショット 2019-10-22 10.44.27.jpg スクリーンショット 2019-10-22 10.44.38.jpg

郵便番号を入れて検索ボタンをクリックすると、住所が自動で入力されている。それっぽい！

流れ

10分もあれば完成する。全体的な流れはこちら。

HTMLを書く
jQueryを入れて書く
郵便番号検索APIを使用する

まずは適当にフォルダを作り、index.htmlとindex.jsを作成する（名前は何でもいい）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="index.js"></script>
  <title>郵便番号から住所検索</title>
</head>
<body>
  <h1>郵便番号から住所検索</h1> 
  <label>郵便番号
    <input type="text" id="postcode" maxlength="8" placeholder="例:0000000">
  </label>
  <button id="btn">検索</button>
  <div id="result">
    <h2>検索結果</h2>
    <p><label>都道府県
      <input type="text" id="pref" size="6">
    </label></p>
    <p><label>市区町村
      <input type="text" id="city">
    </label></p>
    <p><label>住所
      <input type="text" id="address">
    </label></p>
  </div>
</body>
</html>

<head>タグ内で、ウェブ上で公開されているjqueryライブラリファイルにアクセスする。

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

jQueryの下でindex.jsを取得。

<script src="index.js"></script>

<button id="btn">検索</button>と検索ボタンにidをつけて、クリックしたときに住所を取得する。

これで準備は完成。次はindex.jsにjQueryを書いていく。

jQueryを使用する

Ajaxを利用し、郵便番号WebAPIにリクエストをする。Ajax技術を使用することで、画面全体を再度読み込むことなく、部分的にレスポンスを画面表示できる（例：グーグルマップ）。そのために、jQueryを使ってAjaxの処理を記述する。

$(function(){
  $('#btn').on('click', () => {
    $.ajax({
      url: "http://zipcloud.ibsnet.co.jp/api/search?zipcode=" + $('#postcode').val(),
      dataType: 'jsonp',
    }).done((data) => {
      if (data.results) { 
        getData(data.results[0]);
      } else {
        alert('該当データが見つかりません');
      }
    }).fail((data) => {
      alert('通信に失敗しました');
    });
  });

  function getData(data) {
    $('#pref').val(data.address1);
    $('#city').val(data.address2);
    $('#address').val(data.address3);
  }
});

$(#btn)でHTMLの#btnを取得できる。「クリックされたら{}内の処理をする」という動きになる。

$('#btn').on('click', () => {

$.ajaxでAjax通信ができる。引数にはオブジェクトの形式でパラメータを指定する。

    $.ajax({
      url: "http://zipcloud.ibsnet.co.jp/api/search?zipcode=" + $('#postcode').val(),
      dataType: 'jsonp',
    }).done((data) => {

リクエスト先のURLの末尾に、HTMLで入力された郵便番号を加える。なお$('#postcode').val()で郵便番号を取得している。 dataTypeにはレスポンスとして受け取るデータ形式を指定する。ここではjsonpを設定。

}).done((data) => {

.doneで通信が成功したときの処理を書く。dataには郵便番号を送って返ってきたデータが格納されている。たとえば、100-0001という郵便番号を入力したら、その郵便番号に対する都道府県・市区町村・住所などがdataに入っている。

if (data.results) { 
        getData(data.results[0]);
      } else {
        alert('該当データが見つかりません');
      }
    }).fail((data) => {
      alert('通信に失敗しました');
    });

if (data.results)で「もし、dataに結果の情報(results)が入っていたら」という条件で分岐をする。入力した郵便番号が存在しない場合、後に記述するエラー内容（該当データが見つかりません）がアラートで出る。 getDataという関数を用意して、都道府県・市区町村・住所などの情報を使ってそれぞれのプロパティに代入する。

function getData(data) {
    $('#pref').val(data.address1); 
    $('#city').val(data.address2);
    $('#address').val(data.address3);
  }

それぞれ次のような値が入っている。

address1：都道府県
address2：市区町村
address3：住所

elseの分岐部分では、入力された郵便番号が存在しないものだった場合に「該当データが見つかりません」と表示されるよう処理をしている。

}).fail((data) => {では、何らかの原因で通信が失敗したときにアラートが出るように設定している。

これで郵便番号から住所を自動で検索できるAPIが完成した。シンプルだが、APIを利用する大まかな流れを掴むには、良い練習なのではないかと思う。

Just do IT

思うは招く

【JavaScript】郵便番号から住所検索するWeb APIを使う練習

郵便番号から住所を検索するAPIを使ってみる

流れ

jQueryを使用する