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

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

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

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

個(gè)人的には、API での実裝が最も難しいと感じました。これは、私自身の優(yōu)柔不斷のせいでもありますが、その概念が私にとって最も馴染みのないものに感じられたためでもあります。しかし、少し調(diào)べた結(jié)果、API の実裝は実際にはこのプロジェクトの最も簡(jiǎn)単な側(cè)面の 1 つであることがわかりました。

「今日の天気予報(bào)」の特徴:

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

3 時(shí)間ごとの天気予報(bào):
このアプリケーションは、3 時(shí)間間隔で 24 時(shí)間の天気予報(bào)も提供します。このセクションでは、現(xiàn)在の時(shí)刻と予測(cè)溫度の両方が摂氏で表示されます。

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

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

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

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

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

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

3.) 予測(cè)オブジェクト:
屬性: 時(shí)間、溫度、アイコンが含まれます。

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

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

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

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

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

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

1. 配列の反復(fù) 予測(cè)セクションでは、forEach メソッドを使用して、3 時(shí)間ごとの予測(cè)の HTML 要素を動(dòng)的に作成します。

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

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

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

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

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

以上がJavaScript で単一ページの天気アプリケーションを構(gòu)築するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。