この記事で書くこと
- 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);
}