JavaScriptで郵便番号から住所を自動入力する方法【zipcloud APIを使おう】

JavaScriptで郵便局番号を入力したら、住所が自動入力される仕様を実装したい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
JavaScriptで郵便番号から住所を自動入力 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
郵便番号を入力すると、都道府県・市区町村・町名などが自動で入力されます。
実装手順は以下の通りです。
HTMLを準備
<form name="contact" action="">
<ul>
<li><input name="postcode" type="text" placeholder="郵便番号を入力してください"></li>
<li><input name="prefecture" type="text" placeholder="都道府県"></li>
<li><input name="city" type="text" placeholder="市区町村"></li>
<li><input name="town" type="text" placeholder="町名など"></li>
</ul>
</form>
まず最初にHTMLを準備します。
本記事ではform・inputタグを使って実装します。
form・inputタグに任意のname属性を指定。
郵便番号を入力する欄、住所が自動入力される欄を作成します。
JavaScriptで郵便番号から住所を自動入力する。
// formを取得
const contactForm = document.forms.contact;
// formのpostcodeに郵便番号を入力したら関数を実行する
contactForm.postcode.addEventListener('input', e => {
// zipcloud apiを使って、郵便番号の住所データを取得。
fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${e.target.value}`)
// 取得したデータをjson形式で読み込み。
.then(response => response.json())
// 取得したデータを出力
.then(data => {
contactForm.prefecture.value = data.results[0].address1;
contactForm.city.value = data.results[0].address2;
contactForm.town.value = data.results[0].address3;
})
.catch(error => console.log(error))
})
郵便番号から住所を自動入力する、実装コード例です。
コードの詳細は以下の通りです。
郵便番号を入力したら実行される関数を定義
// formを取得
const contactForm = document.forms.contact;
// formのpostcodeに郵便番号を入力したら関数を実行する
contactForm.postcode.addEventListener('input', e => {
//実行される処理
})
document.forms.name属性の値でformを取得。
郵便番号を入力したら実行される関数をaddEventListenerを使って定義します。
本記事では入力欄がinputなので、addEventListenerの引数にinputを指定します。
zipcloud APIから住所を取得
// zipcloud apiを使って、郵便番号の住所データを取得。
fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${e.target.value}`)
addEventListener関数内で上記コードを記述。
fetchメソッドを使い、zipcloud APIから住所を取得します。
APIの仕様について、詳しくは以下を参照
http://zipcloud.ibsnet.co.jp/doc/api
zip cloud apiのURL末尾、zipcodeパラメータに入力された郵便番号が入るようにします。
入力された郵便番号の値は以下で取得できます。
e(addEventListenerの引数).target.value
住所を自動入力
// 取得したデータをjson形式で読み込み。
.then(response => response.json())
// 取得したデータを出力
.then(data => {
contactForm.prefecture.value = data.results[0].address1;
contactForm.city.value = data.results[0].address2;
contactForm.town.value = data.results[0].address3;
})
.catch(error => console.log(error))
fetchからthenメソッドで処理を繋ぎます。
fetchで取得したレスポンスの結果を、jsonメソッドを使いJSON形式で読み込み。
thenメソッドでさらに処理を繋ぎ、JSONデータをHTMLに出力します。
取得したJSONのresults配列に都道府県(address1)、市区町村(address2)、町名(address3)が格納されてます。
上記を自動入力欄に出力すれば実装完了です。
まとめ
JavaScriptで郵便局番号を入力したら、住所が自動入力される仕様を実装する方法について紹介しました。
以上で解説を終わります。