JavaScript 基礎第16回『 JavaScript の実践をしよう』

2024年5月17日2024年5月20日

簡単な天気予報を JavaScript で作ってみよう

初めは、 JavaScript のサンプルコードの提供と解説をしていきますので、このコードが何をしているのか理解をしながらコードの写経をしてみてください。
db.jsonファイルは天気の情報が入っているだけなので、ファイルを作成してから中のコードはコピーしてそのまま使用して頂いて大丈夫です。

ローカルのサーバーを起動する必要がありますので環境の構築から説明していきます。

JSON Server を立ち上げる手順

JSONデータをファイルに保存する
- 下記にあるJSONデータを今回はdb.json の名前でファイルに保存します。このファイルは後でJSON Serverによって読み込まれます。
JSON Serverのインストール
- JSON Serverをインストールするには、Node.jsが必要です。ターミナルでJSONデータが保存されているディレクトリに移動し、次のコマンドを使ってグローバルにJSON Serverをインストールします。
  npm install -g json-server
JSONデータのサーバーの立ち上げ
- JSON Serverを起動するために、ターミナルでJSONデータが保存されているディレクトリに移動し、次のコマンドを実行します。
  json-server --watch data.json

下の画像のようにVScodeの右上の赤い丸で囲った箇所をクリックするとターミナルが画面下部に表示されます。コマンドcd JSONファイルのあるフォルダまでのパスを入力して、ディレクトリの移動が出来ましたらインストールを開始してください。
サーバーを停止する場合はターミナルでCtrl + Cで停止ができます。

HTML と JavaScript のコードを書いてみよう

■サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Information</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>JavaScriptで天気予報</h1>
    <h2>1週間の天気</h2>
    <button onclick="getAWeekWeather('tokyo')">東京</button>
    <button onclick="getAWeekWeather('sapporo')">札幌</button>
    <button onclick="getAWeekWeather('okinawa')">沖縄</button>
    <div id="weather-result"></div>

    <script src="app.js"></script>
</body>
</html>

async function getAWeekWeather(location) {
    try {
        const response = await fetch('http://localhost:3000/' + location);
        const data = await response.json();
        const weatherResult = document.getElementById('weather-result');

        // 画面をクリアする
        weatherResult.innerHTML = '';

        // 雨の日付を保持する配列
        const rainyDates = [];

        // 一週間分の天気情報を表示
        for (const weatherInfo of data) {
            const weatherItem = document.createElement('div');
            weatherItem.innerHTML = `
                <h2>${weatherInfo.name} (${weatherInfo.date})</h2>
                <p>天気: ${weatherInfo.weather}</p>
                <p>気温: ${weatherInfo.temp}</p>
            `;
            weatherResult.appendChild(weatherItem);

            // 雨の日付を抽出して配列に追加
            if (weatherInfo.weather === '雨') {
                rainyDates.push(`${weatherInfo.name}(${weatherInfo.date})`);
            }
        }

        // 雨の日付があればまとめてアラート表示
        if (rainyDates.length > 0) {
            setTimeout(() => {
                alert(`以下の日付に雨が予想されています:\n${rainyDates.join('\n')}\n傘を持っていくのをオススメします！`);
            }, 100); // 100ミリ秒遅延させる
        }
    } catch (error) {
        console.error('Error fetching weather data:', error);
        document.getElementById('weather-result').innerHTML = `<p>データが取得できませんでした。</p>`;
    }
}

