JavaScript

2023.01.03

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で郵便局番号を入力したら、住所が自動入力される仕様を実装する方法について紹介しました。

以上で解説を終わります。