openWeatherMapAPIの紹介

はじめに

OpenWeatherMap APIは、気象情報や天気予報を提供するためのサービスで、アプリの開発者やウェブサイト作成者に常用されています。この記事では、OpenWeatherMap APIの基本的な使い方や主な機能について解説します。

使用法

OpenWeatherMap APIを使用するには、無料か有料のAPIキーを登録して取得する必要があります。次のステップを参考にして使用を始めましょう。

アカウント登録およびログイン
OpenWeatherMapのウェブサイトでアカウントを作成し、ログインします。

APIキーの取得
ユーザーダッシュボードからAPIキーを取得します。

エンドポイントの定義
エンドポイントを定義し、HTTPリクエストを送信します。

例、当前天気情報を取得するリクエストは下記のようです。

APIの返すデータの判断と処理
APIはJSON形式のデータを返します。これを解析し、必要な情報を取り出します。

実用例

今回は簡単にホームページにOpenWeatherMapから取得したデータをホームページに出力してみます。

const API_KEY = '';
        const weatherInfoEl = document.getElementById('weather-info');
        const getWeatherBtn = document.getElementById('get-weather-btn');

        async function fetchWeather() {
            const url = `https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=5d783608e942ed6119709729459521fd&lang=ja&units=metric`;

            weatherInfoEl.textContent = '天気情報を取得中...';

                const response = await fetch(url);
                const data = await response.json();

                if (response.ok) {
                    const weather = data.weather[0].description; 
                    const temp = data.main.temp;
                    weatherInfoEl.textContent = `東京の天気は「${weather}」、気温は${temp}℃です。`;
                } 
        }

最後に

記事を参考にして、OpenWeatherMap APIを使用した気象情報アプリを作成しましょう。