{
  "tokyo": [
    {
      "id": "1",
      "date": "2024-05-18",
      "name": "東京",
      "weather": "雨",
      "temp": "25℃"
    },
    {
      "id": "2",
      "date": "2024-05-19",
      "name": "東京",
      "weather": "曇り",
      "temp": "22℃"
    },
    {
      "id": "3",
      "date": "2024-05-20",
      "name": "東京",
      "weather": "晴れ",
      "temp": "27℃"
    },
    {
      "id": "4",
      "date": "2024-05-21",
      "name": "東京",
      "weather": "雨",
      "temp": "24℃"
    },
    {
      "id": "5",
      "date": "2024-05-22",
      "name": "東京",
      "weather": "曇り",
      "temp": "23℃"
    },
    {
      "id": "6",
      "date": "2024-05-23",
      "name": "東京",
      "weather": "晴れ",
      "temp": "26℃"
    },
    {
      "id": "7",
      "date": "2024-05-24",
      "name": "東京",
      "weather": "雨",
      "temp": "25℃"
    }
  ],
  "sapporo": [
    {
      "id": "8",
      "date": "2024-05-18",
      "name": "札幌",
      "weather": "雪",
      "temp": "0℃"
    },
    {
      "id": "9",
      "date": "2024-05-19",
      "name": "札幌",
      "weather": "曇り",
      "temp": "2℃"
    },
    {
      "id": "10",
      "date": "2024-05-20",
      "name": "札幌",
      "weather": "晴れ",
      "temp": "5℃"
    },
    {
      "id": "11",
      "date": "2024-05-21",
      "name": "札幌",
      "weather": "雪",
      "temp": "-1℃"
    },
    {
      "id": "12",
      "date": "2024-05-22",
      "name": "札幌",
      "weather": "雨",
      "temp": "3℃"
    },
    {
      "id": "13",
      "date": "2024-05-23",
      "name": "札幌",
      "weather": "晴れ",
      "temp": "6℃"
    },
    {
      "id": "14",
      "date": "2024-05-24",
      "name": "札幌",
      "weather": "雪",
      "temp": "1℃"
    }
  ],
  "okinawa": [
    {
      "id": "15",
      "date": "2024-05-18",
      "name": "沖縄",
      "weather": "晴れ",
      "temp": "35℃"
    },
    {
      "id": "16",
      "date": "2024-05-19",
      "name": "沖縄",
      "weather": "曇り",
      "temp": "32℃"
    },
    {
      "id": "17",
      "date": "2024-05-20",
      "name": "沖縄",
      "weather": "雨",
      "temp": "30℃"
    },
    {
      "id": "18",
      "date": "2024-05-21",
      "name": "沖縄",
      "weather": "晴れ",
      "temp": "34℃"
    },
    {
      "id": "19",
      "date": "2024-05-22",
      "name": "沖縄",
      "weather": "曇り",
      "temp": "31℃"
    },
    {
      "id": "20",
      "date": "2024-05-23",
      "name": "沖縄",
      "weather": "雨",
      "temp": "29℃"
    },
    {
      "id": "21",
      "date": "2024-05-24",
      "name": "沖縄",
      "weather": "晴れ",
      "temp": "33℃"
    }
  ]
}

ブラウザでindex.htmlを開くとしたの画像のような画面が表示されます。

JSONサーバーを起動した状態で各ボタンをクリックすると下の画像のように一週間分の天気の情報が表示されます。

JavaScript のコードの解説

1.HTMLのボタンをクリックしたときに動くメソッドを非同期で定義しています。

async function getAWeekWeather(location) {
}

2.1の中にtry-catch文を書いてデータの取得などができない場合などのエラーをキャッチできるようにしています。

try {
} catch (error) {
        console.error('Error fetching weather data:', error);
        document.getElementById('weather-result').innerHTML = `<p>データが取得できませんでした。</p>`;
    }

3.2のtryの中でfetch を使用して、指定された場所の天気情報を非同期で取得します。
次に、取得した天気情報を JSON 形式に解析し、そのデータを取得します。

const response = await fetch('http://localhost:3000/' + location);
        const data = await response.json();

4.続いて、天気情報を表示するHTMLの要素を取得します。

const weatherResult = document.getElementById('weather-result');

5.画面をクリア（前回の天気情報を削除する）をしているのですが、クリアをしないと例えば、東京のボタンを押してから、札幌のボタンを押すと、東京の天気の表示が残りその後に札幌の情報が表示されてしまいます。ボタンを押すたびに情報が後ろに表示されてしまうのを防ぐために、ボタンを押すたびにクリアをしています。

 weatherResult.innerHTML = '';

6.雨の予報がある場合に、アラートを表示したいので都市名と雨の日の日付を入れることができる空のリストを作成しています。

const rainyDates = [];

7.取得した天気情報をループして、それぞれの情報を画面に表示します。
※for文とHTMLの要素の操作を復習したい場合はリンクをクリックして確認してください。

        for (const weatherInfo of data) {
            const weatherItem = document.createElement('div');
            weatherItem.innerHTML = `
                <h2>${weatherInfo.name} (${weatherInfo.date})</h2>
                <p>天気: ${weatherInfo.weather}</p>
                <p>気温: ${weatherInfo.temp}</p>
            `;
            weatherResult.appendChild(weatherItem);
         }

8.もしweatherが文字列「雨」であれば、都市名(日付)を6で作った空のリストに追加をしています。
1つ1つ取り出しているので、for文の中の7の続きに記述してください。
※if文を復習したい場合はリンクをクリックしてください。

if (weatherInfo.weather === '雨') {
                rainyDates.push(`${weatherInfo.name}(${weatherInfo.date})`);
            }

9.7で取得した雨の日のデータが1つでもあれば、アラートを1秒後に表示をします。
アラートの中では6のリストに入っている都市名、雨の日の日付を表示します。
※\nは改行をしています。

        if (rainyDates.length > 0) {
            setTimeout(() => {
                alert(`以下の日付に雨が予想されています:\n${rainyDates.join('\n')}\n傘を持っていくのをオススメします！`);
            }, 100); 
        }