Date-posted: 2020/11/16
Last-Modified: 2022/06/18

[jQuery]郵便番号から住所を取得するAPIをAjax通信で導入する方法

プログラミング jQuery

はじめに

WEBアプリ開発で郵便番号を入力すると自動的に住所を表示する機能の実装方法を備忘録のためにまとめておりますが、参考になれば幸いです。

この記事では、WEBアプリ開発の際にzipcloudというAPIの実装方法を記載しております。

HTMLのコードは、必要な部分のみしか記述しておりません。また、本来であれば正規表現で郵便番号の入力形式をチェックしたりするべきですが、今回は割愛します。

開発環境

HTML 5
jQuery 3.4.1

使用する技術

zipcloud API

コード

<h1>お問い合わせフォーム</h1>
<h4>郵便番号を入力すると、住所が自動的に入力されます</h4>
<p>郵便番号
    <input id="zip-code" type="number">
</p>
<p>住所
    <textarea id="place"></textarea>
</p>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="zip.js"></script>

$(function() {
    $("#zip-code").change(function() {
        let zip = $(this).val();
        $.ajax({
            url: "http://zipcloud.ibsnet.co.jp/api/search",
            type: "GET",
            data: {zipcode: zip},
            dataType: "JSONP"
        })
        .done(function(value) {
            if (value.message == null) {
                let result = value.results[0];
                $("#place").val(result.address1 + result.address2 + result.address3);
            } else {
                $("#place").val(value.message);
                alert("郵便番号が不正です");
            }
        })
        .fail(function() {
            alert("郵便番号が不正です");
        });
    });
});

コードの説明

index.html

inputに郵便番号を入力すると、textareaに住所が自動的に入力される。

zip.js

2行目
郵便番号が入力されたらイベント発火。

3行目
入力された郵便番号の値をzipという変数に格納。

4〜9行目
Ajax通信を行うための記述。
urlはzipcloudサービス、取得方法はGET、送るデータは3行目で取得した郵便番号、dataTypeはzipcloudの場合JSONPを使用する。

10行目
Ajax通信が上手く行え、入力した郵便番号に該当する住所が見つかった場合の処理。
valueという引数には、取得した住所情報が格納されている。

11行目
value.messageがnullかチェック。
入力した郵便番号が不正な値で住所情報が上手く取得できなかった場合、messageに不正ですという値が格納されます。上手く取得できた場合、messageはnullのままです。

12行目
取得した住所情報(value)は配列形式のため、一番最初の値(results[0])をresultという変数に格納する。

13行目
取得した住所情報はaddress1,2,3という形になっているため、3つの住所情報をつなぎ合わせて、textareaに出力する。

14〜17行目
住所情報が上手く取得できなかったときは、エラーメッセージをtextareaに出力し、alertでも通知する。

19〜21行目
Ajax通信が失敗したときも、alertでエラーメッセージを通知する。