JavaScriptでAjaxを使って郵便番号から住所を取得するプログラム解説

2020年9月14日システムJavaScript,PHP,プログラムコード,プログラム入門

【初心者】JavaScriptで郵便番号APIをAjaxで取得するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptで郵便番号APIをAjaxで取得するプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

郵便番号から住所をAjaxで取得するプログラミングの解説です。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細:プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

Ajaxで郵便番号APIから住所を取得するプログラム

郵便番号から郵便番号APIへAjaxでリクエストして住所を画面に出力するプログラミングを解説します。

少しサンプルコードが長くなっています💦

JavaScriptでAjaxを実装し、郵便番号APIをPHPで実装しました。また郵便番号から住所を取得するために今回は「zipcloud – 郵便番号検索API」を利用させていただきました。

ぜひチャレンジしてみてください。

サンプルコード

では、さっそく郵便番号から住所をAjaxで取得するサンプルコードから紹介します。

HTML+JavaScriptとPHPで分けで紹介します。

HTMLとJavaScript:Ajaxで郵便番号をAPIへリクエストして住所を取得

まずHTMLとJavaScriptのサンプルコードです。

今回はHTMLタグの追加などを簡単に行えるように「JQuery」を使っています。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Ajax(ZIP code)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <h1>JavaScript Ajax(ZIP code)</h1>
        <form>
            <dl>
                <dt>ZIP</dt>
                <dd>
                    <input type="text" name="zip1" id="txt-zip1" placeholder="zip1 is 3 digits" value="">
                     -
                    <input type="text" name="zip2" id="txt-zip2" placeholder="zip2 is 4 digits" value="">
                </dd>
                <dd>
                    <button type="button" id="btn-search">Search</button>
                </dd>
                <dd>
                    <span id="txt-message" style="color: red;"></span>
                </dd>
            </dl>
        </form>
        <div id="area-address" style="display: none;">
            <dl>
                <dt>Address</dt>
                <dd id="txt-prefecture"></dd>
                <dd id="txt-city"></dd>
                <dd id="txt-address"></dd>
            </dl>
        </div>
    </body>
    <script>
        $('#btn-search').click(function () {
            $('#txt-message').html('');
            var zip1 = $('#txt-zip1').val(),
                zip2 = $('#txt-zip2').val();
            var zip = zip1 + zip2;

            if (!zip1 || !zip2) {
                $('#txt-message').html('Please enter your zip code.');
                return false;
            }

            if (!isFinite(zip1) || !isFinite(zip2)) {
                $('#txt-message').html('Please enter the zip code in numbers.');
                return false;
            }

            if (zip1.length != 3 || zip2.length != 4) {
                $('#txt-message').html('Please enter the zip code in 3 and 4 digits.');
                return false;
            }


            if (zip.length != 7) {
                $('#txt-message').html('Please enter the zip code in 7 digits.');
                return false;
            }

            $.ajax({
                type: 'get',
                dataType: 'json',
                url: '/zip/zipcloud.php',
                data: {
                    'zip': zip
                },
                success: function(response, textStatus, xhr) {
                    if (!response['status']) {
                        $('#txt-message').html(response['message']);
                        return false;
                    }
                    $('#area-address').show();
                    $('#txt-prefecture').html(response['data']['address1']);
                    $('#txt-city').html(response['data']['address2']);
                    $('#txt-address').html(response['data']['address3']);
                },
                error: function(xhr, textStatus, error) {
                    console.log('error', xhr, textStatus, error);
                }
            });
        });
    </script>
</html>

PHP:郵便番号から住所を取得するAPI

次にPHPのサンプルコードです。

郵便番号から住所を取得するために今回は「zipcloud – 郵便番号検索API」を利用させていただきました。

<?php
$result = [
    'status' => 0,
    'message' => '',
    'data' => []
];

do {
    $zip = $_GET['zip'];

    if (!$zip) {
        $result['message'] = 'Please enter your zip code.';
        break;
    }

    if (!is_numeric($zip)) {
        $result['message']= 'Please enter the zip code in numbers.';
        break;
    }

    if (strlen($zip) != 7) {
        $result['message'] = 'Please enter the zip code in 7 digits.';
        break;
    }

    // zipcloud api -> request
    $response = file_get_contents('https://zipcloud.ibsnet.co.jp/api/search?zipcode='.$zip);
    if (!$response) {
        $result['message'] = 'zipcloud no response.';
        break;
    }

    $response = json_decode($response, true);
    if (!isset($response['results']) || !$response['results']) {
        $result['message'] = 'zipcloud no results.';
        break;
    }
    elseif ($response['status'] != 200) {
        $result['message'] = 'response is not status 200.'
                                . ' status->'.$response['status']
                                . ' message->'.$response['message'];
        break;
    }

    $result['status'] = 1;
    $result['data'] = $response['results'][0];

} while(0);

