コード全文

ECサイトのフォーム等でよく見る郵便番号で住所が自動入力されるやつを郵便番号検索APIを活用して作成してみました。
下記のコードをコピペすれば最低限使える1画面が完成するので用途に合わせてHTMLなど改変してください。

動作確認用サンプルページ

addressForm.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>郵便番号フォーム</title>
</head>
<body>

<h3>郵便番号で住所が自動入力されるフォーム</h3>
<p>郵便番号で探す</p>
<div>
  <input type="text" id="searchBox" placeholder="例:1638001(ﾊｲﾌﾝなし)" onkeyup="inputCheck ()">
  <button type="button" onclick="searchAddress ()">探す</button>
</div>
<div id="check" ></div>
<p>住所：<input type="text" id="addressForm"></p>
<p>番地：<input type="text"></p>
<button type="button" onclick="dummyPost ()">送信</button>

<script>
  async function searchAddress () {
    const postalCode = document.getElementById("searchBox").value;
    const url = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + postalCode;
    const response = await fetch(url);
    const data = await response.json();
    if(!(data['results'])) {
      document.getElementById( "check" ).innerHTML = '該当データなし';
    } else {
      const address = data['results'][0]['address1'] + data['results'][0]['address2'] + data['results'][0]['address3']
      document.getElementById( "addressForm" ).value = address;
    }
  }

  function inputCheck() {
    const inputValue = document.getElementById( "searchBox" ).value;
    if (!(inputValue.match(/^[0-9]+$/)) || !(inputValue.length === 7)) {
      document.getElementById( "check" ).innerHTML = '半角数字7桁で入力してください！';
    } else {
      document.getElementById( "check" ).innerHTML = '';
    }
  }

  function dummyPost () {
    alert('送信はしないぜ')
  }
</script>
</body>
</html>

コード解説

使った機能をそれぞれ備忘録としてまとめておく

WebAPI

郵便番号検索API
今回はこちらのWebAPIを使用させていただきました。
利用方法は上記サイトに詳しく書かれているのでそちらを参照してください。

async / await

JSで非同期処理を書く際に使う。
同期処理と非同期処理については「この記事にある図」と「この記事にある例え話」を組み合わせて読むと非常にわかりやすかった。

const response = await fetch(url);
const data = await response.json();

今回のコードで言うとこの部分が該当する。
JS内の処理は同期処理だけれどAPIを叩いてるところは非同期処理となっている。
awaitをつけることで「値が返ってくるまで次の処理に進むのは待ってくれよなー頼むよー」ができるようになる。
※awaitがないとresponseが空のまま処理が進んでエラーになる。
awaitはasyncで定義することで使えるようになる。

HTML

placeholder
フォーム等にあらかじめ入力されている灰色の文字を作れる
onclick
クリックされたらJSを発火させる時に使える
onkeyup
キーが離されたのを検知してJSを発火させる時に使える

おわりに

認識違いなどあればコメントいただけますと幸いです。
一旦は自分のノート的な形で残しておきたかったので、もう少し勉強してわかりやすく修正します。