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

AIプログラミングアシスタントツール「GitHub Copilot Chat」を使って、JavaScriptによるWebアプリケーションの開発の仕方を学ぶ本連載。前回は、簡単な計算機アプリを作りながら、アプリケーションを作る際のCopilot Chatへの指示の出し方や、質問の仕方を学んだ。

今回はもう一歩ステップアップして、外部のWeb APIを利用した「天気予報アプリ」の開発に挑戦してみよう。

作成する天気予報アプリの概要

今回作成したい天気予報アプリは、都市名を入力したら、その都市の現在の天気情報を表示するというもの。アプリの挙動としては以下を想定している。

ユーザーが「Tokyo」や「Osaka」などの都市名を入力して「検索」ボタンをクリックする
アプリが外部の天気情報サービス(OpenWeather API)にアクセスして、その都市の現在の天気データを取得する
取得した天気データを画面に表示する

第3回となる今回は1番目と2番目のアプリの基本構造を作ってAPIからデータを取得するところまでを実装する。そして次回（第4回）、取得したデータを画面に表示するように機能拡張を行う。

必要な機能をリストアップする

まずはいつも通り、任意の場所にアプリ用のフォルダを作って、それをVisual Studio Code（VSCode）で開こう。今回は「weatherinfo」というフォルダ名にする。そして、Copilot Chatパネルを開いて前回同様に「Edit」モードにセットする。

アプリの実装に着手する前に、天気予報アプリに必要な機能を整理しよう。ここでもCopilot Chatを活用して、どんな機能を作らなければならないのかを相談しながら洗い出していくと良い。例えば、次のように質問してみよう。

天気予報アプリを作りたいです。
都市名を入力すると、その都市の現在の天気を表示するシンプルなアプリです。
どんな機能が必要か教えてください

筆者の環境では、Copilot Chatからは次の回答が得られた。

天気予報アプリに必要な主な機能は以下の通りです。
1. 都市名の入力フォーム
　ユーザーが都市名を入力できるUI。
2. 天気情報の取得
　入力された都市名から天気情報（APIなど）を取得する機能。
3. 天気情報の表示
　取得した天気（気温、天候、湿度など）を画面に表示する機能。
4. エラーハンドリング
　都市名が無効な場合やAPIエラー時に、適切なエラーメッセージを表示する機能。

必要に応じて、履歴機能やお気に入り都市の保存なども追加できます

Copilot Chatに天気予報アプリに必要な機能を聞いた様子

もし、足りない機能や実装したい機能がある場合は、それが適切かどうかや、どのような技術が必要になるのかなどを質問しながら、最終的な機能リストをまとめていけばよい。今回は、上の回答例のうち、1と2の部分を実装する。

HTMLとCSSで基本的なUIを作る

まずは、アプリの見た目となるHTMLとCSSを作成する。チャットで要件を伝えてコードを生成してもらおう。要件はできるだけ詳細に指定した方が、意図した通りのものが生成されやすい。例えば、次のような感じでだ。

天気予報アプリのHTMLを作ってください。以下の要素が必要です：
- ページタイトル（「天気予報アプリ」）
- 都市名を入力するテキストボックス
- 検索ボタン
- 天気情報を表示するエリア（現在は空でOK）

HTMLファイル名はindex.htmlにしてください

筆者の環境では次のコードが生成された。問題なければ「保持」をクリックして採用する。

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

このindex.htmlファイルをWebブラウザで開くと次のような表示になる。

天気予報アプリのHTMLを作った

このままでは少し味気ないので、CSSを使って見た目を整えたい。チャットに次のように指示を出してみる。

先ほどのHTMLに対してCSSを追加してください。要件は以下の通りです：
- 中央揃えで見やすいレイアウト
- 入力欄とボタンは横並び
- シンプルで現代的なデザイン

ファイル名はstyle.cssにしてください

その結果、まずindex.htmlが次のように変更された。

<!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>
</body>
</html

style.cssを読み込むlinkタグのほかに、CSSでレイアウトを指定するためのdivタグが追加されていることが分かる。チャットには「入力欄とボタンを横並びにするため、ラッパーdiv（class="input-group"）を追加します。」という説明が付いていた。

実際のスタイル指定のコードは指示どおりstyle.cssファイルに記述された（長いのでコードは省略する）。

