この記事で書くこと

JavaScript を利用した Web アプリ
アロー関数・async / await を利用して、Web API を叩く

この記事で書かないこと

jQuery を利用して Web API を叩く

開発するアプリ

内容

郵便番号から住所を検索できる Web アプリ

要件

Web ブラウザ上で郵便番号７桁を入力し、検索を実行すると郵便番号に対応した住所を表示する
７桁以外の数字を入力すると、アラートを表示する
住所が見つからない場合は、アラートを表示する

ユースケース

シナリオ

ユーザーが住所を検索する

ユーザーがテキストフィールドに数字を入力する
ユーザーが［search］ボタンを押下する
システムが郵便番号に対応した住所を表示する
※ ここでは例外に関する記載を省略する

画面イメージ

ブラウザで sample.html を表示

1000000 を入力し［search］ボタンをクリック

123456 を入力し［search］ボタンをクリック

9999999 を入力し［search］ボタンをクリック

開発環境

項目	内容
PC	MacBook Air M1（20202）
エディタ	Visual Studio Code
ブラウザ	Chrome
Web API	郵便番号検索API

ディレクトリの構成

JavaScript
├ sample.html
└ sample.js

コード

sample.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sample Page</title>
    </head>
    <body>
        <header></header>
        <div>
            <h1>Sample App</h1>
            <div>
                <input id="zipcode" type="text">
                <input id="button" type="button" value="search">
            </div>
            <div id="div">

            </div>
        </div>
        <footer></footer>
        <script src="sample.js"></script>
    </body>
</html>

sample.js

document.getElementById('button').addEventListener('click',() => {
    const zipcode = document.getElementById('zipcode').value;
    load(zipcode).then((data) => {
        showResult(data,'div');
    })
    .catch((error) => {
        showAlert(error);
    })
})

const load = async (zipcode) => {
    validateLength(zipcode);
    const response = await fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`);
    return response.json();
}

const validateLength = (zipcode) => {
    if (zipcode.length !== 7) {
        throw new Error("郵便番号は７桁で入力してください");
        return false;
    }
}

const validateResultsNotNull = (data) => {
    if (data.results === null) { 
        throw new Error("住所が見つかりませんでした");
        return false 
    };
}

const generateHTMLTag = (result) => {
    return "<p>" + result.address1 + result.address2 + result.address3 + "</p>";
}

const showResult = (data,id) => {
    validateResultsNotNull(data);
    const results = data.results;
    document.getElementById(id).innerHTML = generateHTMLTag(results[0]);
}

const showAlert = (error) => {
    window.alert(error);
}