株式会社カサレアル BSブログ

今回は、Webアプリケーションの入力フォームで、郵便番号を入力しただけで住所が自動入力されるJavaScriptのライブラリをご紹介したいと思います。

ライブラリの名前は、yubinbangoです。そのままですね。もともとはajaxzip3という名前で、今でもajaxzip3を使用できるらしいんですが、新規で設置する際は、yubinbangoを使用することが推奨されています。
下記がyubinbangoのURLになります。

https://github.com/yubinbango/yubinbango

基本的には、HTMLのコードにクラスを指定するだけという簡単なものになります。現に私もプライベートで開発する際に試してみたのですが、結構簡単に実装できました。下記が、実際に私が記載したソースコードになります。

＊2020年8月11日　コードを修正しました。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<div class="h-adr"><span class="p-country-name" style="display:none;">Japan</span>
    <label>郵便番号</label><br>
    <input type="text" class="p-postal-code" maxlength="3">
    -
    <input type="text" class="p-postal-code" maxlength="4"> <br>
    <label>都道府県</label><br>
    <select class="p-region-id">
        <option value="">--</option>
        <option value="1">北海道</option>
        <option value="2">青森県</option>
        <option value="3">岩手県</option>
        <option value="4">宮城県</option>
        <option value="5">秋田県</option>
        <option value="6">山形県</option>
        <option value="7">福島県</option>
        <option value="8">茨城県</option>
        <option value="9">栃木県</option>
        <option value="10">群馬県</option>
        <option value="11">埼玉県</option>
        <option value="12">千葉県</option>
        <option value="13">東京都</option>
        <option value="14">神奈川県</option>
        <option value="15">新潟県</option>
        <option value="16">富山県</option>
        <option value="17">石川県</option>
        <option value="18">福井県</option>
        <option value="19">山梨県</option>
        <option value="20">長野県</option>
        <option value="21">岐阜県</option>
        <option value="22">静岡県</option>
        <option value="23">愛知県</option>
        <option value="24">三重県</option>
        <option value="25">滋賀県</option>
        <option value="26">京都府</option>
        <option value="27">大阪府</option>
        <option value="28">兵庫県</option>
        <option value="29">奈良県</option>
        <option value="30">和歌山県</option>
        <option value="31">鳥取県</option>
        <option value="32">島根県</option>
        <option value="33">岡山県</option>
        <option value="34">広島県</option>
        <option value="35">山口県</option>
        <option value="36">徳島県</option>
        <option value="37">香川県</option>
        <option value="38">愛媛県</option>
        <option value="39">高知県</option>
        <option value="40">福岡県</option>
        <option value="41">佐賀県</option>
        <option value="42">長崎県</option>
        <option value="43">熊本県</option>
        <option value="44">大分県</option>
        <option value="45">宮崎県</option>
        <option value="46">鹿児島県</option>
        <option value="47">沖縄県</option>
    </select><br>
    <label>住所</label><br>
    <input type="text" class="p-locality p-street-address p-extended-address"/><br>
</div>

重要なのは、「p-」から始まるクラス名です。これらを加えることによって住所の自動入力を実現できます。

私自身そんなにJavaScriptに強くないのですが、実際に実装してみるとすごく簡単に実現できたのでおすすめのライブラリです。

Tweet

Check