📮

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

2023.04.15

SHARE

TABLE OF CONTENTS

    📮

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

    2023.04.15

    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

    ©2025 SHOYA KAJITA.