こんにちは。Web系エンジニアのカズです。
今回は、javascriptのajax通信を使って、実際に「何かのAPIを取得してみよう」という記事内容です。
APIって何？という方は、ざっくり分かりやすく説明します。
本記事の内容
・やりたいこと
・そもそもAPIって何？
・住所APIを使用した機能の例
・ajaxのソースコードの書き方
・javascript練習問題(javascript学習中の方向け)
・参考ソースコード
・解説
やりたいこと
今回は、住所のAPIを取得します。
郵便番号のパラメーターを渡せば、その郵便番号の対象の住所APIを取得できるイメージです。
今回はこちらのAPIを使用します。
zipcloud：http://zipcloud.ibsnet.co.jp/doc/api
こちらは、日本の住所一覧がデータとして保管されています。
そもそもAPIって何？
ざっくり具体的に言ってしまえば、
外部で保管されているアクセス可能なデータのことです。
そのデータをURLから取得して使用することが可能です。
今回はzipcloudという、日本の住所APIを使用します。
良く分からないという方は、とりあえず実際に使用してみれば分かりますので
このまま読み進めてください。
住所APIを使用した機能の例
何はともあれ、実際に画面を見て動作させたほうが理解が早いと思います。
郵便番号を入力すれば、自動で住所を表示してくれる機能を作成しました。
郵便番号を入力して「住所を表示」ボタンを押してください。
正常に動作しましたでしょうか。
こちらのように、郵便番号を入力すると対象の住所が表示されます。
郵便番号を条件に「住所API」を取得して、その住所を表示させています。
zipcloudが持つAPIを使用させて頂いているというわけです。
ajaxのソースコードの書き方
ajax通信のざっくり書き方は、こんな感じです。
let xhr = new XMLHttpRequest();
let url = "対象のURL";
xhr.open("GET", url, true);
xhr.send();
xhr.responseType = "json";
xhr.onload = (e) => {
if () {
//成功したときの処理
} else {
//失敗したときの処理
}
練習問題(javascript学習中の方向け)
javascript学習中の方に向けて、問題形式にしてみました。
問題：「住所APIを使用した機能の例」で動作させたページを作成してみてください。
仕様①：郵便番号を入力欄を作成してください。
仕様②：入力された郵便番号を元にzipcloudから住所を取得して画面に表示してください。
仕様③ : 何らかのエラーの場合はエラー文を画面に表示してください。
仕様④：javascriptの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">
<title>javascript 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="addressBtn" >住所を表示</button></div>
<div>住所：<span id="address" style="color:red">○○○○</span></div>
</body>
<script>
let addressBtn = document.getElementById("addressBtn");
addressBtn.addEventListener('click', function(){
let zipcode = document.getElementById("zipcode").value;
let address = document.getElementById("address");
let xhr = new XMLHttpRequest();
let url = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="+zipcode;
xhr.open("GET", url, true);
xhr.send();
xhr.responseType = "json";
xhr.onload = (e) => {
if (xhr.response.status === 200) {
address.innerHTML = xhr.response.results[0].address1 + xhr.response.results[0].address2 + xhr.response.results[0].address3;
} else {
address.innerHTML = xhr.response.message;
}
}
});
</script>
</html>
解説
let url = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="+zipcode;urlに今回のzipcloudのURLを設定します。
zipcloudの仕様でzipcodeのパラメーターは必須になります。
付けないとエラーになります。
今回はユーザーが入力した郵便番号をパラメータにセットしています。
if (xhr.response.status === 200) {
address.innerHTML = xhr.response.results[0].address1 + xhr.response.results[0].address2 + xhr.response.results[0].address3;
} else {
address.innerHTML = xhr.response.message;
}
続いて、こちらの箇所の解説です。
住所が正しく取得できたかはステータスを見れば判定できます。
しかし、このステータスは2種類あります。
xhr直下にあるstatusとxhrの中のresponseの中のstatusが、その2種類です。
どちらも、200(レスポンスが正常)や400(レスポンスエラー)などのコードが返ります。
今回はxhr.response.statusを使用しました。
理由はxhr直下のstatusは通信ができれば、200(レスポンス正常)が返ってきてしまうからです。
例えば、不正な郵便番号の「aaa」などをパラメータで渡して住所データが正常に取得できなくても、通信には成功するので200(レスポンス正常)となってしまいます。
xhr.response.statusの方は、この場合400(レスポンスエラー)が返るため
想定通り動作させることができます。
レスポンスが正常ならxhrの中のresponseの中のresults[0]の中のaddressを画面に表示します。
レスポンスが正常ではないのであれば、エラーメッセージを画面に表示します。
便利なことにresponseの中のmessageに既にエラーメッセージ内容が格納されています。
今回はそのメッセージのまま表示しております。
独学が難しい場合
現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。
コメント