yukiyukiponsuの日記

雑記ブログ

質問はCONTACTやコメントでお願い致します。

【初心者向け】javascriptで外部APIを使って天気予報をしてみよう

この記事をシェアする

javascriptで外部APIを使って天気予報をしてみよう

 

こんにちは、ゆきぽんずです

 

今日は、javascriptで外部API(openweathermap)を使って天気予報をしていきます

 

javascriptで天気予報をしてみよう

まず実行結果からどうぞ

実行結果

実行結果

 

こんな感じで結果が出力できます

 

下にソースコードを書いておきます

 

基礎的な内容はおさえているので、これを使って自分でアレンジしてみてください

 

それではソースコードをどうぞ(今回は分かりやすさを優先してCSSは書いていません)

ソースコード

htmlファイル名 : index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>天気予報API</title>
  <!-- 必要なメタタグ -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  </head>

  <body>
    <!-- javascriptで得た結果を表示する場所 -->
    <ul id='messages'>
    </ul>

    <!-- 天気予報APIを参照するためのjavascript -->
    <script src="weatherForcast.js"></script>
  </body>

</html>

 

まぁhtmlで大事なのは、結果を表示するところを忘れないことです

 

ではメインのjavascriptファイルを見ていきます

 

javascriptファイル名 : weatherForcast.js

//htmlのul要素(id = 'messages')を呼び出し
var messageList = $('#messages');

//openweathermap(天気予報API)に接続
var request = new XMLHttpRequest();
var cityName = "tokyo";
var owmApiKey = "自分が取得したAPI";
var owmURL = "http://api.openweathermap.org/data/2.5/weather?q="+ cityName +"&APPID="+ owmApiKey +"";

request.open('GET', owmURL, true);
//結果をjson型で受け取る
request.responseType = 'json';

request.onload = function () {
 var data = this.response;
 console.log(data);
 var messageElement = $("<il><p class='weather'>" + data["weather"][0]["main"] + "</p></il>");
 //HTMLに取得したデータを追加する
 messageList.append(messageElement);
};

request.send();

 

以上です

 

コメント文でコードの内容を補足しているので、詳しい説明は省きます

 

コメント文を書いているところを理解してくだされば、とりあえず問題はないと思います(このソースコードをアレンジするという部分では)

 

外部APIを参照するためには、APIキーが必要になります

 

APIキーの取得方法については、こちらの記事が分かりやすく紹介してくださっているので、こちらを見てください

https://usortblog.com/openweathermap-appid-required/

感想

javascriptで外部のAPIとやりとりできるのは嬉しいですね(実際はjavascript自身が通信しているわけではありませんが...(;^ω^))

 

色々応用が出来そうですね

 

今日の内容は以上になります

 

少しでも参考になっていれば幸いです

 

あなたのそばにゆきぽんず