📮 ~ 

JavaScriptで郵便番号検索で住所検索を日本郵便のAPIで実装する

2023.04.15
RELATED CATEGORY
TABLE OF CONTENTS

JavaScriptで日本郵便の郵便番号検索APIを利用した住所検索を実装する。

CodePen

JavaScript

const API_URL = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=";

const format = {
  zip1: /^\d{3}-?\d{4}$/, // 郵便番号(ハイフン有り)
  zip2: /^0\d{7}$/, // 郵便番号(ハイフン無し)
};

const searchBtn = document.getElementById("zipSearchBtn"), // 検索ボタン
  zip = document.getElementById("zip"), // 郵便番号入力欄
  address = document.getElementById("address"); // 住所入力欄

const getAddress = (text) => {
  const url = API_URL + text;
  fetch(url)
    .then((data) => {
      return data.json();
    })
    .then((data) => {
      if (data.results != null) {
        address.value = `${data.results[0].address1}${data.results[0].address2}${data.results[0].address3}`;
      } else {
        alert("該当する住所が見つかりませんでした。");
      }
    })
    .catch((error) => {
      alert("住所検索に失敗しました。");
    });
};

searchBtn.addEventListener("click", (e) => {
  console.log(zip.value);
  if (zip.value != "") {
    // 郵便番号の形式か確認
    if (format.zip1.test(zip.value) || format.zip2.test(zip.value)) {
      getAddress(zip.value);
    } else {
      alert("郵便番号の形式で入力してください。");
    }
  } else {
    alert("郵便番号を入力してください。");
  }
});

Reference

PICKUP ARTWORK