【JavaScript】OpenWeatherMap（Weather API）の使い方を解説

サインイン

OpenWeatherMapの公式HP から右上の「Sign In」を押してサインインしていきます。

アカウント登録ができたら作成したアカウントにログインしてアクセスキーを確認します。

アクセスキーの確認

アクセスキーの確認はアカウントマークから「API Keys」を押すとアクセスキー一覧ページに移動して確認できます。

複数のアクセスキーを作りたい場合はアクセスキー一覧ページから「Create key」で名前を決めたアクセスキーを作成することができます。

アクセスキーの有効化

アクセスキーの有効化は「Status」が「Active」になっていれば基本的に大丈夫です。

しかしアカウント作成から数時間以内はアクセスキーの有効化が終わっていない可能性が高く、「Active」状態でもアクセスキーが有効かわかりません。

自分の場合は1時間後では401エラーが返ってきて、12時間後に試したら無事読み込むことができました。

APIデータを取得する

「Current Weather API」について書かれているページで紹介されているAPIの読み込み方で「都市名」と「アクセスキー」だけで読み込めるものは以下のコードになります。

https://api.openweathermap.org/data/2.5/weather?q={cityname}&appid={API key}

JavaScript(jquery)でAPIを読み込む場合はfetchメソッドを使ってjsonデータを読み込みます。

次のコードはコンソールログに読み込んだデータを表示するだけのコードで、cityとAPIKeyを設定したら実行できると思います。

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKey}`)
.then(response => response.json())
.then(date => {
console.log(date);
});

APIデータを表示する

先ほど確認したデータの中でweatherという一つ目の配列の「id,main,description,icon」というクラスに文字や数字が入れられています。

その中のmainが天気を表しているのでalertメソッドを使って確認してみます。

alert(date.weather[0].main)

「Clouds」や「Rain」といった天気を表す文字が表示できたと思います。

これでAPIデータの読み込みからデータの確認、データの表示まで出来ました。