YubinBango.js で住所自動入力フォームを作成する方法

2025.11.21
Tips

YubinBango.js を使って、郵便番号から住所を自動入力するフォームを作成する手順の備忘録です。

YubinBango.js は、郵便番号から住所を表示する機能を実装できるJavaScriptのライブラリです。

郵便番号のフォームに数字を入力すると、自動で該当する住所を表示するフォームを実装することができます。

〒

上記のサンプルでは、郵便番号を入力すると、下の住所欄に自動で住所が表示されます。

YubinBango.jsは、GitHubで公開されており無料で利用できます。さらに、MITライセンスのため、商用利用も可能です。

YubinBango.jsの使い方

入力した郵便番号から住所を表示するYubinBango.js の基本的な設定方法です。

ライブラリの読み込み

はじめに、YubinBango.js のライブラリを読み込むコードをheadタグ内に記述します。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

scriptタグで外部のライブラリを読み込みます。

クラスを設定する

続いて、フォームにYubinBango.js を使用するためのclassを設定します。

<form class="h-adr">
  <input type="hidden" class="p-country-name" value="Japan">
  〒<input type="text" class="p-postal-code">
  <input type="text" class="p-region p-locality p-street-address p-extended-address">
</form>

入力フォーム全体を囲むformタグのclassには「h-adr」を指定します。このクラスを付与することで、住所の自動入力が機能します。

次のtype="hidden"を指定したinputタグは、郵便番号から表示する住所の国名です。inputタグ以外に、以下のようなspanタグでの設定も可能です。

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

以下は入力フォームに設定するclassの一覧です。

p-postal-code … 郵便番号
p-region … 都道府県
p-locality … 市区町村
p-street-address … 町域
p-extended-address … 町域以降の住所

郵便番号を入力するフォームのclassには「p-postal-code」を指定します。郵便番号の入力は、ハイフン「-」を含めた形にも対応しています。

住所を自動表示させる要素のclassには、それぞれ都道府県名「p-region」、市区町村「p-locality」、町域「p-street-address」、以降の住所「p-extended-address」を指定します。

上記のサンプルでは、「p-region」以降のクラス全てを表示用のフォームに設定することで、住所をまとめて表示させています。

適切なclassを指定することで、入力された郵便番号から、自動的に住所が補完されるようになります。

住所の表示を分割する方法

自動入力される住所を市区町村や町名で分割して異なるフォームに表示する方法です。

〒

住所の表示箇所を分割する場合は、inputタグごとに表示したい区分のクラスを指定します。

<input type="text" class="p-region">
<input type="text" class="p-locality">
<input type="text" class="p-street-address">
<input type="text" class="p-extended-address">

郵便番号から取得できない部分は空白となります。

以下のサンプルのように、都道府県とそれ以降の住所に分けたい場合は「p-region」と「p-locality p-street-address p-extended-address」を設定します。

〒

<input type="text" class="p-region">
<input type="text" class="p-locality p-street-address p-extended-address">

郵便番号を分割する

郵便番号を入力するフォームを、3桁と4桁に分ける方法です。

〒–

郵便番号の入力フォームを分割する場合は、classに「p-postal-code」を指定したinputタグを2つ用意します。

<input type="text" class="p-postal-code" maxlength="3">
<input type="text" class="p-postal-code" maxlength="4">

入力フォームには、maxlength属性で入力できる最大文字列長を指定しています。

複数の住所入力を実装する方法

１つのフォーム内で、複数の住所入力フォームを実装する方法です。

複数の入力フォームに住所の自動入力を設定したい場合は、formタグのclassに指定した「h-adr」を、それぞれの住所入力フォームを囲むdivタグに指定します。

<form>
  <p>住所入力1</p>
  <div class="h-adr">
    <input type="hidden" class="p-country-name" value="Japan">
    〒<input type="text" class="p-postal-code">
    <input type="text" class="p-region p-locality p-street-address p-extended-address">
  </div>
  <p>住所入力2</p>
  <div class="h-adr">
    <input type="hidden" class="p-country-name" value="Japan">
    〒<input type="text" class="p-postal-code">
    <input type="text" class="p-region p-locality p-street-address p-extended-address">
  </div>
</form>

formタグにはクラスを指定せずに、住所の入力フォーム部分を囲むそれぞれのdivタグに「h-adr」を指定することで複数の入力フォームで住所の自動入力が機能します。