先日、JavaScriptの「fetch API」の基本的な使い方について記事をまとめました。
あわせて読みたい
【JS】初心者ガイド：fetch API & DOMparser
JavaScriptの「fetch API」を使うことで、Webサイトやアプリからデータを取得したり、サーバーにデータを送信したりすることができます。本記事では、「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=1000001fetch(url)でAPIリクエストを送信します。レスポンスは以下の順で処理します。
- レスポンスが正常かどうかを確認
- レスポンスをJSON形式に変換
fetchで取得したレスポンスはテキスト形式で提供されるため、これをJavaScriptで操作できるよう、response.json()でJSON形式にパース（解析）します。
- 取得したデータの中から住所情報を取り出して表示
- 住所情報がない場合は「該当する住所が存在しません。」を表示
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）を参照してください。