【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よりもだいぶすっきりとしたスクリプトを書くことができますね。fetchpromiseはポリフィルを読み込めばIE11でも使えるので、今後非同期通信はfetchメインで使っていこうと思います!

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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら