[Javascript]郵便番号検索アプリの作成と正規表現の活用

今回は、JavaScriptを活用して有用な郵便番号検索アプリを作成します。
ユーザーが入力した文字列が有効な郵便番号であるかどうかを正規表現で確認し、
zipcloudの郵便番号検索APIを使用して住所情報を取得します。

プログラム概要

①「確認」ボタンをクリックすることで、JavaScript関数の checkPostCode() を呼び出します。

<input type="text" id="postcode">
<input type="button" value="確認" onclick="checkPostCode()">

②メッセージ項目の初期化と入力値を取得します。

// メッセージ初期化
var sysMsgElement = document.getElementById("sysMsg");
sysMsgElement.innerHTML = "";
sysMsgElement.style.color = "red";
// 入力値取得
var inputValue = document.getElementById("postcode").value;

③未入力判定を行い、エラーの場合はメッセージを表示する。

if (inputValue == "") {
    sysMsgElement.innerHTML = "未入力です";
    return;
}

④数字（全角または半角）判定を行い、エラーの場合はメッセージを表示する。

var numericPattern = /^[0-9０-９]+$/;
if (!numericPattern.test(inputValue)) {
    sysMsgElement.innerHTML = "数値のみ入力してください";
    return;
}

⑤郵便番号は7桁のため7文字判定を行い、エラーの場合はメッセージを表示する。

var countPattern = /^.{7}$/;
if (!countPattern.test(inputValue)) {
    sysMsgElement.innerHTML = "7文字で入力してください";
    return;
}

⑥郵便番号は先頭桁が1以上のため先頭文字判定を行い、エラーの場合はメッセージを表示する。

var headPattern = /^[1-9]|[１-９]*$/;
if (!headPattern.test(inputValue)) {
    sysMsgElement.innerHTML = "先頭文字は1以上で入力してください";
    return;
}

⑦APIを使用して郵便番号に対応する住所情報を取得する。
　fetchを利用しAPIに対してGETリクエストを送信します。

var apiUrl = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + inputValue;
// GETリクエストを送信
fetch(apiUrl)
    .then(response => {
        // レスポンスが正常に受信された場合
        if (response.ok) {
            return response.json(); // JSONデータを取得
        } else {
            throw new Error('APIリクエストに失敗しました。');
        }
    })
    .then(data => {
        // レスポンスデータを処理
        console.log(data);
        if (data.results === null){
            sysMsgElement.innerHTML = "該当する郵便番号が見つかりません。";
        } else {
            var outputValue  = "郵便番号: " + data.results[0].zipcode;
                outputValue += "<br>都道府県コード: " + data.results[0].prefcode;
                outputValue += "<br>住所: " + data.results[0].address1 + " " + data.results[0].address2 + " " + data.results[0].address3;
                outputValue += "<br>住所(カナ): " + data.results[0].kana1 + " " + data.results[0].kana2 + " " + data.results[0].kana3;
            sysMsgElement.innerHTML = outputValue;
            sysMsgElement.style.color = "blue";
        }
    })
    .catch(error => {
        // エラーハンドリング
        console.error(error);
    });

ソースコード

<html>
<head>
    <title>ボタンクリックイベント</title>
</head>
<body>
<h1>郵便番号検索</h1>
<p>郵便番号を入力してください</p>
<input type="text" id="postcode">
<input type="button" value="確認" onclick="checkPostCode()">
<p id="sysMsg"></p>

<!-- JavaScriptのコード -->
<script>
    // 入力文字が郵便番号か確認する関数
    function checkPostCode() {
        // メッセージ初期化
        var sysMsgElement = document.getElementById("sysMsg");
        sysMsgElement.innerHTML = "";
        sysMsgElement.style.color = "red";
        // 入力値取得
        var inputValue = document.getElementById("postcode").value;
        // 未入力判定
        if (inputValue == "") {
            sysMsgElement.innerHTML = "未入力です";
            return;
        }
        // 正規表現パターン: 全角半角数値判定
        var numericPattern = /^[0-9０-９]+$/;
        if (!numericPattern.test(inputValue)) {
            sysMsgElement.innerHTML = "数値のみ入力してください";
            return;
        }
        // 正規表現パターン: 文字数(7文字)判定
        var countPattern = /^.{7}$/;
        if (!countPattern.test(inputValue)) {
            sysMsgElement.innerHTML = "7文字で入力してください";
            return;
        }
        // 正規表現パターン: 先頭文字(1以上)判定
        var headPattern = /^[1-9]|[１-９]*$/;
        if (!headPattern.test(inputValue)) {
            sysMsgElement.innerHTML = "先頭文字は1以上で入力してください";
            return;
        }
        var apiUrl = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" + inputValue;
        // GETリクエストを送信
        fetch(apiUrl)
            .then(response => {
                // レスポンスが正常に受信された場合
                if (response.ok) {
                    return response.json(); // JSONデータを取得
                } else {
                    throw new Error('APIリクエストに失敗しました。');
                }
            })
            .then(data => {
                // レスポンスデータを処理
                console.log(data);
                if (data.results === null){
                    sysMsgElement.innerHTML = "該当する郵便番号が見つかりません。";
                } else {
                    var outputValue  = "郵便番号: " + data.results[0].zipcode;
                        outputValue += "<br>都道府県コード: " + data.results[0].prefcode;
                        outputValue += "<br>住所: " + data.results[0].address1 + " " + data.results[0].address2 + " " + data.results[0].address3;
                        outputValue += "<br>住所(カナ): " + data.results[0].kana1 + " " + data.results[0].kana2 + " " + data.results[0].kana3;
                    sysMsgElement.innerHTML = outputValue;
                    sysMsgElement.style.color = "blue";
                }
            })
            .catch(error => {
                // エラーハンドリング
                console.error(error);
            });
    }
</script>
</body>
</html>

サンプル

See the Pen SearchPostCode by alunote (@alunote) on CodePen.

まとめ

zipcloudの郵便番号検索APIのパラメータは、全角・半角関係なく検索することが可能でした。
外部APIを利用する際には、事前に条件判定などで入力チェックを実施し必要最低限のリクエストとなるようにすることをお勧めします。
また、今回はエラーメッセージを充実させるためにあえて正規表現を分割しましたが、まとめて判定してしまうのも良いと思います。

説明は以上となります。
この記事が誰かの助けになれば幸いです。