GitHub Copilotで天気予報アプリを作ってみた｜Streamlit・Python・API連携を実践

これまでGitHub Copilotの基本的な機能や、AIを使ったコード生成について学んできました。

ここからは、いよいよ実践編です。

今回は、これまで学んできたGitHub Copilotの機能を実際のアプリ開発に活用して、天気予報アプリを作っていきます。

ただコードを書いてもらうだけではありません。

アプリを実装し、生成されたコードを確認し、必要に応じて修正する。そして最後には、アプリの仕組みや実装内容を整理して、ドキュメントとしてまとめるところまで進めていきます。

つまり今回のテーマは、単純な「AIによるプログラミング」ではありません。

「考える」「作る」「確認する」「説明する」「まとめる」という、実際の開発で必要になる一連の作業にGitHub Copilotをどう活用できるのかを体験していきます。

GitHub Copilotを使って天気予報アプリを開発する

今回作成するのは、天気情報を取得して画面に表示する天気予報アプリです。

アプリの開発には、PythonとStreamlitを利用します。

さらに、天気情報を取得するために気象APIを利用します。

今回のような構成にすると、プログラミング初心者でも比較的シンプルなコードで、APIと連携したWebアプリを作る流れを体験できます。

今回の開発イメージを整理すると、次のようになります。

Pythonでアプリを実装する
Streamlitを使ってWebアプリ化する
気象APIから天気情報を取得する
GitHub Copilot Chatに実装方法を相談する
Copilotが生成したコードを確認する
必要なコードをmain.pyへ適用する
完成したアプリの内容をドキュメントとして整理する

