【JavaScript】郵便番号検索APIで住所検索を実装する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで郵便番号検索APIを使用して住所検索を実装する方法をご紹介しています。

郵便番号検索APIで住所検索を実装したいんだけど、どうすればいいんだろう？

上記の疑問にお答えしています。

では、解説していきます。

郵便番号検索APIとは

郵便番号検索APIは、株式会社アイビスが運営するzipcloudのサービスです。郵便番号から住所を取得することができるAPIを提供しています。下記が公式のWebサイトです。

公式サイト：http://zipcloud.ibsnet.co.jp/

元データになっているのは日本郵便なので、正確な情報が期待できます。jQueryでよく使用されているajaxzip3も郵便局のデータとなっているため、使用感は似たようなものになるのではないかと思います。

郵便番号検索APIで取得できる情報は下記のとおりです。

取得できる住所情報

address1	都道府県
address2	市区町村
address3	町域名
kana1	都道府県（半角カナ）
kana2	市区町村（半角カナ）
kana3	町域名（半角カナ）
prefcode	都道府県コード
zipcode	郵便番号

住所情報以外にはステータスコードとエラーメッセージなども用意されています。

郵便番号から住所を取得するサンプル

下記は動作確認のために作成したサンプルです。郵便番号を入力すると、住所情報が各入力項目の値に設定されるようにしています。

See the Pen 6116 by ryohei (@intotheprogram) on CodePen.

フローとしては「郵便番号入力」→「住所検索」をクリックで住所を検索する処理に入ることを想定しています。クリックではなく自動で検索したい場合は、クリックイベント部分をキーボードイベントに変更し、入力された郵便番号の桁数が満たされれば自動的に検索するように変更すれば対応できるかと思います。

下記はサンプルで使用しているソースです。HTMLとJavaScriptだけ掲載しています。

HTML

HTMLは普通のフォームです。JSから要素を取得しやすいようにid属性を追加しています。要素の取得方法は環境に合わせて変更していただければと思います。

<form>
    <table>
        <tbody>
            <tr>
                <th>郵便番号</th>
                <td>
                    <input id="input" class="zipcode" type="text" name="zipcode" value="" placeholder="例)8120012">
                    <button id="search" type="button">住所検索</button>
                    <p id="error"></p>
                </td>
            </tr>

            <tr>
                <th>都道府県</th>
                <td><input id="address1" type="text" name="address1" value=""></td>
            </tr>

            <tr>
                <th>市区町村</th>
                <td><input id="address2" type="text" name="address2" value=""></td>
            </tr>

            <tr>
                <th>町域</th>
                <td><input id="address3" type="text" name="address3" value=""></td>
            </tr>
        </tbody>
    </table>
</form>

JS

JavaScriptでは「住所検索」がクリックされた後の処理を記述しています。

非同期通信にはfetchを使用しています。普通にfetchでアクセスするとクロスオリジンエラーになりますのでJSONPでアクセスします。下記のライブラリを読み込んでJSONPが使用できるようにしておきます。

<script src="https://cdn.jsdelivr.net/npm/fetch-jsonp@1.1.3/build/fetch-jsonp.min.js"></script>

後は入力された郵便番号から住所情報を取得するだけです。だいぶやっつけ感のあるスクリプトで申し訳ないですが、参考にしていただければ幸いです。

let search = document.getElementById('search');
search.addEventListener('click', ()=>{
    
    let api = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=';
    let error = document.getElementById('error');
    let input = document.getElementById('input');
    let address1 = document.getElementById('address1');
    let address2 = document.getElementById('address2');
    let address3 = document.getElementById('address3');
    let param = input.value.replace("-",""); //入力された郵便番号から「-」を削除
    let url = api + param;
    
    fetchJsonp(url, {
        timeout: 10000, //タイムアウト時間
    })
    .then((response)=>{
        error.textContent = ''; //HTML側のエラーメッセージ初期化
        return response.json();  
    })
    .then((data)=>{
        if(data.status === 400){ //エラー時
            error.textContent = data.message;
        }else if(data.results === null){
            error.textContent = '郵便番号から住所が見つかりませんでした。';
        } else {
            address1.value = data.results[0].address1;
            address2.value = data.results[0].address2;
            address3.value = data.results[0].address3;
        }
    })
    .catch((ex)=>{ //例外処理
        console.log(ex);
    });
}, false);

以上がサンプルで使用しているソース一式です。CSSが欲しい方はたぶんいないと思いますので、割愛しています。（もし必要であればコードペンから取得してください！）

最後に

今回初めてJavaScriptでfetchを使ってみましたが、XMLHttpRequestよりもだいぶすっきりとしたスクリプトを書くことができますね。fetchとpromiseはポリフィルを読み込めばIE11でも使えるので、今後非同期通信はfetchメインで使っていこうと思います！

以上、JavaScriptで郵便番号検索APIを使用して住所検索を実装する方法のご紹介でした！