どうもおはようポテトです。
JavaScriptを勉強している多くの方が抱く疑問がこちら。
AjaxとWeb APIってよく聞くけどなんなん?
「Ajaxがどんなものか知りたい」
「Web APIの使い方を知りたい」
という方に向けて「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("なんかエラー起こしてるよ!");
});
以上の様に書くと、この様に天気予報っぽいものを作ることもできます
CSSを何も書いてないので見た目はアレですが…書いてあげれば結構いい感じになりそうです(小並感)
まとめ
以上となります。
書き方もそこまで難しくはなく、ブログ主でもすんなり理解することができました。
AjaxとWeb APIを使えば色んな面白いサイトが作れそうですよね。
ブログ主
最後まで読んでいただきありがとうございました!では⸝⸝- ̫ -⸝⸝