【JavaScript】AjaxとWeb APIを使ってデータを取得する方法！

どうもおはようポテトです。

JavaScriptを勉強している多くの方が抱く疑問がこちら。

というわけで今回は

という方に向けて「Ajax(非同期通信)」と「Web API」を使って天気などのデータを取得してみようと思います

自分の備忘録代わりでもありますが、ぜひ参考にしていただけると幸いです⸝⸝- ̫ -⸝⸝

AjaxとWeb APIってなに?

Ajax(非同期通信)

そう、そうなんですよそもそも「Ajaxとはなんぞ」って話ですよね

Ajaxとは本来ブラウザがサーバーに対してするリクエストを、JavaScriptが行い更にレスポンスもJavaScriptが受け取る仕組みのことです。

通常、Webページでボタンを押したりリンクをクリックしたりするとそのリンク先のページに遷移しますよね。そう、ブラウザさんが表示してるページが書き換わるんですよ。

でもAjaxを使えばJavaScriptがデータを受け取るため、ページが書き換わらないんです

なので例えば最新の情報をサーバーから受け取ってページの内容を変えたりできるのでリアルタイムな情報が必要な天気予報のサイトなんかで使われてるわけです

こんなに便利なら、よくJavaScriptとセットで「Ajax」ってワードが出てくるのも納得…

そしてこのAjaxでリアルタイムなデータを取得するために「Web API」が鍵を握ってくるわけです。

Web API

Web APIというのは、とあるデータを取得したりして、そのサイトの機能をプログラムから利用する”仕組み”のこと。

何の機能を使うかは、先ほどから名前の挙がっている”Ajax”を利用する際に指定するURLで決めることができます

ということで今回は世界中の天気情報を取得することができる「OpenWeatherMap」というweb APIを使ってみましょう

Web APIの利用登録をしよう！

ユーザー登録

まずはOpenweatherMapのWebサイトを開きましょう

そしたら画面上部の「Sign Up」をクリックします

この画面になるので、必要な情報を入力していきます

入力し終わったらチェックをつけ、ここの「Create Account」をクリック。

そしたらこのダイアログが表示されます。
上の「組織名」は空白で、下の「目的」はそれっぽいのを選べはOKです。

API Key

次に「API Key」を取得しておきます

その名の通り、データを取得するために必要なパスワードの様なものです

白のメニューのところにある「API Keys」というところをクリックします

そしたら自分のAPI Keyが表示されるので忘れずにメモしておきましょう

APIを選ぶ

さあお次は、使いたいAPIを選んでいきます

まず上のメニューの「API」をいうところをクリックし

この「5 day/3hour forecast」という見出しのところの「API doc」というボタンをクリックします

今回は緯度・経度を使って天気のデータを得るので「By geographic coordinates」という見出しのところを見つけましょう。

さあ見つかりました。この線を引いたところが指定するURLになります。このURLを指定すればデータが取得できるわけですね！
(「?」以降は無視して大丈夫です)

下の「Parameters」というところも見てみると「lat・lon」とありますね
これは要するに「データを取得するには緯度(lat)と経度(lon)を指定してね」ということです

さあ準備はできました。では実際にAjaxを使ってデータを取得してみましょう(▰╹◡╹▰)

Ajaxでデータを取得してみよう

ajaxの使い方

$.ajax({url:"URLを指定するよ",dataType:"データの形式"})
.done(function(data){
//データが取得できたときに実行されるところ
})
.fail(function(data){
//できなかったときに実行されるところ
});

取得したデータを出力してみよう

では先程のWeb APIのURLとAPI Keyを指定してデータを取得して、コンソールに出力してみましょう！

"use strict";

//APIで天気情報の取得
$.ajax({
url:"https://api.openweathermap.org/data/2.5/forecast",
data:{
appid:"ここは自分のAPI Key",
lat:35.68944,//東京の緯度
lon:139.69167,//経度
lang:"ja"//日本語にしたい
}
}).done(function(data){
console.log(data);
})
.fail(function(){
console.log("なんかエラー起こしてるよ!");
});

dataプロパティには先程メモしておいたAPI Keyと緯度・経度を指定します。

あと日本語にしたいので「lang」を”ja”にもしておきます

細かいデータの出力

console.log(data.list[1]);

おまけ：天気予報の一覧を作ってみた

コンソールに出力するだけだと寂しいので、実際にページに表として表示させてみました

<h3 id="place"></h3>
<table id="forecast"><tr>
<th>日時</th>
<th>天気</th>
<th>気温</th>
</tr></table>

"use strict";


//APIで天気情報の取得
$.ajax({
url:"https://api.openweathermap.org/data/2.5/forecast",
data:{
appid:"ここは自分のAPI Key",
lat:35.68944,//緯度
lon:139.69167,//経度
lang:"ja"//日本語にしたい
}
}).done(function(data){
$("#place").text(`${data.city.name},${data.city.country}の天気`);
data.list.forEach(function(data2,index){//1行ずつ表に加える
const Time=new Date((data2.dt)*1000);//ミリ秒にしたいので×1000
const month=Time.getMonth()+1;
const date=Time.getDate();
const hour=Time.getHours();
const tmp=Math.round(data2.main.temp);//気温
const des=data2.weather[0].description;//天気


const yohou=`<tr>
<td class="info">${month}月${date}日 ${hour}時</td>
<td><span class="des">${des}</span></td>
<td><span class="temp">${tmp}<span>度</td>
</tr>`;
$("#forecast").append(yohou);});
})
.fail(function(){
console.log("なんかエラー起こしてるよ!");
});

まとめ

以上となります。

書き方もそこまで難しくはなく、ブログ主でもすんなり理解することができました。

AjaxとWeb APIを使えば色んな面白いサイトが作れそうですよね。

最後まで読んでいただきありがとうございました！では⸝⸝- ̫ -⸝⸝