【JavaScript / fetch API】郵便番号から住所を検索して表示する方法

先日、JavaScriptの「fetch API」の基本的な使い方について記事をまとめました。

今回は、より実践的な使い方として「郵便番号から住所を取得する」というよくあるシチュエーションを実装してみたので、こちらの実装方法を公開します。

郵便番号を入力して検索ボタンをクリックすると、該当する住所が表示されます。

目次

HTML / CSS / JavaScript コード

<div class="container">
    <div class="form-group">
        <input type="text" id="zipcode1" maxlength="3" placeholder="123">
        <span>-</span>
        <input type="text" id="zipcode2" maxlength="4" placeholder="4567">
        <button id="searchButton">検索</button>
    </div>
    <div id="result"></div>
</div>
.container {
  height: 120px;
  margin: 0 auto;
  text-align: center;
}

.form-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

input[type="text"] {
  width: 100px;
  padding: 10px;
  margin: 0 5px;
  text-align: center;
}

button {
  padding: 10px 20px;
}

#result {
  margin-top: 20px;
  font-size: 20px;
  color: #333;
}
document.getElementById('searchButton').addEventListener('click', function() {
  const zipcode1 = document.getElementById('zipcode1').value;
  const zipcode2 = document.getElementById('zipcode2').value;
  const resultDiv = document.getElementById('result');

  // 入力した郵便番号に不備がある場合、アラートを出して処理を中断する
  if (zipcode1.length !== 3 || zipcode2.length !== 4) {
      alert('正しい郵便番号を入力してください。');
      return;
  }

  const zipcode = zipcode1 + zipcode2;
  const url = `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`;

  fetch(url)
      .then(response => {
          if (!response.ok) {
              throw new Error('ネットワークに問題があります');
          }
          return response.json();
      })
      .then(data => {
          if (data.status !== 200) {
              resultDiv.textContent = '該当する住所が存在しません。';
              return;
          }
          const addressInfo = data.results[0];
          const address = `${addressInfo.address1} ${addressInfo.address2} ${addressInfo.address3}`;
          resultDiv.textContent = address;
      })
      .catch(error => {
          console.error('Fetchエラー:', error);
          resultDiv.textContent = '該当する住所が存在しません。';
      });
});

実装のポイント

日本の郵便番号から住所を取得するには、「zipcloud」という無料のAPIを使います。
(商用利用もOKのようですが、事前に利用規約を読んでおきましょう。)

ベースとなるURLは https://zipcloud.ibsnet.co.jp/api/search で、こちらにリクエストパラメータ(郵便番号7桁)を加えてリクエストします。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=郵便番号

例えば、郵便番号が「1000001」(東京都千代田区千代田)であれば、次のようなURLになります。

https://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001

fetch(url)でAPIリクエストを送信します。レスポンスは以下の順で処理します。

  1. レスポンスが正常かどうかを確認
  2. レスポンスをJSON形式に変換
    • fetchで取得したレスポンスはテキスト形式で提供されるため、これをJavaScriptで操作できるよう、response.json()でJSON形式にパース(解析)します。
  3. 取得したデータの中から住所情報を取り出して表示
    • 住所情報がない場合は「該当する住所が存在しません。」を表示
fetch(url)
    .then(response => {
        if (!response.ok) {
            throw new Error('ネットワークに問題があります');
        }
        return response.json();
    })
    .then(data => {
        if (data.status !== 200) {
            resultDiv.textContent = '該当する住所が存在しません。';
            return;
        }
        const addressInfo = data.results[0];
        const address = `${addressInfo.address1} ${addressInfo.address2} ${addressInfo.address3}`;
        resultDiv.textContent = address;
    })
    .catch(error => {
        console.error('Fetchエラー:', error);
        resultDiv.textContent = '該当する住所が存在しません。';
    });

JSON形式に変換したdataには、以下のようなキーと値が組み込まれています。

  • message: エラーメッセージ(エラーがない場合はnull)。
  • results: 検索結果の配列。この中に住所情報が含まれます。
    • zipcode: 郵便番号。
    • prefcode: 都道府県コード。
    • address1: 都道府県名。
    • address2: 市区町村名。
    • address3: 町域名。
    • kana1: 都道府県名のカタカナ。
    • kana2: 市区町村名のカタカナ。
    • kana3: 町域名のカタカナ。
  • status: ステータスコード(成功の場合は200)。

詳しくは公式ページ(https://zipcloud.ibsnet.co.jp/doc/api)を参照してください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次