JavaScript で郵便番号検索をやってみた。
2024年3月10日
Webシステムには、ユーザーの個人情報の入力を求めるものがありますが、そこで扱われる情報に郵便番号や住所があります。
しかし、郵便番号が決まれば住所の番地以外の部分が決まってしまうので、郵便番号を入力した際に住所も自動で入力ができると便利です。
そこで今回は、Web システムで扱える様、JavaScript で郵便番号から住所を検索する方法を紹介したいと思います。
ゴール
郵便番号を入力して[検索] ボタンをクリックすると、住所が表示される。
郵便番号が不正な場合はエラーメッセージが表示される。
使用するサービス
今回は郵便番号から住所を検索するのに、ZipCloud というサービスを利用します。
https://zipcloud.ibsnet.co.jp/
こちらではネット上で住所のパラメータから結果の住所を返してくれる API (Application Programing Interface) が提供されています。
https://zipcloud.ibsnet.co.jp/doc/api
実際にパラメータを投げると、以下の様な JSON 形式で 結果が取得できます。
正常な郵便番号を投げた場合
不正な郵便番号を投げた場合
使用する技術
今回は jQuery のページ操作と非同期通信 (Ajax) の機能を使っていきます。
非同期通信は、メインの処理と並列で動くため複雑になりやすいというデメリットがありますが、待機時間がないので動きが軽く感じるというメリットがあります。
| 同期通信 | 非同期通信 | |
| 動き | 通信処理が終わるまで待機して次の処理に進む。 | 通信処理が終わるのを待機せずに次の処理に進む。 |
| メリット | 通信処理を含めて一つずつ順番に処理していくので、処理の流れが分かりやすい。通信以降の処理は通信が終わったという前提で処理を進められる。 | 待機時間がないので、処理が軽く感じる。 |
| デメリット | 送信してから受信が終わるまで待機時間があり、その間マウス操作やキーボード操作も受け付けないので、処理が重く感じる。 | メインの処理と並列で動き、送信後の処理は順信が終わっている前提でコードが書けないので、処理が複雑になりやすい。 |
コード
以下が ZipCloud と jQuery を使用した郵便番号検索プログラムで、HTML ファイルとして記述します。
<!DOCTYPE html>
<html>
<head>
<title>郵便番号検索</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const search_url = 'https://zipcloud.ibsnet.co.jp/api/search';
function search() {
let zip = $('#zip_input').val();
zip = zip.replace('-', '');
let address = '';
$.ajax(
{
url: search_url,
type: 'get',
dataType: 'json',
data: {
zipcode: zip
}
}
).done(
function(response) {
var results = response.results;
if(results == null || results.length == 0) {
$('#result_cell').css('color', 'red');
$('#result_cell').html(response.message);
}
else {
const element = results[0];
address = element.address1 + element.address2 + element.address3;
kana = element.kana1 + element.kana2 + element.kana3;
$('#result_cell').css('color', 'black');
$('#result_cell').html(address);
$('#kana_cell').css('color', 'black');
$('#kana_cell').html(kana);
}
}
);
}
function initialize() {
$('#search_button').click(search);
}
$(window).ready(initialize);
</script>
</head>
<body>
<table>
<tr>
<th>郵便番号</th>
<td><input id="zip_input" type="text"></td>
<td><button id="search_button">検索</button></td>
</tr>
</table>
<div id="result_cell"></div>
<div id="kana_cell"></div>
</body>
</html>
まず以下の部分で jQuery を使用できる様にしています。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>次に、ボタンをクリックしたときの非同期通信を行なう search 関数を定義します。
function search() {
let zip = $('#zip_input').val();
zip = zip.replace('-', '');
let address = '';
$.ajax(
{
url: search_url,
type: 'get',
dataType: 'json',
data: {
zipcode: zip
}
}
).done(
function(response) {
var results = response.results;
if(results == null || results.length == 0) {
$('#result_cell').css('color', 'red');
$('#result_cell').html(response.message);
}
else {
const element = results[0];
address = element.address1 + element.address2 + element.address3;
kana = element.kana1 + element.kana2 + element.kana3;
$('#result_cell').css('color', 'black');
$('#result_cell').html(address);
$('#kana_cell').css('color', 'black');
$('#kana_cell').html(kana);
}
}
);ZipCloud では郵便番号のパラメーターはハイフン (-) なしのため、zip = zip.replace(‘-‘, ”); で郵便番号にハイフン (-) が入っていた場合はそれを削除しています。
done のところで受信時の処理を行なっていますが、ここではエラー時と成功時に分けてそれぞれ jQuery の機能を利用して結果を記述しています。
また、下記の部分で [検索] ボタンに search 関数を割り当てています。
function initialize() {
$('#search_button').click(search);
}上記の HTML ファイルをブラウザで開くと以下の様なページが表示されるので、郵便番号を入力して [検索] ボタンをクリックすれば、結果が表示されると思います。
まとめ
今回は公開されている郵便番号検索の API と jQuery を利用して、郵便番号検索の機能を作ってみましたが、世の中には公開されているいろいろなAPI がありますので、そういったものを使用するときにも、こちらの呼び出し方が参考になると思います。