YubinBangoで複数の住所入力欄に対応する方法：送付先・請求先を自動補完！

Posted on by

Webフォームで郵便番号から住所を自動入力する際に便利なライブラリ「YubinBango（ゆうびんばんごう）」。特に日本のフォーム開発において非常に重宝するツールです。

でも、こんなケースで困ったことはありませんか？

「請求先と送付先、両方に住所欄があるとき、自動補完はどうなるの？」

この記事では、YubinBangoで住所入力欄が複数ある場合の正しい実装方法について、初心者でもわかりやすく解説します。

そもそも「YubinBango」とは？

YubinBango.jsは、HTMLに特定のクラス名を付けるだけで、
郵便番号から都道府県・市区町村・番地などを自動で入力してくれるJavaScriptライブラリです。
日本の郵便データベースに対応しており、外部APIも不要。CDN読み込みでサクッと導入できます。

例えば、以下のようなHTML構造で使用できます。

<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input class="p-postal-code" size="3" maxlength="3">-
     <input class="p-postal-code" size="4" maxlength="4"><br>
  <input type="text" class="p-region" placeholder="都道府県">
  <input type="text" class="p-locality" placeholder="市区町村">
  <input type="text" class="p-street-address" placeholder="町名・番地">
</div>

郵便番号を入力すると、都道府県や市区町村などが自動で補完されます。

複数の住所欄があるとどうなる？

請求先・お届け先など、同じフォーム内に住所の入力欄が2つ以上ある場合、どの住所欄が補完対象になるのか、悩む方も多いと思います。

結論から言えば──

「それぞれの住所セクションをdiv.h-adrで囲めば、個別に自動補完されます」

YubinBangoは1つのページに複数の .h-adr セクションが存在しても、各セクションごとに処理してくれるように設計されています。

正しい実装方法

複数住所欄に対応させるには、以下の3つを守るだけです。

① div.h-adrで各住所入力欄を囲う

フォーム全体ではなく、住所欄ごとに個別の<div class="h-adr">を作成します。

<form>
  <h3>請求先住所</h3>
  <div class="h-adr">
    <span class="p-country-name" style="display:none;">Japan</span>
    〒<input class="p-postal-code" size="3">-<input class="p-postal-code" size="4"><br>
    <input class="p-region" placeholder="都道府県">
    <input class="p-locality" placeholder="市区町村">
    <input class="p-street-address" placeholder="町名・番地">
  </div>

  <h3>送付先住所</h3>
  <div class="h-adr">
    <span class="p-country-name" style="display:none;">Japan</span>
    〒<input class="p-postal-code" size="3">-<input class="p-postal-code" size="4"><br>
    <input class="p-region" placeholder="都道府県">
    <input class="p-locality" placeholder="市区町村">
    <input class="p-street-address" placeholder="町名・番地">
  </div>
</form>

② .p-country-name を各セクション内に含める

Japan を指定するための隠しフィールド（span または input type="hidden"）が、各 .h-adr 内に1つずつ必要です。

<span class="p-country-name" style="display:none;">Japan</span>

③ p-postal-code を正しく指定する

郵便番号の入力欄には p-postal-code クラスを付けます。3桁 + 4桁に分けて入力させる場合も、
2つに p-postal-code を付けて OK です。

注意点まとめ

項目説明
.h-adrの使い方住所ごとにdiv.h-adrを分ける（フォーム全体には不要）
国名指定各セクションにp-country-nameを含める
自動補完各h-adrごとに独立して動作
郵便番号欄複数でも同じp-postal-codeでOK

動作しないときにチェックすべきポイント

  1. .h-adr の中に p-country-name があるか？
  2. 郵便番号のクラス名が正しいか？（p-postal-code）
  3. CDNでyubinbango.jsが正しく読み込まれているか？

CDNはこちらから：

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

応用：住所を編集できないようにするには？

郵便番号から補完された住所をユーザーが変更できないようにしたい場合は、
readonly属性を追加するだけです。

<input type="text" class="p-region" readonly>
<input type="text" class="p-locality" readonly>

まとめ

YubinBangoは、フォームに手軽に導入できる便利なライブラリですが、「複数住所欄」に対応させるには構造を意識する必要があります。

ポイントおさらい

  • 各住所ブロックを <div class="h-adr"> で分ける
  • 各ブロックに .p-country-name を入れる
  • 郵便番号→住所の補完はブロックごとに独立して動く

これらを守ることで、「請求先」と「お届け先」など、複数の住所欄にも対応できるフォームが簡単に実装できます。

おまけ：フォーム作成時のチェックリスト

  • 郵便番号欄は p-postal-code になっているか？
  • .h-adr をセクションごとに分けているか？
  • .p-country-name をセクション内に配置しているか？
  • CDNが読み込まれているか？

フォーム作成に少し慣れてきた方や、複雑な住所入力欄を作る必要がある方は、
ぜひこのYubinBangoの使い方をマスターしてみてください！