...

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

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

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

AjaxとWeb APIってよく聞くけどなんなん?

というわけで今回は

「Ajaxがどんなものか知りたい」

「Web APIの使い方を知りたい」

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

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

ブログ主

早速いってみよう!

AjaxとWeb APIってなに?

Ajax(非同期通信)

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

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

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

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

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

ふむふむ…なるほどです

ソロモン

ブログ主

詳しくはSamurai Blogさんの記事が参考になります!

 

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

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

Web API

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

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

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

ブログ主

いくぜ

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

ユーザー登録

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

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

 

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

ブログ主

「~news」みたいなチェック欄は付けなくて大丈夫です

 

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

 

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

これでアカウントが作れたよ

ソロモン

API Key

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

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

 

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

 

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

ブログ主

これは後々使います

APIを選ぶ

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

 

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

 

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

このAPIは5日間の3時間間隔での天気の情報を取得できるものだよ

ソロモン

 

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

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

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

 

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

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

ajaxの使い方

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

ブログ主

jQueryを読み込むのを忘れずに。

 

$.ajax」の引数でハッシュでURLやデータの形式を指定することでデータを取得することができます。
もしデータの取得が成功した場合、次の「.done()」内に書いたことが実行されます
その際に取得したデータがパラメータとして渡されます。(今回でいう「data」)
失敗した時はfail()内が実行されるんだね

ソロモン

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

では先程の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”にもしておきます

 

…さぁコンソールを開いてみると
無事データが表示されました!
やった!

ソロモン

 

今回のデータの場合、「list」という名の配列に3時間おきの天気などのデータが入ってます

細かいデータの出力

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を使えば色んな面白いサイトが作れそうですよね。

ブログ主

下の記事ではいろんなAPIが紹介されているので参考になります
参考 個人でも使える!オススメAPI一覧Qiita

 

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA