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

2020年9月14日プログラムJavaScript,PHP,プログラムサンプル

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

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

プログラミング歴

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

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

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

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

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

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

Ajaxについて

Ajaxについて詳しく解説したので、ぜひご覧ください。

サンプルコード

では、さっそく郵便番号から住所を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)を外部サーバから取得できる」って感じです。

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

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

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

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

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

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

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

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で取得するプログラミングを解説

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年9月14日プログラムJavaScript,PHP,プログラムサンプル

Posted by ユート