GitHub Copilot Chatは、コードの生成だけではなく、コードの説明、修正、テスト、ドキュメント作成などにも利用できます。GitHub公式ドキュメントでも、Copilot Chatはコード提案やコードの説明、テスト生成、バグ修正などを支援する機能として紹介されています。([GitHub Docs](https://docs.github.com/en/copilot/how-tos/chat-with-copilot?utm_source=chatgpt.com))

今回の成果物は「アプリ」と「ドキュメント」

今回のゴールは、天気予報アプリを動かして終わりではありません。

最終的には、次の2つを成果物として考えます。

天気予報アプリ
アプリの実装内容をまとめたドキュメント

実際の開発現場では、コードを書くだけで仕事が終わるわけではありません。

「このアプリは何をするものなのか」「どのAPIを利用しているのか」「どのような仕組みで動いているのか」「変更するときはどこを修正すればいいのか」などを、他の人が理解できるように整理する必要があります。

そこで今回は、GitHub Copilotを実装だけでなく、説明やドキュメント作成にも活用することを意識して進めていきます。

GitHub Copilotで生成したコードは毎回同じとは限らない

ここで、GitHub Copilotを使ううえで大切なポイントがあります。

今回、私が説明する手順をそのまま実行したとしても、必ずしも同じコードや同じ画面が生成されるとは限りません。

「同じプロンプトを入力したのに、前回とは違うコードが出てきた」

このようなことが起こる場合があります。

これは、生成AIを利用した開発では自然なことです。

そのため、今回の記事で紹介する画面やコードと完全に一致しなくても、焦る必要はありません。

大切なのは、Copilotが生成した結果をそのまま受け入れることではありません。

生成されたコードを自分で読み、目的に合っているか確認し、必要であれば修正する。

この作業こそが、AI時代のプログラミングで重要になる部分だと感じます。

GitHub Copilotのコードをそのまま使わない理由

GitHub Copilotは非常に便利ですが、生成されたコードが常に正しいとは限りません。

GitHub公式ドキュメントでも、Copilotが生成したコードについて、利用者自身がレビューと検証を行う必要があると説明されています。([GitHub Docs](https://docs.github.com/en/copilot/concepts/chat?utm_source=chatgpt.com))

例えば、次のようなポイントは自分で確認したいところです。

コードが実際に動作するか
APIの使い方が正しいか
エラーが発生した場合に適切に処理できるか
ユーザーに表示する内容が分かりやすいか
不要なコードが含まれていないか
セキュリティ上の問題がないか

つまり、GitHub Copilotは「プログラマーの代わり」ではなく、開発を加速してくれる強力なアシスタントとして考えると分かりやすいでしょう。

まずは開発するファイルを選択する

それでは、実際に天気予報アプリの開発を始めていきます。

今回はコードスペースの環境を開き、サイドバーからExplorerを選択します。

Explorerを開くと、ワークスペース内に複数のファイルが表示されます。

その中から、今回の実装対象となるmain.pyを選択します。

ここからGitHub Copilot Chatを使って、main.pyにコードを追加していきます。

GitHub Copilot Chatを開いてAskモードを確認する

次に、GitHub Copilot Chatを開きます。

もしチャットスペースが表示されていない場合は、VS CodeのヘッダーにあるChat関連のアイコンから表示します。

GitHub Copilot Chatでは、現在の環境によって利用できるモードや表示が異なる場合がありますが、今回の手順ではAskモードを利用します。

Askモードは、コードについて質問したり、実装方法を相談したり、コードの提案を受けたりするときに便利なモードです。GitHub公式ドキュメントでも、Askモードはコードベースやプログラミングについて質問し、コードの提案を受ける用途に適していると説明されています。([GitHub Docs](https://docs.github.com/en/copilot/how-tos/chat-with-copilot/chat-in-ide?quot=&tool=jetbrains&utm_source=chatgpt.com))

GitHub Copilot Chatで確認しておきたい5つのポイント

プロンプトを送信する前に、次の項目を確認します。

GitHub Copilot Chatが表示されている
モードがAskになっている
対象ファイルとしてmain.pyが認識されている
READMEに用意されているプロンプトを確認している
利用するAIモデルを確認している

特に重要なのが、Copilotにどのファイルを見せているかという点です。

AIにコードを書いてもらう場合、どのような情報をコンテキストとして渡すかによって、提案される内容も変わってきます。

GitHub Copilotでは、現在開いているファイルや明示的に指定したファイルなどをコンテキストとして利用できます。公式ドキュメントでも、関連するファイルを開いたり、ファイル参照を追加したりすることでCopilotに適切なコンテキストを与えられると説明されています。([GitHub Docs](https://docs.github.com/en/copilot/how-tos/chat-with-copilot/get-started-with-chat-in-your-ide?tool=visualstudio&utm_source=chatgpt.com))

READMEに用意されたプロンプトを利用する

今回のワークスペースにはREADMEファイルが用意されています。

このREADMEの中には、今回のアプリ開発で使用するプロンプトが番号付きで整理されています。

まずはナンバー1のプロンプトを確認します。

ここでは、プロンプトを自分で一から入力するのではなく、READMEに記載されている内容をコピーしてGitHub Copilot Chatへ貼り付けます。

この方法にはメリットがあります。

長いプロンプトを手入力する必要がないので入力ミスを減らせますし、同じ学習環境であれば、同じ条件を使ってCopilotの動作を確認できます。

今回のプロンプトでは、Streamlitを利用し、気象APIと連携する天気予報アプリの実装をCopilotに依頼します。

StreamlitとAPIを使って天気予報アプリを作る

今回のアプリ開発では、Streamlitと気象APIを組み合わせます。

Streamlitは、Pythonを使ってWebアプリケーションを比較的簡単に作れるフレームワークです。

Pythonでデータ処理やAPI連携を行い、その結果をWeb画面に表示するという流れを作りやすいのが特徴です。

今回のような「PythonでAPIからデータを取得して画面に表示する」という練習には、非常に分かりやすい題材です。

また、原稿で「OpenMeteor」となっていた部分については、一般的な気象APIの名称であるOpen-Meteoとして整理しています。実際にStreamlitとOpen-Meteoを組み合わせた天気アプリの実例も公開されています。([GitHub](https://github.com/ndakov/streamlit-weather-app?utm_source=chatgpt.com))

天気予報アプリの基本的な仕組み

今回のアプリの流れをシンプルにすると、次のようになります。

ユーザー → Streamlit → Python → 気象API → 天気データ → 画面表示

例えば、ユーザーが都市や地域を指定すると、Python側からAPIへリクエストを送信します。

APIから返ってきた天気情報をPythonで処理し、Streamlitを使って画面に表示します。

これまで「APIを使う」と聞いても少し難しく感じていた人も、この流れを一度実際に動かしてみると、かなりイメージしやすくなると思います。

GitHub Copilotにプロンプトを送信する

それでは、READMEにあるナンバー1のプロンプトをコピーして、GitHub Copilot Chatの入力欄へ貼り付けます。

ここで、main.pyがコンテキストとして含まれていることも確認します。

準備ができたら、プロンプトを送信します。

ここから少しワクワクする瞬間です。

自分でコードを一行ずつ書いていくのではなく、自然言語で「こういうアプリを作りたい」と伝えると、GitHub Copilotがその内容を読み取り、実装に必要なコードを提案してくれます。

チャット欄に入力した内容が処理され、しばらくするとコードが表示されます。

この瞬間を見ると、AIを使った開発がこれまでのプログラミングとは少し違うことを実感できます。

GitHub Copilotが生成したコードを確認する

コードが生成されたら、すぐに適用するのではなく、まず内容を確認します。

ここは非常に重要なポイントです。

「AIが作ってくれたから、そのまま使えばいい」と考えてしまうと、エラーや意図しない処理を見逃してしまう可能性があります。

生成されたコードを上から眺めながら、次のような点を確認してみましょう。

必要なライブラリがimportされているか
APIへ正しくアクセスしているか
APIから取得したデータを適切に処理しているか
Streamlitの画面表示が目的に合っているか
エラーが発生した場合の処理があるか
自分が依頼した内容とコードの内容が一致しているか

コードを読むことに慣れていない場合でも、最初からすべて理解する必要はありません。

「この部分は何をしていますか？」と、さらにGitHub Copilotへ質問してみるのも有効です。

つまり、Copilotにコードを作らせる → Copilotに説明してもらう → 自分で確認するという流れを作ることができます。

生成されたコードをmain.pyに適用する

コードの内容を確認したら、次はmain.pyへ適用していきます。

GitHub Copilotがコードを提案すると、コードブロックの上部などにいくつかの操作アイコンが表示されます。

環境やバージョンによって表示は変わる可能性がありますが、代表的な操作として、コードを適用したり、カーソル位置へ挿入したり、コピーしたりする機能があります。

Copilotが生成したコードをカーソル位置へ挿入する

今回利用するのは、カーソル位置にコードを挿入する操作です。

main.pyを開いた状態で、コードを入れたい場所にカーソルを移動します。

そして、Copilotの提案画面から挿入操作を選択します。

すると、Copilotが生成したコードがmain.pyへ挿入されます。

実際にコードがエディタへ入った瞬間は、AIが単なるチャット相手ではなく、開発環境の中で作業を支援してくれていることを強く感じられるところです。

GitHub公式ドキュメントでも、Copilot Chatのコード生成結果から、コードをコピーしたり、カーソル位置へ挿入したり、新しいファイルへ追加したりする操作が案内されています。([GitHub Docs](https://docs.github.com/en/copilot/how-tos/chat-with-copilot/get-started-with-chat-in-your-ide?tool=visualstudio&utm_source=chatgpt.com))

AIにコードを書いてもらうだけでは開発は終わらない

今回の実践で特に意識したいのが、この部分です。

GitHub Copilotを使えば、コードを書く時間を大きく短縮できる可能性があります。

しかし、AIにコードを書かせることだけが目的ではありません。

むしろ重要なのは、生成されたコードを理解し、評価し、必要に応じて改善することです。

例えば、Copilotから提示されたコードを見て、「この処理は本当に必要なのか？」と考えてみます。

「APIから取得したデータはどこに入っているのか？」

「画面にはどのように表示されているのか？」

「APIがエラーになったらどうなるのか？」

このような疑問を一つずつCopilotに投げかけることで、単なるコード生成から一歩進んだ学習ができます。

GitHub Copilotを「考えるための相棒」として使う

個人的に今回の実践で面白いと感じるのは、GitHub Copilotの使い方が「コードを書いてもらう」だけではないことです。

例えば、開発中に次のような質問をすることができます。

「このコードは何をしていますか？」
「この処理をもっとシンプルにできますか？」
「APIエラーが発生した場合の処理を追加してください」
「初心者にも分かるように、このコードを説明してください」
「このアプリのREADMEを作成してください」
「この実装の問題点を教えてください」

GitHub Copilotは、コード生成だけでなく、質問への回答、コード改善、テスト作成、ドキュメント作成などにも利用できます。([GitHub Docs](https://docs.github.com/en/copilot/how-tos/chat-with-copilot/get-started-with-chat-in-your-ide?tool=visualstudio&utm_source=chatgpt.com))

こう考えると、プログラミングの勉強方法そのものが変わってきます。

分からないコードを検索して終わりではなく、その場でCopilotに質問して、説明を受けながらコードを読み進めることができます。

今回の実践から学べるGitHub Copilot活用法

今回の天気予報アプリ開発を通して、GitHub Copilotを使った開発の基本的な流れが見えてきました。

作りたいアプリの目的を決める
必要なファイルを確認する
GitHub Copilot Chatを開く
適切なモードを選択する
必要なコンテキストを指定する
プロンプトを入力する
Copilotからコードの提案を受ける
生成されたコードをレビューする
必要な部分をファイルへ適用する
実際に動作確認する
問題があればCopilotと対話しながら修正する
最後に実装内容をドキュメントとして整理する

この流れを覚えておくと、天気予報アプリ以外の小さなWebアプリを作るときにも応用できます。

GitHub Copilotでアプリ開発をするときの注意点

AIを使った開発は便利ですが、注意するポイントもあります。

1. 生成されたコードを必ず確認する

AIが生成したコードだからといって、無条件に正しいとは限りません。

実行してエラーが出ないかだけでなく、処理内容が目的に合っているかも確認しましょう。

2. プロンプトを具体的にする

「天気アプリを作って」とだけ指示するよりも、「PythonとStreamlitを使用する」「気象APIからデータを取得する」「取得した天気情報を画面に表示する」など、条件を具体的にしたほうが意図を伝えやすくなります。

3. コンテキストを意識する

Copilotにどのファイルを参照させるかは重要です。

必要なファイルを開いたり、明示的に参照させたりすることで、プロジェクトの状況を踏まえた回答を得やすくなります。([GitHub Docs](https://docs.github.com/en/copilot/how-tos/chat-with-copilot/get-started-with-chat-in-your-ide?tool=visualstudio&utm_source=chatgpt.com))

4. エラーが出ても慌てない

実際の開発では、一回で完成するほうが珍しいくらいです。

エラーが出たら、エラーメッセージを確認し、その内容をCopilotに伝えて修正方法を相談してみましょう。

「エラーが出たから失敗」ではありません。

エラーを見つける → 原因を考える → Copilotに相談する → 修正する → 再実行する

この繰り返しも立派な開発経験になります。

まとめ｜GitHub Copilotで「作る」から「理解する」へ

今回は、GitHub Copilotを活用して天気予報アプリを作る実践編として、開発のスタートからCopilotによるコード生成、main.pyへのコード挿入までを進めました。

今回のポイントをまとめると、次のようになります。

PythonとStreamlitで天気予報アプリを作る
気象APIを利用して天気情報を取得する
GitHub Copilot Chatを使ってコードを生成する
Askモードを利用して実装方法を相談する
main.pyをコンテキストとして意識する
READMEに用意されたプロンプトを活用する
Copilotが生成したコードを必ず確認する
必要なコードをmain.pyへ適用する
AIに任せきりにせず、自分でコードを理解する
実装だけでなくドキュメント作成にもCopilotを活用する

今回のような小さなアプリ開発は、GitHub Copilotを実際に使いこなすための良い練習になります。

最初は「AIにコードを書いてもらう」という感覚でも構いません。

しかし、何度か使っていくうちに、「この処理ならCopilotに相談してみよう」「このコードを説明してもらおう」「この部分を改善できないか聞いてみよう」と、少しずつ使い方が変わってきます。

そして最終的には、GitHub Copilotを単なるコード生成ツールではなく、開発を一緒に進めるパートナーとして使えるようになっていきます。

今回の天気予報アプリも、ここで完成ではありません。

実際にアプリを動かし、表示内容を確認し、エラーがあれば修正する。

そして最後には「このアプリはどのような仕組みで動いているのか」をGitHub Copilotと一緒に整理して、ドキュメントとして残していきます。

「コードを書く」だけではなく、「考える・理解する・説明する」までAIと一緒にやってみる。

これが今回の実践で一番伝えたいポイントです。

GitHub Copilotを使ったプログラミング学習を始めるなら、まずは小さなアプリを一つ完成させてみるのがおすすめです。

天気予報アプリのように、APIからデータを取得して画面に表示するアプリなら、Python、Streamlit、API連携、GitHub Copilotという複数の技術を一度に体験できます。

AIに任せる部分と、自分で考える部分。

このバランスを意識しながら開発を進めることで、AI時代のプログラミングスキルをより実践的に身につけていけるはずです。

GitHub Copilotで天気予報アプリを作ってみた｜Python・Streamlit・API連携を実践