住所の自動入力ライブラリ「YubinBango」

TypeScriptで作成された「YubinBango」ライブラリ（ajaxzip3の後継のもののようです）を使って、郵便番号を入力したら、その下にある住所入力欄に都道府県や市区町村の文字列を自動入力させます。
この記事では「郵便番号入力欄が1つ、住所の自動入力欄が2つVer.」を作ります。

この入力フォームはcssで見た目をいい感じにしています。レスポンシブ対応もなんとなくいい感じにしていますので、基本的には手順通りにHTML、CSS、JSを設置すると、見た目ごと設置可能と思います。

動作の様子

実際の動作サンプル（郵便番号を入力してみよう！）

See the Pen ajaxzip3動作サンプル by maya anno (@may9) on CodePen.

使い方について

「Yubinbango（GitHub）」ページの下の方に、とても親切に使い方が書いてありますのでこちらも参考に！

まずはjsの読み込み

下記のコードを<head>〜</head>内か</body>直前あたりで読み込みます。

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

入力欄部分のHTML

input.html

<main>
  <form class="h-adr post-content">
    <dl class="post-table flex-between">
      <dt>郵便番号</dt>
      <dd>
        <input type="text" name="input_zip" class="p-postal-code form-control input-half" placeholder="123-4567" value=""/>        <a href="https://www.post.japanpost.jp/zipcode/" class="btn-01 small" target="_blank">郵便番号検索</a>  
      </dd>
    </dl>
    <dl class="post-table flex-between">
      <dt>住所（都道府県）</dt>
      <dd><input type="text" name="input_add01" class="p-region form-control" placeholder="○○県" value=""/></dd>
    </dl>
    <dl class="post-table flex-between">
      <dt>住所（市区町村）</dt>
      <dd><input type="text" name="input_add02" class="p-locality p-street-address form-control" placeholder="△△市□□町" value=""/></dd>
    </dl>
    <dl class="post-table flex-between">
      <dt>市区町村以降の住所</dt>
      <dd><input type="text" name="input_add03" class="p-extended-address form-control" placeholder="1丁目☆☆マンション101号室" value=""/></dd>
    </dl>
    <input type="hidden" class="p-country-name" value="Japan">
  </form>
</main>

コード内の注目ポイントは？

下記（画像）の赤丸の箇所が郵便番号自動入力をさせるためのクラスです。

郵便番号や住所を入力するinputタグを囲っているformタグに「h-adr」クラスを入れる
郵便番号を入力するinputタグに「p-postal-code」クラスを入れる
住所（都道府県）を入力するinputタグに「p-region」クラスを入れる
住所（市区町村）を入力するinputタグに「p-locality」と「p-street-address」クラスを入れる
市区町村以降の住所を入力するinputタグに「p-extended-address」クラスを入れる
※このクラスは入れなくても動作するような気がするのですが、制作者様の指示通りにします！！
表示的には見えませんが、<input type="hidden" class="p-country-name" value="Japan">を入れる
※これは表示的には見えなくてもコード的に入れること必須！ちゃんと表示される入力欄として「国：日本」と選ぶ欄も欲しい場合はhiddenではなくinput="text"とかで、クラスに「p-country-name」を付与しましょう

そのほかのクラスはcssでデザイン当てる用のクラスです。

入力欄部分のCSS

style.css

/* common */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
  margin:0;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

/* main contents */
main{
  max-width: calc(800px + .3%);
  width: 100%;
  padding:0 .3%;
  margin-top:20px;
  margin-left: auto;
  margin-right: auto;
}
input[type="text"], input[type="password"], textarea, select, .flatpickr-mobile {
    width: 100%;
    border: 1px solid #ccc;
    padding: 15px;
    font-size: 16px;
    border-radius: 5px;
    box-shadow: 0px 0px 8px -5px #112D4E;
    color: #000;
    background: #fff;
    appearance: none;
}
.btn-01 {
    position: relative;
    display: block;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 5px;
    border-radius: 5px;
    border: 0;
    background: #112D4E;
    color: #fff;
    transition: all .3s 0s ease;
    margin-left: 20px;
    cursor: pointer;
    width:180px;
    text-align:center;
    font-size:14px;
}
.flex-between{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
main .post-content{
  background:#F9F7F7;
  border-radius:5px;
  position:relative;
}
main .post-table dt, main .post-table dd{
  border-bottom:2px solid #fff;
  display:flex;
  align-items:center;
}
main .post-table dt{
  width:30%;
  padding:20px 10px 20px 20px;
  font-weight:bold;
}
main .post-table dd{
  padding:20px 20px 20px 10px;
  width:70%;
}
main .post-table dd > div{
  width:100%;
}
main dl.post-table:last-child dt, main dl.post-table:last-child dd{
  border-bottom:none;
}

@media only screen and (max-width: 767px){
  main .post-table dt{
    width:35%;
    padding:20px 5px 20px 10px;
  }
    main .post-table dd{
    width:65%;
  }
}

@media only screen and (max-width: 380px){
  main .post-table{
    display:block;
  }
  main .post-table dt{
    width:100%;
    padding:15px 15px 5px;
    border-bottom:0;
  }
  main .post-table dd{
    width:100%;
    padding:5px 15px 10px;
  }
}

「/* common */」の部分はcss界隈でよくあるreset.cssとかに既に書いてあるかもしれないので、不要な場合は適宜削除してください。

まとめ

ajaxzip3を長らく使わせていただいていたのですが、いつの間にか次世代ライブラリ「YubinBango」ができていることに最近気づいた筆者ですが、相変わらず使いやすいです、本当にありがたい；_；
作ってくれてありがとうございます✨

このパーツは下記の記事「cakePHP4でカートを作ってみる」の制作工程の1つになります。