初めての天気アプリ

API 統合によるシンプルな天気アプリの構築

コーディング スキルの学習と向上を続ける中で、API を使用してリアルタイム データを取得する基本的な天気アプリを構築することにしました。このプロジェクトは、API と対話する方法、非同期操作を処理する方法、ユーザー インターフェイスを動的に更新する方法を理解するのに役立ちました。このブログでは、アプリの作成に使用したコードについて説明します。

---

プロジェクト概要

天気予報アプリは、指定された場所の気象データを取得し、現在の天気と 3 日間の天気予報を表示します。 WeatherAPI を使用してデータを収集し、JavaScript が機能を処理します。

---

主な機能

1. 場所の検索: ユーザーは都市名を入力して気象データを取得できます。

2. 現在の天気: 現在の気温、気象状況などを表示します。

3. 予報: 今後 3 日間の天気予報を表示します。

このアプリを動作させるコードの主要な部分を見てみましょう。

---

1. API を使用した気象データの取得

最初のステップは、WeatherAPI から気象データを取得することです。 API 呼び出しを処理する関数を設定する方法は次のとおりです:

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

この関数は fetch() を使用して WeatherAPI に対して非同期リクエストを行います。現在の天気と 3 日間の天気予報を取得し、そのデータを displayCurrent() 関数と displayForecast() 関数に渡します。

---

1. ユーザー入力の処理

アプリは、検索ボックスを介してユーザー入力を待機します。ユーザーが場所 (例: 「ロンドン」) を入力すると、天気検索がトリガーされます。

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

さらに、クリックすると検索をトリガーするボタンを追加しました:

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

これにより、ユーザーは検索ボックスに入力するか、検索ボタンをクリックして気象データを取得できるようになります。

---

1. 現在の天気を表示

データが取得されると、displayCurrent() 関数が現在の天気の詳細をページに表示します。仕組みは次のとおりです:

関数 displayCurrent(location, currentWeather) {
    if (現在の天気) {
        lastUpdatedDate = 新しい日付(currentWeather.last_updated);
        let CardHTML = `
            <div>



<p>この機能は、現在の温度、気象条件、風速や湿度などの追加の詳細を表示するカードを生成します。生成された HTML を DOM に挿入することで、ページを動的に更新します。</p>


<hr>

<ol>
<li>3日間の天気予報を表示する</li>
</ol>

<p>次に、今後3日間の天気予報を表示します。これは、displayForecast() 関数によって処理されます:<br>
</p>
<pre class="brush:php;toolbar:false">関数 displayForecast(forecastData) {
    予測HTML = '';
    for (let i = 1; i <forecastdata.length i>



<p>この関数は予測データをループし、最高気温と最低気温、気象状況、アイコンを示すカードを次の 2 日間ごとに生成します。</p>


<hr>

<p>結論</p>

<p>この天気アプリの構築は、API の操作方法、JSON データの処理方法、Web ページの動的更新方法を学ぶための素晴らしい練習になりました。このプロジェクトは、非同期 JavaScript、DOM 操作、イベント処理の知識を固めるのに役立ちました。</p>

<p>JavaScript と API を始めたばかりの場合、この天気アプリはスキルを練習するためのシンプルかつ強力な方法です。エラー処理、より詳細な予測、UI のダーク モードなどの機能を追加して、このプロジェクトを拡張できます。</p>


<hr>

<p>自由にコードを試して、ニーズに合わせて微調整してください。ご質問やご提案がございましたら、お知らせください。</p>


          </forecastdata.length>