More than 3 years have passed since last update.

【Javascript】郵便番号から住所を自動入力する方法

Posted at 2021-06-24

#成果物

郵便番号を入力することで住所をある程度自動で入力できるものを作ったので
そのアウトプットです。(100-0000と入力しても自動入力可能です。)

#環境
・Windows10
・Visual Studio Code
・jQuery
・zip cloud

###zip cloudとは？
公式サイトの概要よると、
日本郵便のWebサイトで公開されている郵便番号データを再配信するサービスです。
Web APIをたたくと以下のようなJSONで返してくれます。

{
	"message": null,
	"results": [
		{
			"address1": "東京都",
			"address2": "千代田区",
			"address3": "",
			"kana1": "ﾄｳｷｮｳﾄ",
			"kana2": "ﾁﾖﾀﾞｸ",
			"kana3": "",
			"prefcode": "13",
			"zipcode": "1000000"
		}
	],
	"status": 200
}

#コード
zip cloudから得られるJSONを利用して成果物のコーディングをすると…

index.html

    <body>
        <form>
            <div>
                <label for="zip">郵便番号：</label><br>
                <input id="zip" type="text" size="10">
            </div>
            <div>
                <label for="address">住所：</label><br>
                <input id="address" type="text" size="35">
            </div>
        </form>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {

                //郵便番号の入力時に実行
                $('#zip').change(function () {
                    
                    //WEB API取得
                    $.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
                        {
                            zipcode:$('#zip').val()
                        }
                    )
                    //結果を取得してからの処理
                    .done(function (data) {
                        //中身が空でなければその値を住所欄に反映
                        if (data.results) {
                            var result = data.results[0];
                            $('#address').val(result.address1 + result.address2 + result.address3);
                        } else {
                            $('#address').val('該当する住所が存在しません。')
                        }
                    })
                });
            });
            
        </script>
    </body>

Javascriptってすごいなー（小物感）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up