よくフォームなどで住所を入力する項目なんかで、郵便番号を入力すると自動で住所が入力される場合があるかと思います。javascriptのライブラリやプラグインを使うことで実現できるのですが、今回は「YubinBango」というjavascriptのライブラリを使って実装してみたいと思います。  

住所自動入力のjavascriptライブラリ【YubinBango】

YubinBangoはその名の通り、郵便番号から住所が自動入力できるようになるjavascriptのライブラリです。同じ機能では、他にもいろんなライブラリやプラグインがありますが、class名を指定するだけの作業で簡単に実装できて、なおかつ動きも軽快なのがポイントです。 【YubinBango】 https://github.com/yubinbango/yubinbango   詳しくは上記の公式ページにも記載されている通りなのですが、こちらでも実装方法をまとめていきたいと思います。まずHTMLは通常の一般的なフォーム形式で用意します。   【HTML】※一部抜粋

<form class="h-adr">
  <!-- 国別指定 -->
  <input type="hidden" class="p-country-name" value="Japan">
  <!-- 郵便番号 -->
  <input type="text" class="p-postal-code" id="zipcode" name="zipcode" value="">
  <!-- 住所 -->
  <input type="text" class="p-region p-locality p-street-address p-extended-address" id="address" name="address" value="">
</form>
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js">
</script>

  前提条件として、githubのリポジトリにあるライブラリを読み込みます。そして、form要素には「h-adr」のclassを指定します。フォームの項目にまずは、input type="hidden"を用意して、classに「p-country-name」valueに「Japan」を指定します。   そして、郵便番号の入力にあたる要素には「p-postal-code」のclassを指定します。次に、住所入力にあたる要素には「p-region p-locality p-street-address p-extended-address」の4つのclassをまとめて指定します。これは都道府県、市区町村、町名といった住所の詳細情報になり、この例ではまとめていますが分けて入力させることも可能です。   なんとたったこれだけで郵便番号からの住所自動入力が実装できます！実際に弊社コンタクトフォームにも使っているのですが、動作も軽くかなりオススメです。   あとは郵便番号入力のバリデーションとしてjQueryを使って下記の通り実装するのもいいのではないでしょうか。こちらについては過去記事「jQueryで作成するフォームバリデーション」でも似たケースをまとめております。   【javascript】

$("#zipcode").on('blur',function(){
  if(!$(this).val().match(/^d{3}[-]d{4}$|^d{7}$/) && !$(this).val() == ''){
    $(this).addClass('errored');
    $(this).siblings('.errored-msg').text('郵便番号を正しい形式で入力してください');
  } else {
    $(this).removeClass('errored');
    $(this).siblings('.errored-msg').text('');
  }
});

  正規表現で郵便番号の形式を、半角数字7桁とハイフンを含む半角数字7桁で指定しています。フォームからカーソルが外れたタイミングで動くようになっています。  

---

  いかがでしょうか、コーポレートサイトのコンタクトフォームだけでなく、アンケートサイトに使うフォームにもピッタリです。入力を自動化させることで「EFO」（入力フォーム最適化）としてユーザービリティの向上も期待できますね！