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

2020年9月14日システムJavaScript,プログラミング初心者

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

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

JavaScriptで郵便番号から住所を取得するプログラミングを解説します。簡単に内容を説明すると「郵便番号APIをAjaxで取得して画面に出力」です。

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

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

JavaScriptで郵便番号APIをAjaxで取得するプログラミングのサンプルコード

JavaScriptで郵便番号APIをAjaxで取得するプログラミングのサンプルコードです。

HTMLとJavaScript

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

<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

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

<?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;

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

JavaScriptで郵便番号APIをAjaxで取得するプログラミングの解説をします。

HTML

HTML部分の解説です。

文字コードを指定

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

<meta charset="UTF-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

JQueryを読み込む

JavaScriptライブラリのJQueryを読み込んでいます。

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

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

郵便番号を入力するテキストボックスと検索用ボタンを用意します。
(郵便番号はハイフンで分離させるように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

JavaScript部分の解説です。

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

郵便番号入力フォームのボタン(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;
}

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

例えば「文字列の数字」や「マイナスの数字」など一言で数字といっても種類がたくさんあります。また「0」の扱いにも注意が必要です。

入力された郵便番号の文字数をチェックします。
(前が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とは、Asynchronous JavaScript + XMLの略です。簡単にいうと「JavaScript非同期通信してサーバと通信すること」です。

AJaxについては「Ajaxとは?プログラミング初心者がJavaScriptで悩むAjaxについて解説」で詳しく解説したので、是非ご覧ください。

PHP

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」を利用します。なので、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したJavaScript側でレスポンス値を出力

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']);
    },
UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

プログラミング解説講座

2020年9月14日システムJavaScript,プログラミング初心者

Posted by UT