📮 ~
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("郵便番号を入力してください。");
}
});