こんにちは。Web系エンジニアのカズです。
今回は、jQueryのajax通信を使って、実際に「何かのAPIを取得してみよう」という記事内容です。
APIって何？という方は、ざっくり分かりやすく説明します。
本記事の内容
・やりたいこと
・そもそもAPIって何？
・住所APIを使用した機能の例
・ajaxのソースコードの書き方
・jQuery練習問題(jQuery学習中の方向け)
・参考ソースコード
・解説
やりたいこと
今回は、住所のAPIを取得します。
郵便番号のパラメーターを渡せば、その郵便番号の対象の住所APIを取得できるイメージです。
今回はこちらのAPIを使用します。
zipcloud：http://zipcloud.ibsnet.co.jp/doc/api
こちらは、日本の住所一覧がデータとして保管されています。
そもそもAPIって何？
ざっくり具体的に言ってしまえば、
外部で保管されているアクセス可能なデータのことです。
そのデータをURLから取得して使用することが可能です。
今回はzipcloudという、日本の住所APIを使用します。
良く分からないという方は、とりあえず実際に使用してみれば分かりますので
このまま読み進めてください。
住所APIを使用した機能の例
何はともあれ、実際に画面を見て動作させたほうが理解が早いと思います。
郵便番号を入力すれば、自動で住所を表示してくれる機能を作成しました。
正常に動作しましたでしょうか。
こちらのように、郵便番号を入力すると対象の住所が表示されます。
郵便番号を条件に「住所API」を取得して、その住所を表示させています。
zipcloudが持つAPIを使用させて頂いているというわけです。
ajaxのソースコードの書き方
ajax通信のざっくり書き方は、こんな感じです。
$.ajax({
url:"対象のURL",
type:"GET",// GETまたはPOST
dataType:"json",// 応答のデータの種類
timespan:1000,// 通信のタイムアウトの設定(ミリ秒)
}).done(function(data, status, jqXHR) {
//通信に成功したときの処理
}).fail(function(data, status, jqXHR) {
//通信に失敗したときの処理
})doneとfailの引数は3つ設定できます。
1つ目はdataとあるように、ajax通信で取得できたデータの値が配列で入っています。
今回でいうところの住所のデータです。
2つ目のstatusは、文字通りステータスを返します。
successなどのステータスを返しますが、こちらのステータスを使いどころには注意が必要です。
こちらについては、後ほど解説します。
3つ目は、正直あまり使わないので割愛します。
練習問題(jQuery学習中の方向け)
jQuery学習中の方に向けて、問題形式にしてみました。
問題：「住所APIを使用した機能の例」で動作させたページを作成してみてください。
仕様①：郵便番号を入力欄を作成してください。
仕様②：入力された郵便番号を元にzipcloudから住所を取得して画面に表示してください。
仕様③ : 何らかのエラーの場合はエラー文を画面に表示してください。
仕様④：jQueryのajax通信を使用して実装してください。
参考ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>api</title>
</head>
<body>
<div>郵便番号を入力して「住所を表示」ボタンを押してください。</div>
<br/>
<div>郵便番号</div>
<div><input type="text" value="" id="zipcode" placeholder="0791143" /></div>
<div>※入力例 : 0791143</div>
<br/>
<div><button id="address_btn" >住所を表示</button></div>
<div>住所：<span id="address" style="color:red">○○○○</span></div>
</body>
<script>
$(function() {
$("#address_btn").click(function() {
$.ajax({
url:"https://zipcloud.ibsnet.co.jp/api/search?zipcode="+$("#zipcode").val(),
type:"GET",
dataType:"json",
timespan:1000,
}).done(function(data) {
if (data.status === 200) {
$("#address").html(data.results[0].address1 + data.results[0].address2 + data.results[0].address3);
} else {
$("#address").html(data.message);
}
}).fail(function(data, status) {
$("#address").html('取得できませんでした。');
})
});
});
</script>
</html>
解説
$.ajax({
url:"https://zipcloud.ibsnet.co.jp/api/search?zipcode="+$("#zipcode").val(),
});urlに今回のzipcloudのURLを設定します。
zipcloudの仕様でzipcodeのパラメーターは必須になります。
付けないとエラーになります。
今回はユーザーが入力した郵便番号をパラメータにセットしたいので
$(“#id”).val()の形で取得した郵便番号を設定しています。
}).done(function(data) {
if (data.status === 200) {
$("#address").html(data.results[0].address1 + data.results[0].address2 + data.results[0].address3);
} else {
$("#address").html(data.message);
}
})続いて、こちらの箇所の解説です。
先ほど第2引数のstatusは使用に注意と記載しました。
理由は通信ができれば、statusがsuccessになってしまうからです。
例えば、不正な郵便番号の「aaa」などをパラメータで渡しても通信には成功するのでsuccessとなってしまいます。
なので、正確には第一引数のdataの中に格納されているstatusを使用した方が想定通りにいくと思います。
dataの中のstatusは200(レスポンスが正常)、400(レスポンスエラー)などのコードが返ります。
レスポンスが正常ならdataの中のresults[0]の中のaddressを画面に表示します。
レスポンスが正常ではないのであれば、エラーメッセージを画面に表示します。
便利なことにdataの中のmessageに既にエラーメッセージ内容が格納されています。
今回はそのメッセージのまま表示しております。
独学が難しい場合
現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。
コメント