header("Content-Type: application/json; charset=utf-8");
echo json_encode($result);
exit;

HTML部分の解説

郵便番号から住所をAjaxで取得するサンプルコードのHTML部分から解説をします。

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="UTF-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

JQueryをCDNで読み込む

JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CDNとは

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

郵便番号の入力フォームを作成

郵便番号を入力するテキストボックスと検索用ボタンを用意します。
(郵便番号はハイフンで分離させるように2つテキストボックスを用意します)

<form>
    <dl>
        <dt>ZIP</dt>
        <dd>
            <input type="text" name="zip1" id="txt-zip1" placeholder="zip1 is 3 digits" value="">
            -
            <input type="text" name="zip2" id="txt-zip2" placeholder="zip2 is 4 digits" value="">
        </dd>
        <dd>
            <button type="button" id="btn-search">Search</button>
        </dd>
        <dd>
            <span id="txt-message" style="color: red;"></span>
        </dd>
    </dl>
</form>

メッセージ出力テキストを用意

Ajaxの結果や入力エラーに関するメッセージを出力できるようにします。

<span id="txt-message" style="color: red;"></span>

郵便番号から取得した住所を表示するエリアを用意

郵便番号に該当する住所をAJaxで取得した結果を表示するように、出力エリアを用意します。

<div id="area-address" style="display: none;">
    <dl>
        <dt>Address</dt>
        <dd id="txt-prefecture"></dd>
        <dd id="txt-city"></dd>
        <dd id="txt-address"></dd>
    </dl>
</div>

JavaScript部分の解説

郵便番号から住所をAjaxで取得するサンプルコードのJavaScript部分を解説します。

Ajaxで郵便番号をAPIへリクエストして住所を取得します。

scriptタグを用意してJavaScriptのプログラムを始める

JavaScriptでプログラムコードを記述するためにscriptタグを記述します。

<script>
・・・
</script>

検索ボタンのクリックイベントを定義

郵便番号入力フォームのボタン(id="btn-search")に対してクリックイベントを定義します。

$('#btn-search').click(function () {
});

メッセージ出力テキストを初期化

入力エラーなどのメッセージ出力テキストを初期化します。
(検索ボタンが押されるたびに初期化しておかないと、前回のメッセージが残ったままとなってしまうので注意)

$('#txt-message').html('');

入力された郵便番号を取得

入力された郵便番号を取得します。
(id="txt-zip1″とid="txt-zip2″のテキストボックスの値)

var zip1 = $('#txt-zip1').val(),
    zip2 = $('#txt-zip2').val();

入力された郵便番号の入力値をチェック

入力された郵便番号の値が正しいかチェックする処理を実装します。

郵便番号テキストに値が入力されたかチェック

先頭の!は、値なしを意味します。

if (!zip1 || !zip2) {
    $('#txt-message').html('Please enter your zip code.');
    return false;
}

郵便番号に入力された値が数字であるかチェック

if (!isFinite(zip1) || !isFinite(zip2)) {
    $('#txt-message').html('Please enter the zip code in numbers.');
    return false;
}

入力された郵便番号の文字数をチェック

前が3桁で後ろが4桁であるかをチェックしています。

if (zip1.length != 3 || zip2.length != 4) {
    $('#txt-message').html('Please enter the zip code in 3 and 4 digits.');
    return false;
}
メモ

プログラミングにおいて数字の判定には注意が必要です。

Ajaxで郵便番号APIへリクエスト

最後にAJaxで郵便番号APIへリクエストを行います。

$.ajax({
    type: 'get',
    dataType: 'json',
    url: '/zip/zipcloud.php',
    data: {
        'zip': zip
    },
    success: function(response, textStatus, xhr) {
        if (!response['status']) {
            $('#txt-message').html(response['message']);
            return false;
        }
        $('#area-address').show();
        $('#txt-prefecture').html(response['data']['address1']);
        $('#txt-city').html(response['data']['address2']);
        $('#txt-address').html(response['data']['address3']);
    },
    error: function(xhr, textStatus, error) {
        console.log('error', xhr, textStatus, error);
    }
});

