JSONP を使った 郵便番号・住所　変換

https://zipcloud.ibsnet.co.jp の API を JSONP で使う方法です。

実行結果
![zipcode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8d1e1618-4d7d-732d-9da7-52b31247b4c8.png)


```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="zipcode.js"></script>
<title>zipcode (Oct/18/2020)</title>
</head>
<body>
<h2>zipcode</h2>

<table>
<tr>
<td><p>郵便番号</p></td>
<td><input type="text" id="postal1" size=6/ > 
- <input type="text" id="postal2" size=7 />
<br>
<button id="button_zip">郵便番号から住所入力</button>
</td>
</tr>
<tr>
<td><p>住所（都道府県）</p></td>
<td>
<input type="text" id="pref" style="width: 148px" />
</td>
</tr>
<tr>
<td><p>住所（市町村）</p></td>
<td>
<input type="text" id="city" style="width: 215px" />
</td>
</tr>
<tr>
<td><p>住所（番地）</p></td>
<td>
<input type="text" id="town" style="width: 209px" />
</td>
</tr>
</table>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Oct/18/2020 PM 15:18<p />
</body>
</html>
```

```js:zipcode.js
// -----------------------------------------------------------------------
//  zipcode.js
//
//						Oct/18/2020
//
// -----------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").text  ("*** zipcode *** start ***")

	button_zip_click_monitor ()

	jQuery("#outarea_hh").text ("*** zipcode *** end ***")
})

// -----------------------------------------------------------------------
// [8]:
function button_zip_click_monitor ()
{
	jQuery ("#button_zip").click (function ()
		{
		jQuery ("button").css ("color","black")
		jQuery ("#" + this.id).css ("color","blue")

		jQuery ("#outarea_bb").text ("this.id = " + this.id)

		const postal1 = jQuery("#postal1").val()
		const postal2 = jQuery("#postal2").val()
		const zipcode = "" + postal1 + postal2

		var str_tmp = ""
		str_tmp += "postal1 = " + postal1 + "<br />"
		str_tmp += "postal2 = " + postal2 + "<br />"
		str_tmp += "zipcode = " + zipcode + "<br />"
		jQuery ("#outarea_cc").html (str_tmp)

		const url_zip = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zipcode + "&callback=?"

		jQuery.getJSON(url_zip,function (data)
			{
			jQuery ("#outarea_dd").text (JSON.stringify(data["results"]))
//			jQuery ("#outarea_dd").text (data)
			const unit = data["results"][0]
			var str_out = ""
			str_out += "pref: " + unit['address1'] + '<br />' 
			str_out += "city: " + unit['address2'] + '<br />' 
			str_out += "town: " + unit['address3'] + '<br />' 
			jQuery ("#outarea_ee").html (str_out)

			jQuery ("#pref").val (unit['address1'])
			jQuery ("#city").val (unit['address2'])
			jQuery ("#town").val (unit['address3'])
			})
		})
}

// -----------------------------------------------------------------------
```