【Flask入門】外部API（天気情報）と連携してWebアプリを作ろう

PythonでWebアプリを作る際、

外部APIからデータを取得したい
requestsの使い方を知りたい
HTTPステータスの意味が分からない

と感じることはありませんか？

本記事では、Flaskと外部APIを連携し、天気情報を取得するWebアプリを作りながら、

API通信の基本
requestsの使い方
HTTPステータスコードの意味

を初心者向けに丁寧に解説します。

Flaskアプリで外部APIと連携する方法を知りたい
requestsライブラリを使ってデータを取得してみたい
APIのレスポンスをHTMLテンプレートで表示したい
天気APIなど実用的なAPI例で学びたい

今回のゴール
ステップ1：環境準備
1. 必要なライブラリ
ステップ2：プロジェクト構成
ステップ3：Flaskアプリ（app.py）
ステップ4：HTMLテンプレート（templates/index.html）
解説ポイント
実行方法
1. 結果
【補足1】OpenWeatherMapのAPIキー取得方法
【補足2】HTTPステータスコードとは？
1. よく使うステータスコード一覧
まとめ
次におすすめの記事

今回のゴール

OpenWeatherMap（天気情報API）と連携し、都市名を入力すると天気情報を取得して表示するWebアプリをFlaskで作成します。

ステップ1：環境準備

必要なライブラリ

pip install flask requests

ステップ2：プロジェクト構成

以下のような構成で作成します。

weather_app/
├── app.py
├── templates/
│   └── index.html

ステップ3：Flaskアプリ（app.py）

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

API_KEY = 'YOUR_API_KEY'  # ← 実際のAPIキーに置き換えてください

@app.route('/', methods=['GET', 'POST'])
def index():
    weather_data = None
    error = None

    if request.method == 'POST':
        city = request.form.get('city')
        if not city:
            error = '都市名が未入力です。'
        else:
            url = f'https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric&lang=ja'
            response = requests.get(url)

            if response.status_code == 200:
                data = response.json()
                weather_data = {
                    'city': city,
                    'temp': data['main']['temp'],
                    'description': data['weather'][0]['description'],
                    'icon': data['weather'][0]['icon']
                }
            else:
                error = f'天気情報の取得に失敗しました。（ステータスコード: {response.status_code}）'

    return render_template('index.html', weather=weather_data, error=error)

if __name__ == '__main__':
    app.run(debug=True)

ステップ4：HTMLテンプレート（templates/index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>天気情報アプリ</title>
</head>
<body>
    <h1>天気情報アプリ</h1>

    <form method="POST">
        <input type="text" name="city" placeholder="都市名を入力" required>
        <button type="submit">検索</button>
    </form>

    {% if error %}
        <p style="color: red;">{{ error }}</p>
    {% endif %}

    {% if weather %}
        <h2>{{ weather.city }}の天気</h2>
        <p>気温: {{ weather.temp }}℃</p>
        <p>説明: {{ weather.description }}</p>
        <img src="https://openweathermap.org/img/wn/{{ weather.icon }}@2x.png" alt="天気アイコン">
    {% endif %}
</body>
</html>

解説ポイント

requests.get(url)

天気APIにアクセスし、都市名に応じたJSON形式のデータを取得します。

data['main']['temp']

APIから得たJSONの中から気温などの情報を抽出します。

render_template()

HTMLに値を渡して動的に画面を表示できます。

実行方法

python app.py

ブラウザで http://127.0.0.1:5000/ にアクセス
都市名（例：Tokyo, London）を入力して天気情報を表示

結果

【補足1】OpenWeatherMapのAPIキー取得方法

OpenWeatherMapのAPIキーの取得する方法は以下になります。

https://openweathermap.org/ にアクセス
無料アカウント作成
「API Keys」ページからAPIキーをコピー

【補足2】HTTPステータスコードとは？

API通信では、必ず「結果」が返ってきます。それが HTTPステータスコードになります。

今回のプログラムでは通信が成立した場合と失敗した場合の2つだけの条件を基に出力しています。(if response.status_code == 200:の箇所)

本来だったら、ステータスコードの条件ごとに処理を分岐させることでより便利なアプリになったりするので、ここでは覚えておくとよいステータスコードをまとめています。(主に個人的な備忘録として)

よく使うステータスコード一覧

コード	意味	説明
200	OK	正常に成功
400	Bad Request	リクエストが間違っている
401	Unauthorized	認証エラー（APIキー間違い）
404	Not Found	データが存在しない
500	Server Error	サーバー側の問題

その他のステータスコードについてはこちらをご参照下さい。

まとめ

Flaskと外部API連携の基本が理解できる
requestsライブラリの使い方が学べる
HTMLに値を渡して動的表示する方法がわかる