JSで郵便番号検索を実装できるライブラリ【yubinbango.js】

投稿日:2024年04月12日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

yubinbango.jsとは？

yubinbango.jsは郵便番号検索（郵便番号を打ち込むと住所が自動入力される）機能を簡単に実装できるのライブラリです。

一番のおすすめポイントは実装方法がとても簡単という点です。メールフォームなどに手軽に郵便番号検索機能を導入したい方にうってつけです。

ライブラリのサイトはこちら

YubinBangoについて | yubinbango

下のフォームが実際にyubinbango.jsを使って郵便番号検索機能を実装したフォームです。

郵便番号を入力すると住所欄に町名まで自動入力されます。

サンプル

郵便番号	〒
住所

同様のライブラリは他にもありますが、yubinbango.jsの特徴をまとめると次の通りです。

JavaScriptのみで動作する
ライブラリを読み込むだけで導入できる
指定されたクラスを付与するだけで実装できる
郵便番号データは自動更新される
ハイフンの有無にかかわらず検索できる。

yubinbango.jsの実装方法

ここからはyubinbango.jsを使ってフォームに郵便番号検索を実装する手順を説明していきます。

ライブラリを読み込む

はじめに、サイトもしくはページにyubinbango.jsライブラリを読み込みます。

HTML

<script type="text/javascript" src="https://yubinbango.github.io/yubinbango/yubinbango.js"></script>

HTMLでフォームを作成する

HTMLでformタグとinputタグを用いてフォームを作成します（ここではテーブルでレイアウトしていますが、なんでも構いません）。

HTML

<form>
    <table class="myTbl">
        <tr>
            <th>郵便番号</th>
            <td>〒<input type="text" placeholder="123-4567"></td>
        </tr>
        <tr>
            <th>住所</th>
            <td><input type="text"></td>
        </tr>
    </table>
</form>

formの中で国名（japan）を指定する

formの中にspanタグかinputタグを使ってclass名「p-country-name」を付与した要素を追記し、「Japan」を指定します。

spanの場合はdisplay:none、inputの場合はtype=hiddenで非表示にしておきます。

HTML

<form>
    <span class="p-country-name" style="display:none;">Japan</span>
    --もしくは--
    <input type="hidden" class="p-country-name" value="Japan">
    --省略--
</form>

formとinputに各classを付与する

最後にformとinputに対してyubinbango.jsを適用させるためのclassを付与していきます。

formには「h-adr」、郵便番号入力欄のinputには「p-postal-code」、住所入力欄には「p-region」「p-locality」「p-street-address」「p-extended-address」という4つのclassを追記します。

HTML

<form class="h-adr">
    <span class="p-country-name" style="display:none;">Japan</span>
    <table class="myTbl">
        <tr>
            <th>郵便番号</th>
            <td>〒<input type="text" class="p-postal-code" placeholder="123-4567"></td>
        </tr>
        <tr>
            <th>住所</th>
            <td><input type="text" class="p-region p-locality p-street-address p-extended-address"></td>
        </tr>
    </table>
</form>

これで郵便番号検索の実装が完了です。もしうまく動作しない場合はライブラリの読み込みやclassの指定が違っていないか確認してください。

住所欄を分けることも可能

住所入力欄に追記した4つのclassは、p-regionが「都道府県名」、p-localityが「市区町村名」、p-street-addressが「町域」、p-extended-addressが「それ以降の住所」というように割り振られているので、別々の欄に分けることも可能です。

HTML

<form class="h-adr">
    <span class="p-country-name" style="display:none;">Japan</span>
    <table class="myTbl">
        <tr>
            <th>郵便番号</th>
            <td>〒<input type="text" class="p-postal-code" size="8" maxlength="8" placeholder="123-4567"></td>
        </tr>
        <tr>
            <th>都道府県名</th>
            <td><input type="text" class="p-region"></td>
        </tr>
        <tr>
            <th>市区町村名</th>
            <td><input type="text" class="p-locality"></td>
        </tr>
        <tr>
            <th>町域</th>
            <td><input type="text" class="p-street-address"></td>
        </tr>
        <tr>
            <th>それ以降の住所</th>
            <td><input type="text" class="p-extended-address"></td>
        </tr>
    </table>
</form>