GitHub Copilot ChatではじめるJavaScript開発(3) OpenWeather APIを使って天気予報アプリを作る（前編）

JavaScriptでAPIから天気情報を取得する

いよいよ、JavaScriptを使ってAPIから天気データを取得する処理を実装しよう。画面への表示は後回しにして、まずは取得したデータをWebブラウザのコンソールに表示するところから始めてみる。Copilot Chatには次のように指示をしてコードを書いてもらう。

index.htmlに対して、JavaScriptで以下の処理を実装してください：

- 検索ボタンがクリックされたら、入力された都市名を取得
- fetchを使ってOpenWeather APIから天気データを取得
- 取得したデータをconsole.logでコンソールに表示

ファイル名はscript.jsにしてください。
APIキーは定数として定義し、ダミー文字列を入れておいてください。
コードには処理の説明のコメントを入れてください

先ほどAPIの使い方を聞いたときに、JavaScriptのfetchを使った例を提示されたので、今回はそのことも明示的に指示してみた。このようにできるだけ具体的に指示を出すことで、自分に理解しやすいコードを生成してくれるようになる。また、コードに説明のコメントを入れるように指示するのも、コードを読みやすくするコツである。

index.htmlは次のように変更された。script.jsを読み込むscriptタグが追加されただけだ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>天気予報アプリ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>天気予報アプリ</h1>
    <div class="input-group">
        <input type="text" id="city-input" placeholder="都市名を入力してください">
        <button id="search-btn">検索</button>
    </div>
    <div id="weather-info"></div>
    <script src="script.js"></script>
</body>
</html

script.jsは次のようになった。

// OpenWeather APIキー（ダミー）
const API_KEY = "YOUR_API_KEY_HERE";

// 検索ボタンのクリックイベントを設定
document.getElementById('search-btn').addEventListener('click', () => {
    // 入力された都市名を取得
    const city = document.getElementById('city-input').value.trim();
    if (!city) return; // 空欄なら何もしない

    // OpenWeather APIのURLを作成
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${API_KEY}&lang=ja&units=metric`;

    // fetchでAPIリクエストを送信
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 取得した天気データをコンソールに表示
            console.log(data);
        })
        .catch(error => {
            // エラー時はコンソールにエラー内容を表示
            console.error('天気情報の取得に失敗しました:', error);
        });
})

ユーザーが入力した都市名は「city」に格納されます。urlはリクエスト用のURLで、パラメーターを含んでいます。APIキーはAPI_KEYに格納する。生成されたコードではダミーとして「YOUR_API_KEY_HERE」が入っているので、この部分をOpenWeather APIのAPIキーに書き換える。

実際にリクエストを送っているのはfetchの部分です。この部分のコードをCopilot Chatに解説してもらおう。

fetchの部分の処理について詳しく説明してください

Copilot Chatによる解説は次のようになった。

fetchの部分の処理は以下のような流れです。

1. fetch(url)
　指定したURL（OpenWeather API）にHTTPリクエストを送ります。
　この関数はPromise（非同期処理）を返します。

2. .then(response => response.json())
　APIから返ってきたレスポンス（responseオブジェクト）をJSON形式に変換します。
　これもPromiseを返します。

3. .then(data => { ... })
　変換されたJSONデータ（天気情報）がdataに渡されます。
　ここでconsole.log(data)により、取得した天気データをコンソールに表示しています。

4. .catch(error => { ... })
　fetchやJSON変換でエラーが発生した場合、ここでエラー内容を表示します。

この一連の流れで、APIから天気情報を非同期で取得し、結果を処理しています

OpenWeather APIはレスポンスとしてJSON形式のデータを返すので、これをdataに格納してconsole.log()でコンソールに出力してるというわけだ。

天気データ取得の動作を確認する

Webブラウザでindex.htmlをリロードして動作を確認しよう。入力フィールドに都市名を入力して、「検索」ボタンをクリックする。「Tokyo」のようにアルファベット表記で入力しなければエラーになってしまうので注意しよう。

そのままだと画面上は何も起こっていないように見えるが、Webブラウザに備わっている開発者ツールを使えばコンソール出力の内容を確認できる。

開発者ツールは、Google Chrome/Microsoft Edge/Safariのいずれもキーボードショートカットの[Ctrl]+[Shift]+[I]（Macの場合は[Option]+[Command]+[I]）で表示できる。ただし、Safariは事前に環境設定の「詳細」タブで「Webデベロッパ用の機能を表示」にチェックを入れて、開発者ツールを有効にしておく必要がある。

Safariで開発者ツールを有効にする設定

開発者ツールの「コンソール」タブを開いた状態で、都市名を入力して「検索」ボタンをクリックすれば、次の図のようにAPIから返されたJSONデータの内容が表示される。

開発者ツールに、OpenWeather APIから取得したJSONデータが表示された

天気データのJSONを理解する

JSONデータは次のようになっている（長いので先頭部分のみ掲載）。

{
    "coord": {
        "lon": 139.6917,
        "lat": 35.6895
    },
    "weather": [
        {
            "id": 501,
            "main": "Rain",
            "description": "適度な雨",
            "icon": "10d"
        }
    ],

    以下、省略。

このデータについて詳しく知りたい場合は、Copilot Chatに聞いてみよう。

OpenWeather APIから取得したJSONデータの構造を説明してください

Copilot Chatの回答は次のとおり。

OpenWeather API（/data/2.5/weather）から取得できるJSONデータの主な構造は以下の通りです。

- weather
　天候情報（配列）。例：weather[0].main（天気の主な種類）、weather[0].description（詳細）
- main
　気温や湿度など。例：main.temp（現在の気温）、main.humidity（湿度）、main.temp_min（最低気温）、main.temp_max（最高気温）
- wind
　風情報。例：wind.speed（風速）、wind.deg（風向）
- name
　都市名
- sys
　国コードなど。例：sys.country
- dt
　データ取得時刻（UNIXタイムスタンプ）

このような構造になっています

どうやら、天気の概要はweather配列に、気温や湿度などの情報はmain、風の情報はwind、都市名はname、国コードなどはsysの各オブジェクトに格納されるようだ。

もっと具体的に使い方を聞いてみることもできる。

dataに格納されたオブジェクトから、天気の状態、気温、湿度、風速、風向を取得するにはどのようにすればいいですか

このように質問したところ、JavaScriptコードの中でデータを取り出す方法をコード例付きで教えてくれた。

dataオブジェクトから各情報を取得する方法は以下の通りです。

- 天気の状態（主な種類）:
　data.weather[0].main
- 天気の詳細（説明）:
　data.weather[0].description
- 気温:
　data.main.temp
- 湿度:
　data.main.humidity
- 風速:
　data.wind.speed
- 風向:
　data.wind.deg

例（JavaScript）:
----
const weatherMain = data.weather[0].main;
const weatherDesc = data.weather[0].description;
const temp = data.main.temp;
const humidity = data.main.humidity;
const windSpeed = data.wind.speed;
const windDeg = data.wind.deg;
----
このようにプロパティにアクセスすれば取得できます

さて、今回は天気予報アプリの基盤となるUIと外部API呼び出しの部分を実装した。現時点では、データを取得することはできるが、まだ画面には何も表示されていない。次回は、取得したデータを画面に表示し、エラー処理や単位切り替えなどの機能を追加して、もう少し本格的なアプリに仕上げていく。