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

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

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

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

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

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();