天気予報アプリ | 週間天気更新

はじめに

このプロジェクトでは、特定の場所の週間の天気情報を表示する天気予報アプリケーションを作成する方法を学びます。このプロジェクトでは、API から天気データを取得し、レスポンスを解析し、HTML 要素を動的に更新してユーザーに天気予報を提示することが含まれます。

👀 プレビュー

weather forecast app preview

🎯 タスク

このプロジェクトでは、以下のことを学びます。

jQuery の AJAX 機能を使用して API から天気予報データを取得する方法
取得したデータを Web ページの対応する HTML 要素にバインドする方法
ユーザーにやさしい形式で週間の天気予報情報を表示する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

ユーザーに週間の天気情報を提供する簡単な天気予報アプリケーションを作成する
API からデータを取得するための AJAX 要求を行う方法を理解する
jQuery を使用して DOM を操作し、HTML 要素を更新する能力を示す

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── images        ## 画像リソース
├── js            ## js ファイルと json ファイル用のディレクトリ
├── index.html    ## 天気予報ページ
├── style.css     ## css ファイル

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

Initial project structure view

天気予報データを取得する

このステップでは、提供された API を使用して W 町の週間天気予報データを取得する方法を学びます。

コードエディタで js/index.js ファイルを開きます。
天気予報データを取得する責任がある getweather() 関数を見つけます。
getweather() 関数の中で、jQuery の $.get() メソッドを使用して、js/weather.json API エンドポイントに GET 要求を行います。

// TODO
$.get("js/weather.json", function (data) {
  // 天気予報データを HTML 要素にバインドする
  //...
});

API からのレスポンスデータは、コールバック関数に data パラメータとして渡されます。このデータには週間天気予報情報が含まれています。

HTML に天気予報データをバインドする

このステップでは、取得した天気予報データをページ上の対応する HTML 要素にバインドする方法を学びます。

$.get() メソッドのコールバック関数の中で、データを HTML にバインドするコードを見つけます。
jQuery を使用して、天気アイコン、天気の説明、温度、風の情報などの必要な HTML 要素を選択します。

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}

上記のコードは、週間天気予報情報を含む data.result 配列を反復処理します。各項目に対して、対応する HTML 要素を選択し、API レスポンスからのデータでそれらのコンテンツを更新します。
js/index.js ファイルに変更を保存します。
ウェブページを更新すると、目標画像に示されているように週間天気予報情報が表示されるはずです。

Weekly weather forecast display

おめでとうございます！API からデータを取得し、ページ上の HTML 要素にバインドすることで、天気予報プロジェクトを成功裏に完了しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。

週間天気予報アプリケーションの開発