Webブラウザでindex.htmlをリロードしたら、CSSが適用されて先ほどよりもきれいなレイアウトになったことを確認できた。まだ検索ボタンを押しても何も反応しないが、アプリの骨組みが出来上がっている。

CSSを追加して見た目を整える

OpenWeather APIのAPIキーを取得する

続いて、天気情報を取得する部分を実装していこう。天気情報の取得には「OpenWeather API」という天気情報サービスを利用する。APIとは「Application Programming Interface」の略で、簡単に言えば、他のサービスのデータや機能を自分のアプリから利用できる仕組みである。

OpenWeather APIを利用するには、まず無料のアカウント登録と、「APIキー」と呼ばれる文字列の取得が必要となる。

OpenWeatherMapのサイト(https://openweathermap.org/)にアクセスする
アカウントを登録する（右上の「Sign In」→「Create an Account」で必要事項を記入してアカウントを作成したら、登録したメールアドレスに確認メールが届くので、リンクをクリックして認証を完了する）
ログイン後に「API keys」タブをクリックすると、デフォルトのAPIキーが表示される（長い英数字の文字列）

API Keysのページには、次のようにデフォルトのAPIキーが表示されるはずだ。このAPIキーをコピーして使用する。

OpenWeather APIのAPIキーを確認

ただし、新規にアカウントを登録した場合、デフォルトのAPIキーが有効になるまでに少し時間がかかる可能性がある。まだAPIキーが表示されていない場合には、有効化されるまで気長に待とう。

このAPIキーは、OpenWeather APIを利用する権利を持っていることを証明する鍵のようなもので、これをリクエストに含めることで天気データを取得できる。無料プランでは1分間に60回までのリクエストが可能となっている。

APIキーは個人専用なので、他人に公開しないように注意しよう。今回は練習なのでコードに直接書き込むが、本番用のアプリケーションであれば、環境変数などを使ってプログラムのコードに直接記載しないように管理するのが推奨されている。

OpenWeather APIの使い方をチャットで聞いてみる

APIキーを取得できたら、実際にどのようにAPIを使うのかをCopilot Chatに教えてもらおう。例えば次のように質問してみる。

OpenWeather APIを使って天気情報を取得する方法を教えてください

この質問に対して、Copilot Chatは次のように返答してくれた。

OpenWeather APIで天気情報を取得する手順は以下の通りです。

1. OpenWeatherの公式サイトでAPIキーを取得する
　（https://openweathermap.org/ で無料登録後、APIキーが発行されます）

2. APIエンドポイントを確認する
　現在の天気情報の場合：
　https://api.openweathermap.org/data/2.5/weather?q={都市名}&appid={APIキー}&lang=ja&units=metric

3. fetchなどでAPIリクエストを送る
　例（JavaScript）：
----
const city = "Tokyo";
const apiKey = "取得したAPIキー";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&lang=ja&units=metric`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    // dataに天気情報が入っています
    console.log(data);
  });
----

4. レスポンスから必要な情報（気温、天候など）を取得して表示します。
※APIキーは絶対に公開しないよう注意してください

「APIエンドポイント」というのは、そのAPIを利用する際にアクセスするURLを指している。プログラムからこのエンドポイントにアクセスして、パラメーターを渡すと、そのパラメーターに応じたデータがレスポンスとして返ってくる仕組みだ。Copilot Chatはその方法をコード例付きで解説してくれている。

APIエンドポイントにどのようなパラメーターを渡せるのかも聞いてみよう。

APIエンドポイントに渡すパラメータについて解説してください

Copilot Chatは次のように詳しく解説してくれる。

OpenWeather APIのエンドポイント（例: /data/2.5/weather）に渡す主なパラメータは以下の通りです。

- q
　都市名を指定します。例: q=Tokyo
- appid
　あなたのAPIキーを指定します。例: appid=xxxxxxxxxxxxxxxxxxxx
- lang
　レスポンスの言語を指定します。日本語の場合は lang=ja
- units
　単位系を指定します。摂氏の場合は units=metric（デフォルトはケルビン）

例:
https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=xxxxxxxxxxxxxxxxxxxx&lang=ja&units=metric

これらのパラメータを組み合わせることで、都市名・言語・単位を指定した天気情報を取得できます

ただし、AIの回答は誤っていたり最新の情報が反映されていないこともあるので、かならず公式サイトの情報も確認する癖を付けておこう。OpenWeather APIの仕様や使い方は公式サイトの次のページで公開されている。