JavaScript で単一ページの天気アプリケーションを構築する

はじめに
Flatiron School のソフトウェア エンジニアリング カリキュラムのフェーズ 1 を最終的に終了するために、HTML、CSS、JavaScript のみを使用し、Web ページのデータを提供するパブリック API を組み込む単一ページの Web アプリケーションを作成することが私たちに割り当てられました。

私のプロジェクトでは、「今日の天気予報」というタイトルの独自の天気アプリを作成することにしました。プロジェクト自体は確かに少し基本的なものでしたが、取り組むのは楽しい挑戦でした。目標は、リアルタイムの天気情報と世界中の都市の詳細な天気予報を提供する、ユーザーフレンドリーで応答性の高いアプリケーションを構築することでした。

プロジェクトの要件
プロジェクトにはいくつかの要件があり、それぞれがフェーズ 1 を通じて教えられた基本的な概念と教訓を強化します。

アプリケーションは完全に 1 つのページで実行する必要があります。リダイレクトやリロードは許可されず、データはパブリック API または db.json ファイルから取得する必要があります。
API または db.json ファイルは、それぞれ少なくとも 3 つの属性を含む、少なくとも 5 つの異なるオブジェクトを返す必要があります。
すべてのクライアントと API の対話は、通信形式として JSON を使用して非同期的に処理される必要があります。
プロジェクトでは、少なくとも 3 つの一意のイベント リスナーを使用する必要があります。各イベント リスナーは、addEventListener() メソッドを使用して追加された、異なる種類のイベントをリッスンします。各イベント リスナーには独自の一意のコールバックが必要です。
アプリケーションは配列反復のインスタンスを少なくとも 1 つ実装する必要があります。

個人的には、API での実装が最も難しいと感じました。これは、私自身の優柔不断のせいでもありますが、その概念が私にとって最も馴染みのないものに感じられたためでもあります。しかし、少し調べた結果、API の実装は実際にはこのプロジェクトの最も簡単な側面の 1 つであることがわかりました。

「今日の天気予報」の特徴:

リアルタイムの天気予報
ユーザーが都市名を入力すると、アプリケーションはその場所に固有のリアルタイムの気象データを返します。フロントページには、現在の気温 (摂氏)、簡単な天気の説明、および予報を視覚的に表すアイコンが表示されます。

3 時間ごとの天気予報:
このアプリケーションは、3 時間間隔で 24 時間の天気予報も提供します。このセクションでは、現在の時刻と予測温度の両方が摂氏で表示されます。

動的更新:
すべてのデータは動的に取得され、ページを再読み込みすることなく表示されるため、シームレスなユーザー エクスペリエンスが保証されます。

要件をどのように満たしたか

1. 単一ページのアプリケーション
   この天気予報アプリケーションはすべて 1 つのページで動作します。ユーザーが都市を検索すると、JavaScript は必要なデータを取得し、古いコンテンツを消去して、新しい情報でページを動的に更新します。これらはすべてリダイレクトやリロードを必要としません。

2. 属性を持つ 5 つのオブジェクト
   次のオブジェクトが実装されました:

1.) 都市オブジェクト:
属性: 名前、緯度、経度が含まれます。

2.) 気象オブジェクト:
属性: 温度、説明、アイコンが含まれます。

3.) 予測オブジェクト:
属性: 時間、温度、アイコンが含まれます。

4.) DateTime オブジェクト:
属性: 日付、時刻、曜日が含まれます。

5.) DOM 要素オブジェクト:
属性: ID、タイプ、コンテンツが含まれます。

各オブジェクトは、データの構造化とモジュール性の確保において役割を果たしました。

1. 非同期 API 処理
   アプリはフェッチ API を使用して、OpenWeather API からリアルタイムの天気データと予測データを取得します。すべてのデータ対話では JSON が使用され、プロジェクト要件を満たします。

2. 3 つのユニークなイベント リスナー
   アプリには 3 つの異なるイベント リスナーが組み込まれています:

クリックイベント: ユーザーが「検索」ボタンをクリックすると、気象データが取得されます。
キー押下イベント: 入力フィールドで「Enter」キーが押されると、同じ天気取得機能がトリガーされます。
マウスオーバー イベント: ユーザーが天気アイコンの上にマウスを移動すると、追加情報 (「OpenWeatherMap によって提供されるデータ」など) が動的に表示されます。

1. 配列の反復 予測セクションでは、forEach メソッドを使用して、3 時間ごとの予測の HTML 要素を動的に作成します。

課題と解決策
このプロジェクト中に遭遇したいくつかの課題は、OpenWeather API からデータを取得する際に非同期操作を処理する方法を理解すること、また API 自体と db.json ファイルとの違いを理解することでした。
アプリのスタイル設定も私にとって大きな課題でした。CSS は私にとって、より困難で技術的な概念を扱うことを好んで重視しない傾向があった弱点だったからです。
しかし、練習を重ねると、これらの概念はそこまで巨大なものではなくなり、自分のコードが完璧には程遠いことはわかっていますが、これらの課題に取り組んだ後は、開発者としての自分のスキルにかなり自信が持てるようになりました。

結論
このプロジェクトは、JavaScript についての私の理解を強化しただけでなく、忍耐力、問題解決、クリーンなモジュール式コードの重要性についての貴重な教訓も教えてくれました。

私がアプリケーションの構築を楽しんだのと同じように、皆さんにもアプリケーションの探索を楽しんでいただければ幸いです。改善のためのフィードバックや提案をお気軽に共有してください。ご意見をお待ちしております!

このプロジェクトのソース コードを確認したい場合は、次のリポジトリからアクセスできます: https://github.com/CourtneyKerr19/Todays_Weather_Forecast

読んでいただきありがとうございます!

以上がJavaScript で単一ページの天気アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。