Web APIで郵便番号から住所を取得する

こちらで実装してみました。

練習サイトURL：https://skblogwp.com/practice/javascript/article_003/

Web APIとは？

Web APIとは、Webを通じて利用することのできるサービスと、そのサービスを利用するためのルールのことです。

Web APIは自分で作成できるだけでなく、多くのサービス事業者によって、公開・提供されています。

今回は、zipcloud（郵便番号検索API：https://zipcloud.ibsnet.co.jp/doc/api）を使用します。

APIの概念は、理解するのが少し難しいのですが、
例えば東京駅の郵便番号100-0005は「東京都千代田区丸の内である」という情報はフロント側（Webページ側）では持っていないので、「郵便番号検索APIというサービスと、1000005と入力したら東京都千代田区丸の内であると返すというルールである」と考えると少しは理解できるようになるかなと思いました。

なお、Web APIが仕様どおりに利用できるかどうかを確認する際は、以下のようにブラウザのアドレスバーに入力して、レスポンスのJSONがブラウザ画面に表示されることを確認します。

https://zipcloud.ibsnet.co.jp/doc/api/search?zipcode=1000005

HTML

<div class="section_inner article_003_form">
                            <p>
                                <label>郵便番号<input id="zipcode" type="text" size="10" maxlength="8"></label>
                                <button id="btn">検索</button>
                            </p>
                            <p><label>都道府県 <input id="prefecture" type="text" size="10"></label></p>
                            <p><label>市区町村 <input id="city" type="text" size="10"></label></p>
                            <p><label>住所<input id="address" type="text" size="10"></label></p>
                        </div>

jQuery

$.ajax({ ... }) を使って、https://zipcloud.ibsnet.co.jp/api/search というAPIエンドポイント（APIが提供する特定の機能やリソースへの「アクセス先」）にアクセスしています。郵便番号のデータは、$('#zipcode').val() で取得し、URLに追加されます。

$(function(){

  $('#btn').on('click', function() {
    // 入力された郵便番号でWebAPIに住所情報をリクエスト
    $.ajax({
      url: 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('#zipcode').val(),
      dataType : 'jsonp',  //異なるドメインからのデータ取得が可能
    }).done(function(data) {
      if (data.results) {
        setData(data.results[0]);
      } else {
        alert('該当するデータが見つかりませんでした');
      }
    }).fail(function(data) {
      alert('通信に失敗しました');
    });
  });

  // データ取得が成功したときの処理
  function setData(data) {
    //取得したデータを各HTML要素に代入
    $('#prefecture').val(data.address1);  // 都道府県名
    $('#city').val(data.address2);        // 市区町村名
    $('#address').val(data.address3);     // 町域名
  }

});