Written by Kasumi

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

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

目次

関連記事

JavaScript

【JavaScript】初回アクセスのみ任意の処理を実行する方法

2022.12.18
436
JavaScript

JavaScriptでn番目の子要素を取得する方法

2022.10.18
536
JavaScript

JavaScriptで文字列の指定位置にHTMLタグを入れる方法

2022.12.15
360
JavaScript

JavaScriptで指定した条件に当てはまる配列要素があるか存在をチェック。true/falseで判定する方法

2023.01.05
278