YubinBango.jsを使った住所自動入力の実装方法

YubinBango.jsを使って、
郵便番号を入力したら自動的に都道府県以下を補完させる。

①下記のcdnを記述。

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

②`郵便番号`、`都道府県`、`市区町村`の全てのブロックを囲んだブロックのclassに`h-adr`を記述。
formタグのclassに入れても良いし、

```html
<form class="form h-adr">
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>
```

formブロックの中で`郵便番号`、`都道府県`、`市区町村`のブロックを囲うブロックのclassに`h-adr`をつける感じでも良い。

```html
<form class="form">
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  <div class="h-adr">
  　  <div class="form-box">
       <label>郵便番号</label>
       <input type="text">
    </div>
    <div class="form-box">
       <label>都道府県</label>
       <select class="">
     　　　　  <option value="">--</option>
     　　　　  <option value="1">北海道</option>
     　　　　  <option value="2">青森県</option>
     　　　　  <option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　　・
　　　　　　　　　　  　　　　<option value="45">宮崎県</option>
       　　　　<option value="46">鹿児島県</option>
       　　　　<option value="47">沖縄県</option>
       </select>
    </div>
  　  <div class="form-box">
       <label>市区町村</label>
       <input type="text">
    </div>
  </div>
</form>
```

③classに`h-adr`を記述したタグの次の行に下記を記載。
```html
<span class="p-country-name" style="display:none;">Japan</span>
```
②のhtmlを例にすると、
```html
<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>
```
もしくは、
```html
<form class="form">
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  <div class="h-adr">
     <span class="p-country-name" style="display:none;">Japan</span>
  　  <div class="form-box">
       <label>郵便番号</label>
       <input type="text">
    </div>
    <div class="form-box">
       <label>都道府県</label>
       <select class="">
     　　　　  <option value="">--</option>
     　　　　  <option value="1">北海道</option>
     　　　　  <option value="2">青森県</option>
     　　　　  <option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　　・
　　　　　　　　　　  　　　　<option value="45">宮崎県</option>
       　　　　<option value="46">鹿児島県</option>
       　　　　<option value="47">沖縄県</option>
       </select>
    </div>
    <div class="form-box">
       <label>市区町村</label>
       <input type="text">
    </div>
  </div>
</form>
```

となる。

④`郵便番号`のinputのclassに`p-postal-code`を記述する。
```html
<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text" class="p-postal-code">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>
```

⑤`都道府県`のselectのclassに`p-region-id`を記述する。
```html
<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text" class="p-postal-code">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="p-region-id">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>
```
⑥`市区町村`のselectのclassに`p-locality` `p-street-address`を記述する。
因みに`p-locality`は市や区までの情報を、`p-street-address`は町名、村名、郡名までの情報が入る。
なので、フォームの項目によって使い分ける。

```html
<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text" class="p-postal-code">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="p-region-id">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text　p-locality　p-street-address">
  </div>
</form>
```
以上で基本的な実装は完了。

以下の条件により、実装した際に動作しないという沼に溺れた為、
備忘録として記載する。

:::note warn
labelタグにforはつけない。
:::

:::note warn
selectタグをターゲットにしたjqueryライブラリは使用しない。
:::