AjaxしたJavaScript側でレスポンス値を出力

Ajaxした結果のsuccessで住所をテキストへセットして画面出力します。

    success: function(response, textStatus, xhr) {
        if (!response['status']) {
            $('#txt-message').html(response['message']);
            return false;
        }
        $('#area-address').show();
        $('#txt-prefecture').html(response['data']['address1']);
        $('#txt-city').html(response['data']['address2']);
        $('#txt-address').html(response['data']['address3']);
    },

AJax解説記事:Ajaxの仕組みについてわかりやすく解説

PHP部分の解説

郵便番号から住所をAjaxで取得するサンプルコードのPHP部分を解説します。

Ajaxでリクエストされてくる郵便番号から住所を取得するAPIをPHPで実装しています。

Ajaxで通信された結果を返却するデータ(レスポンス値)を定義

JavaScriptからAJaxでリクエストされた際に返却するデータ(レスポンス値)を配列で定義します。
(最後に配列をJSONへエンコードします)

$result = [
    'status' => 0,
    'message' => '',
    'data' => []
];

リクエストされてきた郵便番号の値を取得します。

GETメソッドでリクエストされてきた値を取得します。

$zip = $_GET['zip'];

リクエストされてきた郵便番号の値をチェック

郵便番号の値が数字であるかチェックします。

if (!is_numeric($zip)) {
    $result['message']= 'Please enter the zip code in numbers.';
    break;
}

郵便番号の値が7桁であるかチェックします。

if (strlen($zip) != 7) {
    $result['message'] = 'Please enter the zip code in 7 digits.';
    break;
}
メモ

JavaScript側で入力値をチェックしたとしても必ずAPI側でもチェックしましょう!

理由は、GETであろうとPOSTであろうとリクエスト値は改変が容易に行えます。なので、セキュリティホールとなるため必ず入力値はチェックしましょう!

郵便番号から住所を検索

今回は郵便番号から住所を検索するために「zipcloud – 郵便番号検索API」を利用します。

$response = file_get_contents('https://zipcloud.ibsnet.co.jp/api/search?zipcode='.$zip);
if (!$response) {
    $result['message'] = 'zipcloud no response.';
    break;
}

zipcloudの郵便番号検索APIからのレスポンス値をJSONから配列へエンコードします。

$response = json_decode($response, true);

Ajaxへのレスポンス値をセットし、JSONデータを出力

Ajaxへ返却するレスポンス値を配列にセットします。

$result['status'] = 1;
$result['data'] = $response['results'][0];

そしてレスポンス値の配列をJSONへエンコードして出力します。

header("Content-Type: application/json; charset=utf-8");
echo json_encode($result);
exit;

まとめ:Ajaxで郵便番号APIから住所を取得するプログラム

今回はAjaxで郵便番号APIから住所を取得するサンプルコードを解説しました。

Ajax(クライアント)とAPI(サーバ)を実装することでAjaxの流れが把握できるようになります!

Ajax(クライアント)とAPI(サーバ)を実装することでAjaxの流れを理解することが出来たと思います。

サンプルコードが長くなりました💦

もしAjaxで分かりにくい点がありましたら、Ajaxの解説記事もご覧ください。
Ajax:Ajaxの仕組みについてわかりやすく解説

最後まで読んでもらいありがとうございます。

JavaScriptで郵便番号APIをAjaxで取得するプログラミングを解説
プログラミング基礎講座

UTの日常では、プログラミングを0から始める方法や基礎知識を解説しています。ぜひ他の記事もご覧ください。

プログラミング未経験から今すぐに始める方法について解説します。なにから始めたらいいのかわかない人は是非ご覧ください。

プログラミング未経験から独学で基礎勉強を始めた人向けに理解するコツやポイントをサンプルコードを使って解説します。

基礎学習ばかりだと勉強に飽きたり身につかなかったりします。プログラミング初心者からステップアップする基礎知識を使ったプログラムのサンプルコードをまとめて紹介します。

UT
UTの日常
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年9月14日システムJavaScript,PHP,プログラムコード,プログラム入門

Posted by UT