Webサイト制作-(郵便番号検索) | ジョイタスネット

郵便番号APIを利用して、郵便番号から住所を検索するアプリを作成してみよう。

作るもの

郵便番号を入れるフォームがあるので、調べたい郵便番号を入れて送信ボタンをおす。

結果が表示される

一つの郵便番号に複数の住所が割り振られている場合がある。
989-2351
をいれると20件の住所が表示される。

作成

任意の場所(デスクトップなど)にzipappという名のフォルダを作成する。
zipappフォルダの中にcssフォルダ、jsフォルダを作成し、cssフォルダの中にmain.css,jsフォルダの中にmain.jsを作成する。(中身は空でよい)
zipappフォルダの直下にindex.htmlを作成する。ここまででフォルダの状態は以下

以下のようにindex.htmlをマークアップする。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>郵便番号から住所を検索</title>
  <link rel="stylesheet" href="css/main.css">
  <script src="js/main.js"></script>
</head>
<body>
  <div id="container">
    <p id="msg">郵便番号を入力してください</p>
    <input type="text" id="zip" placeholder="000-0000">
    <button id="btn">送信する</button>
    <div id="result"></div>
  </div>
</body>
</html>

続いてcss/main.cssを以下のように記述する

#container {
  width: 96%;
  margin: 20px auto;
}

#result {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  gap: 20px;
}

table {
  border-collapse: collapse;
  margin-top: 20px;
}

td {
  padding: 5px 10px;
  border: 1px solid #333;
}

ポイント解説

今回、１件の住所データ表示テーブルを作成している。
複数住所があった場合にgridで並べたいのでcss gridを用いてる。

続いてjs/main.jsを以下のように記述する

'use strict';
document.addEventListener('DOMContentLoaded', () => {
  //domの取得
  const msg = document.getElementById('msg');
  const zip = document.getElementById('zip');
  const btn = document.getElementById('btn');
  const result = document.getElementById('result');
  btn.addEventListener('click', async () => {
    result.textContent = null;
    if (!/^[0-9]{3}-?[0-9]{4}$/.test(zip.value)) {
      msg.textContent = '正しい郵便番号を入力してください。';
      return;
    }
    const zipcode = zip.value.replace('-', '');
    msg.textContent = '通信中...';

    //awaitをつけてfetchを行うとResponseオブジェクトが返る
    const res = await fetch(
      `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`
    );

    //awaitをつけてjsonメソッドを実行するとオブジェクトを取得できる
    const data = await res.json();
    if (data.results === null) {
      msg.textContent = '実在しない郵便番号です';
      return;
    }
    for (let res of data.results) {
      const table = document.createElement('table');
      let ele = `<tr><td>郵便番号</td><td>${res.zipcode}</td></tr>`;
      ele += `<tr><td>都道府県コード</td><td>${res.prefcode}</td></tr>`;
      ele += `<tr><td>都道府県名</td><td>${res.address1}</td></tr>`;
      ele += `<tr><td>市区町村名</td><td>${res.address2}</td></tr>`;
      ele += `<tr><td>町域名</td><td>${res.address3}</td></tr>`;
      ele += `<tr><td>都道府県名カナ</td><td>${res.kana1}</td></tr>`;
      ele += `<tr><td>市区町村名カナ</td><td>${res.kana2}</td></tr>`;
      ele += `<tr><td>町域名カナ</td><td>${res.kana3}</td></tr>`;
      table.innerHTML = ele;
      result.appendChild(table);
    }
    msg.textContent = '通信完了';
  });
});