アーカイブ
郵便番号から住所を取得できるWebサービス、ZipCloudの「郵便番号検索API」を使用し、
郵便番号検索で住所がフォームに自動入力される機能を作成してみましたのでご紹介させていただきます。
（こちらは練習用で作成しております。）
完成したものがこちら
郵便番号を入力して、検索ボタンを押すと住所が自動で入力されます。
使用API
ZipCloud「郵便番号検索API」：http://zipcloud.ibsnet.co.jp/doc/api
（※ご使用される場合は、利用規約のご確認をお願いします。）
ベースとなるURLはこちらです。
https://zipcloud.ibsnet.co.jp/api/search郵便番号「2310023」で検索したい場合は、「zipcode=2310023」のようにURLにパラメータを付与します。
https://zip-cloud.appspot.com/api/search?zipcode=2310023上記のURLにアクセスすると以下の結果が返却されます。
{
"message": null,
"results": [{
"address1": "神奈川県",
"address2": "横浜市中区",
"address3": "山下町",
"kana1": "ｶﾅｶﾞﾜｹﾝ",
"kana2": "ﾖｺﾊﾏｼﾅｶｸ",
"kana3": "ﾔﾏｼﾀﾁｮｳ",
"prefcode": "14",
"zipcode": "2310023"
}],
"status": 200
}Ajax通信を使用し、この返却される情報をもとに住所がフォームに自動入力される住所検索フォームを作成していきます。
・api.html
（※ "style.css" ファイルを読み込んでおりますが、今回 "style.css" ファイル内の内容は省略させていただきます。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jsファイルの読み込み -->
<script src="api.js"></script>
<title>郵便番号で住所検索</title>
</head>
<body>
<h1>郵便番号で住所検索</h1>
<div class="form-item"> <label class="form-label">郵便番号</label> <input type="text" id="zipcode" maxlength="8" placeholder="例）1112222"> </div> <button id="btn">検索</button>
<h2>検索結果</h2>
<div class="form-item"> <label class="form-label">都道府県</label> <input type="text" id="prefecture"> </div>
<div class="form-item"> <label class="form-label">市区町村</label> <input type="text" id="municipality"> </div>
<div class="form-item"> <label class="form-label">住所</label> <input type="text" id="address"> </div>
</body>
</html>・api.js
$(function () {
$("#btn").on('click', function () {
// ajax通信開始
$.ajax({
url: "http://zipcloud.ibsnet.co.jp/api/search?zipcode=" + $('#zipcode').val(),
// 現在のドメインと、データ取得先のドメインが異なるため 'jsonp' を指定
dataType: 'jsonp',
}).then(
// 通信成功時の処理
function (data) {
if (data.results) {
// 住所情報を取得
var result = data.results[0];
// フォーム入力欄の「都道府県」「市区町村」「住所」に値をセット
$('#prefecture').val(result.address1);
$('#municipality').val(result.address2);
$('#address').val(result.address3);
} else {
alert('住所が見つかりません');
}
},
// 通信失敗時の処理
function () {
alert("読み込み失敗");
}
);
});
});url：リクエスト先のURLを指定します。「$(‘#zipcode').val()」で入力された郵便番号を取得し、URLにパラメータを追加しています。
dataType：読み込むデータの種類を指定します。今回は、jsonpを使用しました。（jsonpについての参考記事）
// 通信成功時の処理
function (data) {
if (data.results) {
// 住所情報を取得
var result = data.results[0];
// フォーム入力欄の「都道府県」「市区町村」「住所」に値をセット
$('#prefecture').val(result.address1);
$('#municipality').val(result.address2);
$('#address').val(result.address3);
}
}Ajax通信が成功した場合、.then(function( )) の第一引数（今回の場合はdata）に取得したデータが入ってきます。
冒頭で郵便番号検索APIから返却された results 内に住所情報が入っていることを確認しました。
それぞれの値を住所検索フォームの各valueに設定し、完了です。
まとめ
以上、Ajax通信と、郵便番号検索APIを用いた住所を自動入力させる方法でした！
今回の練習で、APIからAjaxでデータ取得するまでの一連の流れを理解することができました。
ZipCloudなどの外部APIを使用すれば手軽に練習することができますね。
Ajax通信の部分では、JSONデータはクロスドメイン制限がある
（異なるドメインのサーバからデータを取得することができない）
ということも勉強になりました。
今後の実務に生かしていきたいです。
